Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 17 additions & 24 deletions css-color-5/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -178,44 +178,37 @@ If no keyword is specified, it is as if ''shorter'' were specified.
</div>

<div class="example">
This example produces the mixture of red and yellow,
This example produces the mixture of teal and olive,
in ''lch'' colorspace (the default),
with each lch channel being 65% of the value for red
and 35% of the value for yellow.
with each lch channel being 65% of the value for teal
and 35% of the value for olive.

Note: interpolating on hue and chroma
keeps the intermediate colors
as saturated as the endpoint colors.

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

<figure>
<img src="images/CH-mixing3.svg" style="width: 50vmin">
<figcaption>Mixtures of red and yellow.
Red has a hue angle, measured from the positive a axis,
of 40.8526 degrees
while yellow has a hue angle of 99.5746 degrees.
Red has a chroma, or distance from the central neutral axis, of 106.8390
while yellow has a chroma of 94.7077.
<figcaption>Mixtures of teal and olive.
Teal has a hue angle, measured from the positive a axis,
of 196.4524 degrees
while olive has a hue angle of 99.5746 degrees.
Teal has a chroma, or distance from the central neutral axis, of 31.6903
while olive has a chroma of 56.8124.
Mixtures lie along the dashed curve. A 65%/35% mixture is shown.
</figcaption>
</figure>

The calculation is as follows:
* 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 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 ]
-->
* sRGB <span class="swatch" style="--color: teal"></span> teal (#008080) is lch(47.9855% 31.6903 196.4524)
* sRGB <span class="swatch" style="--color: olive"></span> olive (#808000) is lch(52.1496% 56.8124 99.5746)
* mixed lightness is 47.9855 * 0.65 + 52.1496 * 0.35 = 49.4429
* mixed chroma is 31.6903 * 0.65 + 56.8124 * 0.35 = 40.4830
* mixed hue is 196.4524 * 0.65 + 99.5746 * 0.35 = 162.5452
* mixed result is lch(49.4429% 40.4830 162.5452)
* 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%)
</div>

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