@@ -223,17 +223,14 @@ Mixing Colors: the ''color-mix()'' Function {#color-mix}
223
223
they are scaled accordingly so that they add up to 100%.
224
224
6. Otherwise, if both are provided and add up to less than 100%,
225
225
the sum is saved as an alpha multiplier.
226
- They are then scaled accordingly so that they add up to 100%.
226
+ If the sum is greater than zero,
227
+ they are then scaled accordingly so that they add up to 100%.
227
228
228
229
This means that
229
230
<var> p1</var> becomes <var> p1</var> / (<var> p1</var> + <var> p2</var> )
230
231
and
231
232
<var> p2</var> becomes <var> p2</var> / (<var> p1</var> + <var> p2</var> ).
232
233
233
- <!-- @@ Need to handle the sum to zero case to generate transparent black
234
- https://github.com/w3c/csswg-drafts/issues/11678#issuecomment-2686226875
235
- -->
236
-
237
234
<wpt>
238
235
color-mix-percents-01.html
239
236
color-mix-percents-02.html
@@ -270,18 +267,19 @@ Mixing Colors: the ''color-mix()'' Function {#color-mix}
270
267
271
268
After normalizing both percentages, the result is produced via the following algorithm:
272
269
273
- 1. As described in [[css-color-4#interpolation]] ,
270
+ 1. If the alpha multiplier is zero, the result is ''transparent'' , converted to the specified interpolation <<color-space>>
271
+ 2. Otherwise, as described in [[css-color-4#interpolation]] ,
274
272
both colors are converted to the specified interpolation <<color-space>> ,
275
273
taking into account any [=analogous components=] .
276
- 2 . Colors are then interpolated in the specified color space,
274
+ 3 . Colors are then interpolated in the specified color space,
277
275
as described in [[css-color-4#interpolation]] .
278
276
If the specified color space is a ''cylindrical-polar-color'' space,
279
277
then the <<hue-interpolation-method>> controls the
280
278
interpolation of hue, as described in
281
279
[[css-color-4#hue-interpolation]] .
282
280
If no <<hue-interpolation-method>> is specified, it is as if
283
281
''shorter'' had been specified.
284
- 3 . If an alpha multiplier was produced during percentage normalization,
282
+ 4 . If an alpha multiplier was produced during percentage normalization,
285
283
the alpha component of the interpolated result is multiplied
286
284
by the alpha multiplier.
287
285
@@ -298,6 +296,10 @@ After normalizing both percentages, the result is produced via the following alg
298
296
/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colormix.html
299
297
</wpt>
300
298
299
+ <!-- @@ Need WPT to test the sum to zero case, to generate transparent black
300
+ https://github.com/w3c/csswg-drafts/issues/11678#issuecomment-2686226875
301
+ -->
302
+
301
303
The result of mixing is the color at the specified percentage along the progression
302
304
of the second color to the first color.
303
305
@@ -387,6 +389,15 @@ and a percentage of 100% returns the same color converted to the specified color
387
389
* which is a slightly-blueish green: <span class="swatch" style="--color: rgb(7.7377% 52.5730% 37.3213%)"></span> rgb(7.7377% 52.5730% 37.3213%)
388
390
</div>
389
391
392
+ <div class="example" id="ex-mix-zero-sum">
393
+ In this example, both percentages are zero, so their sum is also zero:
394
+
395
+ <pre class="lang-css"> color-mix(in oklch, teal 0%, olive 0%);</pre>
396
+
397
+ Thus, the result is transparent black, in the ''oklch'' color space:<br>
398
+ <span class="swatch" style="--color: transparent"></span> oklch(0% 0 none / 0)
399
+ </div>
400
+
390
401
<h3 id="color-mix-color-space-effect">
391
402
Effect of Mixing Color Space on color-mix
392
403
</h3>
0 commit comments