Skip to content

Commit b4387e0

Browse files
committed
Fix intermediate color in color-mix(red yellow 65%) example.
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.
1 parent 3dc2ea0 commit b4387e0

2 files changed

Lines changed: 10 additions & 13 deletions

File tree

css-color-5/Overview.bs

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,10 @@ If no keyword is specified, it is as if ''shorter'' were specified.
187187
keeps the intermediate colors
188188
as saturated as the endpoint colors.
189189

190+
Note: Some of the intermediate colors (including the one shown)
191+
are outside of the sRGB gamut
192+
and may not display correctly across implementations.
193+
190194
<pre class="lang-css">color-mix(red yellow 65%);</pre>
191195

192196
<figure>
@@ -205,17 +209,10 @@ If no keyword is specified, it is as if ''shorter'' were specified.
205209
* sRGB <span class="swatch" style="--color: red"></span> red (#F00) is lch(54.2917% 106.8390 40.8526)
206210
* sRGB <span class="swatch" style="--color: yellow"></span> yellow (#FF0) is lch(97.6071% 94.7077 99.5746)
207211
* mixed lightness is 54.2917 * 0.65 + 97.6071 * 0.35 = 69.4521
208-
* mixed chroma is 106.83 * 0.65 + 94.7077 * 0.35 = 102.5872
212+
* mixed chroma is 106.8390 * 0.65 + 94.7077 * 0.35 = 102.5930
209213
* mixed hue is 40.8526 * 0.65 + 99.5746 * 0.35 = 61.4053
210-
* mixed result is lch(69.4521% 102.5872 61.4053)
211-
* 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%)
212-
<!-- no it isn't!
213-
orange_lch=[69.4521, 102.5872, 61.4053]
214-
Array(3) [ 69.4521, 102.5872, 61.4053 ]
215-
216-
orange_srgb=LCH_to_sRGB(orange_lch)
217-
Array(3) [ 1.0437490814854606, 0.5037070457407858, -0.3096435504814653 ]
218-
-->
214+
* mixed result is lch(69.4521% 102.5930 61.4053)
215+
* 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%)
219216
</div>
220217

221218
Instead of mixing all channels equally, color-adjusters can be used

css-color-5/images/CH-mixing3.svg

Lines changed: 3 additions & 3 deletions
Loading

0 commit comments

Comments
 (0)