[css-color-5] more diagrams

Author: svgeesus

css-color-5/Overview.bs

@@ -126,12 +126,24 @@ it applies to all color channels.
 
 	<pre class="lang-css">mix-color(red yellow 65%);</pre>
 
+	<figure>
+		<img src="images/CH-mixing3.svg" style="width: 50vw">
+		<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.
+			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)
-		* mix lightness is 54.2917 * 0.65 + 97.6071 * 0.35 = 69.4521
-		* mix chroma is 106.83 * 0.65 + 94.7077 * 0.35 = 102.5872
-		* mix hue is 40.8526 * 0.65 + 99.5746 * 0.35 = 61.4053
+		* 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!