Skip to content

Commit

Permalink
Fix intermediate color in color-mix(red yellow 65%) example.
Browse files Browse the repository at this point in the history
The main bug was reported both in a comment in the spec and in
w3ctag/design-reviews#526 (comment)

This also fixes dropping of a "9" digit in the red's chroma midway
through the calculations.

Note that the correct intermediate is well out of sRGB.  I just chose to
use it anyway and add a note about such cases.
  • Loading branch information
dbaron committed Jun 24, 2020
1 parent 3dc2ea0 commit b4387e0
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 13 deletions.
17 changes: 7 additions & 10 deletions css-color-5/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,10 @@ If no keyword is specified, it is as if ''shorter'' were specified.
keeps the intermediate colors
as saturated as the endpoint colors.

Note: Some of the intermediate colors (including the one shown)
are outside of the sRGB gamut
and may not display correctly across implementations.

<pre class="lang-css">color-mix(red yellow 65%);</pre>

<figure>
Expand All @@ -205,17 +209,10 @@ If no keyword is specified, it is as if ''shorter'' were specified.
* sRGB <span class="swatch" style="--color: red"></span> red (#F00) is lch(54.2917% 106.8390 40.8526)
* sRGB <span class="swatch" style="--color: yellow"></span> yellow (#FF0) is lch(97.6071% 94.7077 99.5746)
* mixed lightness is 54.2917 * 0.65 + 97.6071 * 0.35 = 69.4521
* mixed chroma is 106.83 * 0.65 + 94.7077 * 0.35 = 102.5872
* mixed chroma is 106.8390 * 0.65 + 94.7077 * 0.35 = 102.5930
* mixed hue is 40.8526 * 0.65 + 99.5746 * 0.35 = 61.4053
* mixed result is lch(69.4521% 102.5872 61.4053)
* which is a red-orange: <span class="swatch" style="--color: rgb(75.3600% 65.6304% 16.9796%)"></span> rgb(75.3600% 65.6304% 16.9796%)
<!-- no it isn't!
orange_lch=[69.4521, 102.5872, 61.4053]
Array(3) [ 69.4521, 102.5872, 61.4053 ]
orange_srgb=LCH_to_sRGB(orange_lch)
Array(3) [ 1.0437490814854606, 0.5037070457407858, -0.3096435504814653 ]
-->
* mixed result is lch(69.4521% 102.5930 61.4053)
* which is a red-orange: <span class="swatch" style="--color: rgb(104.3765% 50.3695% -30.9644%)"></span> rgb(104.3765% 50.3695% -30.9644%)
</div>

Instead of mixing all channels equally, color-adjusters can be used
Expand Down
6 changes: 3 additions & 3 deletions css-color-5/images/CH-mixing3.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b4387e0

Please sign in to comment.