diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index a1e5381f9c1..d6226947ebb 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -178,44 +178,37 @@ If no keyword is specified, it is as if ''shorter'' were specified.
- 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. - 
color-mix(red yellow 65%);
+ 
color-mix(teal olive 65%);
-
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. +
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.
The calculation is as follows: - * sRGB red (#F00) is lch(54.2917% 106.8390 40.8526) - * sRGB 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: rgb(75.3600% 65.6304% 16.9796%) - + * sRGB teal (#008080) is lch(47.9855% 31.6903 196.4524) + * sRGB 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: rgb(7.7377% 52.5730% 37.3213%)
Instead of mixing all channels equally, color-adjusters can be used diff --git a/css-color-5/images/CH-mixing3.svg b/css-color-5/images/CH-mixing3.svg index adcedbc65a5..2e1535a65b9 100644 --- a/css-color-5/images/CH-mixing3.svg +++ b/css-color-5/images/CH-mixing3.svg @@ -1,61 +1,61 @@ - + Show the L=50 plane of the CIE Lab colorspace. Two colors to be mixed are visualized on this plane, with an arc to show where the intermediate colors lie. - red (#F00) is lch(54.2917% 106.8390 40.8526) lab(54.2917, 80.81247134537588, 69.88502268764606) - sRGB yellow (#FF0) is lch(97.6071% 94.7077 99.5746) lab(97.6071, -15.75288562782686, 93.38840952541491) - mix is lch(69.4521% 102.5872 61.4053) which is rgb(75.3600% 65.6304% 16.9796%) lab(69.4521, 49.09932548023713, 90.07435729010635) + teal (#008080) is lch(47.9855% 31.6903 196.4524) lab(47.9855% -30.3927 -8.9753) + olive (#808000) is lch(52.1496% 56.8124 99.5746) lab(52.1496% -9.4497 56.0210) + mix is lch(49.4429% 40.4830 162.5452) which is rgb(7.7377% 52.5730% 37.3213%) lab(49.4429% -38.6189 12.1430) +points="-9.449698804240317,-56.02099594142484 +-13.833653402205362,-53.80643035618212 +-17.913341009843528,-51.26034381372367 +-21.664814272923504,-48.41808315089472 +-25.06790075079225,-45.31661091066751 +-28.106299689649568,-41.99412231219065 +-30.767641260271752,-38.489657836516585 +-33.04350824562605,-34.84271501380839 +-34.929420499694515,-31.092862966107194 +-36.42478282900496,-27.279363197055208 +-37.532797270032745,-23.440800027070804 +-38.26034104605828,-19.614723950372923 +-38.617811783626045,-15.837311040199754 +-38.618941848963466,-12.14304135205028 +-38.28058392625162,-8.564399073496384 +-37.62247020033304,-5.131596944975052 +-36.66694772432252,-1.8723272310682786 +-35.43869274589105,1.1884587416286438 +-33.964406933172626,4.028740743452682 +-32.27249858098426,6.629588053898483"/> -​ - + + - - + + - - - + + + - - - + + + @@ -64,9 +64,9 @@ points="-15.75288562782686,-93.38840952541491 - +a - -a - -b - +b + +a + -a + -b + +b - \ No newline at end of file +