[css-color-5] second mix example with semi-transarent colors and an alpha multiplier. w3c#6833

Author: Chris Lilley

css-color-5/Overview.bs

@@ -390,6 +390,55 @@ must not be omitted.
 	This is a <em>huge</em> difference; the ΔE200 between the correct and incorrect results is 30.7!
 </div>
 
+When the percentage ormalization gnerates an alpha multiplier,
+the calculation is the same except for an additional last step.
+
+<div class="example" id="ex-premultiply-srgb-2">
+	This example is similar to the previous one,
+	25% semi-opaque red
+	and 75% semi-opaque green.
+	mixed in sRGB.
+
+	However in this case the percentages are specified as
+	20% of the first color and 60% of the second.
+	This adds to 80% so the alpha multiplier is 0.8.
+
+	The mix percentages are then scaled
+	by a factor of 100/80:<br>
+	20% * 100/80 = 25%<br>
+	60% * 100/80 = 75%<br>
+	giving the same final mix percentages as the previous example.
+
+	<pre class="lang-css">
+		color-mix(in srgb, rgb(100% 0% 0% / 0.7) 20%, rgb(0% 100% 0% / 0.2) 60%);
+	</pre>
+
+	The calcuation is as follows:
+	* <span class="swatch" style="--color: rgb(100% 0% 0% / 0.7)"></span> rgb(100% 0% 0% / 0.7)
+		when premultiplied, is [0.7, 0, 0]
+	* <span class="swatch" style="--color: rgb(0% 100% 0% / 0.2)"></span> rgb(0% 100% 0% / 0.2)
+		when premultiplied, is [0, 0.2, 0]
+	* the premultiplied, interpolated result is
+		[0.7 * 0.25 + 0 * (1 - 0.25), 0 * 0.25 + 0.2 * (1 - 0.25), 0 * 0.25 + 0 * (1 - 0.25)]
+		which is [0.175, 0.150, 0]
+	* the interpolated alpha is 0.7 * 0.25 + 0.2 * (1 - 0.25) = 0.325
+	* the un-premultiplied result is
+		[0.175 / 0.325, 0.150 / 0.325, 0 / 0.325]
+		which is [0.53846, 0.46154, 0]
+	* so the mixed color would be
+		<span class="swatch" style="--color: rgba(53.846%, 46.154%, 0%, 0.325)"></span>
+		color(srgb 0.53846 0.46154 0 / 0.325)
+	* there is a 0.8 alpha multiplier,
+		so the alpha of the mixed result is actually 0.325 * 0.8 = 0.260
+		so the mixed color is actually <span class="swatch" style="--color: rgba(53.846%, 46.154%, 0%, 0.260)"></span>
+		color(srgb 0.53846 0.46154 0 / 0.260)
+</div>
+
+Note: do not multiply the interpolated alpha by the alpha multiplier
+and then use that to undo premultiplication.
+That would be correct if the mix percentages were not scaled to sum to 100%,
+but they are, so doing it this way would adjust the mixed color <em>twice</em>.
+
 <!--
 Let's move this example to the appropriate section when we have the new syntax for making these low-level adjustments
 <div class="example">