[css-color-5] add lch vs oklch blue-white mix examle w3c#6642

Author: svgeesus

css-color-5/Overview.bs

@@ -336,6 +336,38 @@ The choice of mixing colorspace can have a large effect on the end result.
 	  * mix result is <span class="swatch" style="--color: rgb(72.300% 38.639% 53.557%)"></span> lch(53.0304% 38.9346, 352.8138) which is rgb(72.300% 38.639% 53.557%)
 </div>
 
+<div class="example" id="ex-mix-blue-white">
+
+	<!--
+		https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2F7298c61254db05ec190c21f76ded6c7b
+	-->
+
+	This example is a 50% mix of white and blue,
+	in three different color spaces.
+
+	<pre class="lang-css">
+		color-mix(in lch, white, blue);
+		color-mix(in oklch, white, blue);
+		color-mix(in srgb, white, blue);
+	</pre>
+
+	The calcuation is as follows:
+	* <span class="swatch" style="--color: white"></span> white
+		is rgb(100% 100% 100%)
+		which is lch(100% 0 none)
+		which is oklch(100% 0 none)
+	* <span class="swatch" style="--color: blue"></span> blue
+		is rgb(0% 0% 100%)
+		which is lch(29.5683% 131.201 301.364)
+		which is oklch(45.201% 0.31332 264.059)
+	* <span class="swatch" style="--color: rgb(68.594% 53.794% 100%)"></span> mix
+		in lch is lch(64.7841% 65.6008 301.364) which is quite purple
+	* <span class="swatch" style="--color: rgb(45.304% 63.808% 100%)"></span> mix
+		in oklch is oklch(72.601 0.15672 264.059)
+	* <span class="swatch" style="--color: rgb(50% 50% 100%)"></span> mix
+		in srgb is rgb(50% 50% 100%) which is also a bit purple
+</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">