[css-color-5] Added worked example of color-mix() using device-cmyk fallback color #9555

Author: svgeesus

css-color-5/Overview.bs

@@ -511,6 +511,60 @@ The choice of mixing color space can have a large effect on the end result.
 	    <span class="swatch oog" style="--color: rgb(72.66% 100% 0%)"></span> color(srgb -0.3387 1.0943 -0.48899)
 </div>
 
+<div class="example" id="ex-device-cmyk-mix">
+	''device-cmyk()'' can be used in ''color-mix()''
+	but the result will depend on how the implementation
+	chooses to obtain a computed value.
+
+	<!-- detailed calculation is in the file 
+	 	workings/device-cmyk conversion worked example.txt -->
+
+	<pre class="lang-css">
+		color-mix(in lab, device-cmyk(0.091777 0.043303 0.312816 0.000000) 100%, yellow);
+	</pre>
+
+	Since the first color is at 100%, 
+	the second color is 0% and does not affect the mixed result in any way.
+	The result is thus the computed value of the first color,
+	in CIE Lab.
+
+	To visualize the result, 
+	let us say that the device CMYK values 
+	are in fact to be printed using SWOP 2006 coated.
+
+	* <span class="swatch" style="--color: rgb(98% 89% 75%)"></span> 
+		device-cmyk(0.091777 0.043303 0.312816 0.000000) is 
+		<span class="swatch" style="--color: rgb(98% 89% 75%)"></span> 
+		lab(91.44% 4.142 20.52)
+
+	Suppose the implementation uses an ICC profile 
+	to obtain ''lab()'' colors,
+	and in this example a FOGRA39 Coated profile is used:
+
+	* <span class="swatch" style="--color: rgb(98% 89% 75%)"></span> 
+		device-cmyk(0.091777 0.043303 0.312816 0.000000) is 
+		<span class="swatch" style="--color: rgb(92.81% 91.34% 75.31%)"></span> 
+		lab(91.840596 -3.559090 20.449159)
+	* The deltaE 2000 between this and the original printed color
+		is <strong>8.17</strong> which is clearly visible.
+
+	Now suppose another implementation uses 
+	the naive color conversion algorithm,
+	giving an sRGB result.
+
+	* <span class="swatch" style="--color: rgb(98% 89% 75%)"></span> 
+		device-cmyk(0.091777 0.043303 0.312816 0.000000) is 
+		<span class="swatch" style="--color: rgb(90.8223% 95.6697% 68.7184%)"></span> 
+		rgb(90.8223% 95.6697% 68.7184%)
+		which is
+		<span class="swatch" style="--color: rgb(90.8223% 95.6697% 68.7184%)"></span>
+		lab(94.02% -12.31 31.79)
+
+	* The deltaE 2000 between this and the original printed color
+		is <strong>14.3</strong> which is very visible.
+
+</div>
+
 <h3 id="color-mix-with-alpha">
 	Effect of Non-Unity Alpha on color-mix
 </h3>

css-color-5/workings/device-cmyk conversion worked example.txt

@@ -0,0 +1,42 @@
+Starting color rgb(98% 89% 75%) is lab(91.44% 4.142 20.52)
+
+(ICC profiles are in css-color-4/ICCprofiles )
+
+Converting to CMYK in swop, xicclu -f b .\SWOP2006_Coated5v2.icc
+
+91.440000 -4.142000 20.520000 [Lab] -> Lut -> 0.091777 0.043303 0.312816 0.000000 [CMYK]
+
+using ICC with coated fogra:  xicclu -f f .\Coated_Fogra39L_VIGC_300.icc
+
+0.091777 0.043303 0.312816 0.000000 [CMYK] -> Lut -> 91.840596 -3.559090 20.449159 [Lab]
+which is rgb(92.81% 91.34% 75.31%)
+
+let color1 = new Color("lab(91.44% 4.142 20.52)");
+let color2 = new Color("lab(91.840596 -3.559090 20.449159)");
+
+color1.deltaE(color2, "2000");  8.17
+
+lab(91.840596 -3.559090 20.449159) is rgb(92.81% 91.34% 75.31%)
+
+Now using naive algorithm:
+
+0.091777 0.043303 0.312816 0.000000
+
+function naive(cmyk) {
+  let [cyan, magenta, yellow, black] = cmyk;
+    let red = 1 - Math.min(1, cyan * (1 - black) + black);
+    let green = 1 - Math.min(1, magenta * (1 - black) + black);
+    let blue = 1 - Math.min(1, yellow * (1 - black) + black);… 
+}
+
+let x = [0.091777, 0.043303, 0.312816, 0.000000]
+naive(x);  //  [ 0.908223, 0.956697, 0.687184 ]
+
+rgb(90.8223% 95.6697% 68.7184%) = lab(94.02% -12.31 31.79)
+
+let color1 = new Color("lab(91.44% 4.142 20.52)");
+let color2 = new Color("lab(91.840596 -3.559090 20.449159)");
+let color3 = new Color("rgb(90.8223% 95.6697% 68.7184%)");
+
+color1.deltaE(color2, "2000"); // 8.17
+color1.deltaE(color3, "2000"); // 14.3