[css-color-5] simplest first example, with diagram!!!!!OMG

Author: svgeesus

css-color-5/Overview.bs

@@ -79,14 +79,44 @@ Mixing colors: the ''color-mix'' function {#colormix}
 		[ <<color-function>> <<colorspace>>? ]?] )
 </pre>
 
+<div class="example">
+	This example produces a mixture of 40% <span class="swatch" style="--color: peru"></span> peru
+	and 60% <span class="swatch" style="--color: lightgoldenrod"></span> lightgoldenrod.
+
+	<pre class="lang-css">mix-color(peru lightgoldenrod 40%)</pre>
+
+	The mixing is done in ''lch()'' colorspace.
+	Here is a top-down view, looking along the neutral L axis:
+
+	<figure>
+		<img src="images/CH-mixing.svg" style="width: 50vw">
+		<figcaption>Mixtures of peru and lightgoldenrod.
+			Peru has a hue angle, measured from the positive a axis,
+			of 63.677 degrees
+			while lightgoldenrod has a hue angle of 98.821 degrees.
+			Peru has a chroma, or distance from the central neutral axis, of 54.011
+			while lightgoldenrod has a chroma of 31.415.
+			Mixtures lie along the curve. A 40%/60% mixture is shown.
+		</figcaption>
+	</figure>
+
+	The calculation is as follows:
+	  * <span class="swatch" style="--color: peru"></span> peru is lch(62.253% 54.011 63.677)
+	  * <span class="swatch" style="--color: lightgoldenrod"></span> lightgoldenrod is lch(91.374% 31.415 98.821)
+	  * the mixed lightness is 62.253 * 40/100 + 91.374 * (100-40)/100 = 79.7256
+	  * the mixed chroma is 54.011 * 40/100 + 31.415 * (100-40)/100 = 40.4534
+	  * the mixed hue is 63.677 * 40/100 + 98.821 * (100-40)/100 = 84.7634
+	  * the mixed result is <span class="swatch" style="--color: rgb(87.41% 76.03% 47.64%)"></span> lch(79.7256% 40.4534 84.7634)
+</div>
+
 <div class="example">
 	This example produces the mixture of a deep green and a sky blue,
 	in ''lch()'' colorspace (the default),
 	with the lightness being 40% of the lightness of the green
 	(and thus, 60% of the lightness of the blue).
 	The chroma and hue of the green are left unchanged.
 
-	<pre class="lang-css">mix-color(rgb(0% 42.35% 33.33%) rgb(41.2% 69.88% 96.64%), lightness(40%));</pre>
+	<pre class="lang-css">mix-color(rgb(0% 42.35% 33.33%) rgb(41.2% 69.88% 96.64%) lightness(40%));</pre>
 
 	The calculation is as follows:
 	  * <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)