[css-color-4] add hue interpolation example

Author: svgeesus

css-color-4/Overview.bs

@@ -4432,7 +4432,7 @@ Interpolating with alpha</h3>
 	is divided by the interpolated alpha value.
 
 	<div class="example" id="ex-premultiplied-srgb">
-		For example, to interpolate the two sRGB colors
+		For example, to interpolate, in the sRGB colorspace, the two sRGB colors
 		<span class="swatch" style="--color: rgb(24%, 12%, 98%, 0.4)"></span> rgb(24% 12% 98% / 0.4)
 		and
 		<span class="swatch" style="--color: rgb(62% 26% 64% / 0.6)"></span> rgb(62% 26% 64% / 0.6)
@@ -4450,7 +4450,7 @@ Interpolating with alpha</h3>
 	</div>
 
 	<div class="example" id="ex-premultiplied-lab">
-		To interpolate two colors in lab
+		To interpolate, in the Lab colorspace, the two colors
 		<span class="swatch" style="--color: rgb(76%, 62%, 03%, 0.4)"></span> rgb(76% 62% 03% / 0.4)
 		and
 		<span class="swatch" style="--color: rgb(91.56%, 3.87%, 74.09%, 0.6)"></span> color(display-p3 0.84 0.19 0.72 / 0.6)
@@ -4469,6 +4469,29 @@ Interpolating with alpha</h3>
 		when premultiplication is undone.
 	</div>
 
+	<div class="example" id="ex-premultiplied-lab">
+		To interpolate, in the chroma-preserving LCH colorspace, the same two colors
+		<span class="swatch" style="--color: rgb(76%, 62%, 03%, 0.4)"></span> rgb(76% 62% 03% / 0.4)
+		and
+		<span class="swatch" style="--color: rgb(91.56%, 3.87%, 74.09%, 0.6)"></span> color(display-p3 0.84 0.19 0.72 / 0.6)
+		they are first converted to LCH
+		<span class="swatch" style="--color: rgb(76%, 62%, 03%, 0.4)"></span> lch(66.93% 68.79 85.94 / 0.4)
+		<span class="swatch" style="--color: rgb(91.56%, 3.87%, 74.09%, 0.6)"></span> lch(53.5% 89.35 337.7 / 0.6)
+		then the L and C coordinates (but not H) are premultiplied before interpolation
+		[26.771% 27.516 85.94]
+		and
+		[32.102% 53.61 337.7].
+
+		The midpoint of linearly interpolating these,
+		along the shorter hue arc (the default) would be
+		[29.4365% 40.563 63.64]
+		which, with an alpha value of 0.5,
+		is  lch(58.873% 81.126 127.28) / 0.5)
+		when premultiplication is undone. This is within the display-p3 gamut, at color(display-p3 0.3535 0.6271 0.1369 / 0.5) but outside sRGB; the closest in-gamut color is
+		<span class="swatch oog" style="--color: rgb(87.604%, 38.956%, 51.753%, 0.5)"></span> rgb(23.92% 63.55% 0% / 0.5)
+
+	</div>
+
 	Issue(445):
 
 <h3 id="hue-interpolation">