[css-color-5] add examples with different mixing color spaces

Author: svgeesus

css-color-5/Overview.bs

@@ -256,6 +256,38 @@ and a percentage of 100% returns the same color converted to the specified color
 		* 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>
 
+The choice of mixing colorspace can have a large effect on the end result.
+
+<div class="example" id="ex-mix-colorspaces-black-white">
+	<!--
+		https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2F6e9bc5c573fc5afcb11e9ab47c6e1e2f
+	-->
+	This example is a 50% mix of white and black,
+	in three different color spaces.
+
+	<pre class="lang-css">
+		color-mix(in lch, white, black);
+		color-mix(in xyz, white, black);
+		color-mix(in srgb, white, black);
+	</pre>
+
+	The calculation is as follows:
+		* sRGB  <span class="swatch" style="--color: white"></span> white (#008080) is lch(100% 0 0)
+		* sRGB <span class="swatch" style="--color: black"></span>  black (#808000) is lch(0% 0 0)
+		* The mix in LCH is <span class="swatch" style="--color: rgb(47% 47% 47%"></span>  lch(50% 0 0)
+		* The mix in XYZ is <span class="swatch" style="--color: rgb(74% 74% 74%"></span>  lch(76% 0 0)
+		* The mix in sRGB is <span class="swatch" style="--color: rgb(50% 50% 50%"></span>  lch(53.4% 0 0)
+
+	The mix in LCH gives an L value of 50%,
+	a perfect mid gray, exactly as expected
+	(mixing in Lab would do the same,
+	as the Lightness axis is the same in LCH and Lab).
+
+	The mix in XYZ gives a result that is too light;
+	XYZ is linear-light but is not perceptually uniform.
+	The mix in sRGB gives a result that is a bit too light;
+	sRGB is neither perceptually uniform nor linear-light.
+</div>
 <!--
 Let's move this example to the appropriate section when we have the new syntax for making these low-level adjustments
 <div class="example">