[css-color-5] new color-mix examples

Author: Chris Lilley

css-color-5/Overview.bs

@@ -7,7 +7,7 @@ Group: csswg
 TR: https://www.w3.org/TR/css-color-5/
 ED: https://drafts.csswg.org/css-color-5/
 Work Status: exploring
-Delta Spec: yes
+!Delta Spec: yes
 Editor: Chris Lilley, W3C, chris@w3.org, w3cid 1438
 Editor: Una Kravets, Google, https://una.im, w3cid 115525
 Editor: Lea Verou, Invited Expert, http://lea.verou.me/about, w3cid 52258
@@ -80,35 +80,67 @@ Mixing colors: the ''color-mix'' function {#colormix}
 </pre>
 
 <div class="example">
-	This example produces the mixture of red and white,
+	This example produces the mixture of a deep green and a sky blue,
 	in ''lch()'' colorspace (the default),
-	with the lightness being 50% of the lightness of red
-	(and thus, 50% of the lightness of white).
-	The chroma and hue of red are left unchanged.
+	with the lightness being 50% of the lightness of the green
+	(and thus, 50% of the lightness of the blue).
+	The chroma and hue of the green are left unchanged.
 
-	<pre class="lang-css">mix-color(red, white, lightness(50%));</pre>
+	<pre class="lang-css">mix-color(rgb(0% 42.35% 33.33%), rgb(41.2% 69.88% 96.64%), lightness(50%));</pre>
 
 	The calculation is as follows:
-	  * sRGB red (#F00) is lch(54.2917 106.8390 40.8526)
-	  * sRGB white (#FFF) is lch(100 0 0)
-	  * mix lightness is 54.2917 * 0.5 + 100 * 0.5 = 77.14585
-	  * mixed result is lch(77.14585 81.95 37.192)
-	  * which results in a lighter red, like a Salmon color
+	  * <span class="swatch" style="--color: rgb(0% 42.35% 33.33%)"></span> rgb(0% 42.35% 33.33%) is lch(40.083% 32.808 171.175)
+	  * <span class="swatch" style="--color: rgb(41.2% 69.88% 96.64%)"></span> rgb(41.2% 69.88% 96.64%) is lch(70% 42.5 258.2)
+	  * mix lightness is 40.083 * 0.5 + 70% * 0.5 = 55.0415
+	  * mixed result is <span class="swatch" style="--color: rgb(22.87% 57.56% 47.73%)"></span> lch(55.0415 32.808 171.175)
+	  * which is a <span class="swatch" style="--color:  rgb(22.87% 57.56% 47.73%)"></span>  rgb(22.87% 57.56% 47.73%), a lighter green
+
+</div>
+
+<div class="example">
+	This example produces the mixture of a red and a sky blue,
+	in ''lch()'' colorspace (the default),
+	with the hue being 38% of that of the red
+	(and thus, 62% of that of the blue).
+	The chroma and lightness of the red are left unchanged.
 
-	  <!-- this is out of gamut, so unsuitable as a first example
-salmon =[77.14585, 81.95, 37.192]
-Array(3) [ 77.14585, 81.95, 37.192 ]
+	<pre class="lang-css">mix-color(rgb(82.02% 30.21% 35.02%), rgb(5.64% 55.94% 85.31%), hue(75.23%));</pre>
 
-salmon_sRGB=LCH_to_sRGB(salmon)
-Array(3) [ 1.2120451417178173, 0.5158157138581139, 0.40505102735813037 ]
-notice the 1.21 (121%)
-	-->
+	The calculation is as follows:
+	  * <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> rgb(82.02% 30.21% 35.02%) is lch(52% 58.1 22.7)
+	  * <span class="swatch" style="--color: rgb(5.64% 55.94% 85.31%)"></span> rgb(5.64% 55.94% 85.31%) is lch(56% 49.1 257.1)
+	  * mix hue is 22.7 * 0.7523 + 257.1 * 0.2477 = 80.76
+	  * mixed result is <span class="swatch" style="--color: rgb(61.11% 45.85% 0.41%)"></span>  lch(52% 58.1 80.76) which is rgb(61.11% 45.85% 0.41%)
 
-	<!-- showing out of gamut colors next -->
+</div>
+
+<div class="example">
+	This example produces the mixture of
+	the same two colors as the previous example
+	(a red and a sky blue),
+	in ''lch()'' colorspace (the default),
+	with the hue being 38% of that of the red
+	(and thus, 62% of that of the blue).
+	This time, the lightness is set to 68.4% and
+	the chroma is left unchanged.
+
+	<pre class="lang-css">mix-color(rgb(82.02% 30.21% 35.02%), rgb(5.64% 55.94% 85.31%), hue(75.23%) lightness(68.4%));</pre>
+
+	The calculation is as follows:
+	  * <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> rgb(82.02% 30.21% 35.02%) is lch(52% 58.1 22.7)
+	  * <span class="swatch" style="--color: rgb(5.64% 55.94% 85.31%)"></span> rgb(5.64% 55.94% 85.31%) is lch(56% 49.1 257.1)
+	  * mix hue is 22.7 * 0.7523 + 257.1 * 0.2477 = 80.76
+	  * new lightness is 68.4%
+	  * mixed result is <span class="swatch" style="--color: rgb(79.67% 62.48% 22.09%)"></span>  lch(68.4% 58.1 80.76) which is rgb(79.67% 62.48% 22.09%)
 
 </div>
 
-<img src="images/mix_red_white_lightness50.png" alt="Result of mix-color(red, white, lightness(50%)" />
+<!-- number | percent is ambiguous for lightness because lightness is itself a percentage -->
+
+	<!-- showing out of gamut colors next -->
+
+
+<!-- <img src="images/mix_red_white_lightness50.png" alt="Result of mix-color(red, white, lightness(50%)" /> -->
 
 <div class="example">
 	This example produces the mixture of red and yellow,