[css-color-4] Add descriptions and example for hue interpolation keywords. #9207

Author: svgeesus

css-color-4/Overview.bs

@@ -4863,7 +4863,7 @@ Hue Interpolation</h3>
 
 	For color functions with a hue angle (LCH, HSL, HWB etc), there are multiple ways to interpolate.
 	As arcs greater than 360&deg; are rarely desirable,
-	by default hue angles are fixed up prior to interpolation
+	hue angles are fixed up prior to interpolation
 	so that per-component interpolation is done over less than 360&deg;, often less than 180&deg;.
 
 	Host syntax can specify any of the following algorithms for hue interpolation
@@ -4887,12 +4887,25 @@ Hue Interpolation</h3>
 	</wpt>
 
 	Note: As a reminder,
-	if the interpolating colors were not already in the specified interpolation syntax,
+	if the interpolating colors were not already in the specified interpolation color space,
 	then converting them will turn any [=powerless components=] into [=missing components=].
 
 <h4 id="hue-shorter">
 <dfn export>shorter</dfn></h4>
 
+	Hue angles are interpolated to take the <em>shorter</em> of the two arcs 
+	between the starting and ending hues.
+
+	<div class="example" id="ex-shorter">
+		For example, the midpoint when interpolating in Oklch from a red
+		<span class="swatch" style="--color: rgb(93.22% 7.98% 0.485%)"></span>&nbsp;oklch(0.6 0.24 30) to a yellow 
+		<span class="swatch" style="--color: rgb(89.07% 72.28% 19.23%)"></span>&nbsp;oklch(0.8 0.15 90)
+		would be at a hue angle of (30 + 90) / 2 = 60 degrees, 
+		along the shorter arc between the two colors,
+		giving a deep orange
+		<span class="swatch" style="--color: rgb(87.66% 51.96% 0%)"></span>&nbsp;oklch(0.7 0.195 60)
+	</div>
+
 	Angles are adjusted so that |θ₂ - θ₁| ∈ [-180, 180]. In pseudo-Javascript:
 		<pre>
 		if (θ₂ - θ₁ > 180) {
@@ -4906,6 +4919,19 @@ Hue Interpolation</h3>
 <h4 id="hue-longer">
 <dfn export>longer</dfn></h4>
 
+	Hue angles are interpolated to take the <em>longer</em> of the two arcs 
+	between the starting and ending hues.
+
+	<div class="example" id="ex-longer">
+		For example, the midpoint when interpolating in Oklch from a red
+		<span class="swatch" style="--color: rgb(93.22% 7.98% 0.485%)"></span>&nbsp;oklch(0.6 0.24 30) to a yellow 
+		<span class="swatch" style="--color: rgb(89.07% 72.28% 19.23%)"></span>&nbsp;oklch(0.8 0.15 90)
+		would be at a hue angle of (30 + 360 + 90) / 2 = 240 degrees, 
+		along the longer arc between the two colors,
+		giving a sky blue
+		<span class="swatch" style="--color: rgb(0% 66.25% 100%)"></span>&nbsp;oklch(0.7 0.195 240)
+	</div>
+
 	Angles are adjusted so that |θ₂ - θ₁| ∈ {(-360, -180], [180, 360)}. In pseudo-Javascript:
 		<pre>
 		if (0 < θ₂ - θ₁ < 180) {
@@ -4919,6 +4945,33 @@ Hue Interpolation</h3>
 <h4 id="hue-increasing">
 <dfn export>increasing</dfn></h4>
 
+	Hue angles are interpolated so that, 
+	as they progress from the first color to the second, 
+	the angle is always <em>increasing</em>.
+
+	Depending on the difference between the two angles, 
+	this will either look the same as <em>shorter</em> or as <em>longer.</em>
+	However, if one of the hue angles is being animated,
+	and the hue angle difference passes through 180 degrees,
+	the interpolation will not flip to the other arc.
+
+	<div class="example" id="ex-increasing">
+		For example, the midpoint when interpolating in Oklch from a deep brown
+		<span class="swatch" style="--color: rgb(57.92% 29.44% 25.11%)"></span>&nbsp;oklch(0.5 0.1 30) to a turquoise 
+		<span class="swatch" style="--color: rgb(26.29% 69.89% 67.49%)"></span>&nbsp;oklch(0.7 0.1 190)
+		would be at a hue angle of (30 + 190) / 2 = 110 degrees, 
+		giving a khaki
+		<span class="swatch" style="--color: rgb(51.73% 52.26% 22.03%)"></span>&nbsp;oklch(0.6 0.1 110).
+
+		However, if the hue of second color is animated to 
+		<span class="swatch" style="--color: rgb(33.09% 66.63% 81.81%)"></span>&nbsp;oklch(0.7 0.1 230),
+		the midpoint of the interpolation will be (30 + 230) / 2 = 130 degrees,
+		continuing in the same increasing direction, 
+		giving another green
+		<span class="swatch" style="--color: rgb(42.44% 54.95% 28.93%)"></span>&nbsp;oklch(0.6 0.1 130)
+		rather than flipping to the opponent color part-way through the animation.
+	</div>
+
 	Angles are adjusted so that |θ₂ - θ₁| ∈ [0, 360). In pseudo-Javascript:
 		<pre>
 		if (θ₂ < θ₁) {
@@ -4929,6 +4982,33 @@ Hue Interpolation</h3>
 <h4 id="hue-decreasing">
 <dfn export>decreasing</dfn></h4>
 
+	Hue angles are interpolated so that, 
+	as they progress from the first color to the second, 
+	the angle is always <em>decreasing</em>.
+
+	Depending on the difference between the two angles, 
+	this will either look the same as <em>shorter</em> or as <em>longer.</em>
+	However, if one of the hue angles is being animated,
+	and the hue angle difference passes through 180 degrees,
+	the interpolation will not flip to the other arc.
+
+<div class="example" id="ex-decreasing">
+	For example, the midpoint when interpolating in Oklch from a deep brown
+	<span class="swatch" style="--color: rgb(57.92% 29.44% 25.11%)"></span>&nbsp;oklch(0.5 0.1 30) to a turquoise 
+	<span class="swatch" style="--color: rgb(26.29% 69.89% 67.49%)"></span>&nbsp;oklch(0.7 0.1 190)
+	would be at a hue angle of (30 + 360 + 190) / 2 = 290 degrees, 
+	giving a purple
+	<span class="swatch" style="--color: rgb(49.98% 46.03% 72.08%)"></span>&nbsp;oklch(0.6 0.1 290).
+
+	However, if the hue of second color is animated to 
+	<span class="swatch" style="--color: rgb(33.09% 66.63% 81.81%)"></span>&nbsp;oklch(0.7 0.1 230),
+	the midpoint of the interpolation will be (30 +360 + 230) / 2 = 310 degrees,
+	continuing in the same decreasing direction, 
+	giving another purple
+	<span class="swatch" style="--color: rgb(57.47% 43.44% 67.8%)"></span>&nbsp;oklch(0.6 0.1 310)
+	rather than flipping to the opponent color part-way through the animation.
+</div>
+
 	Angles are adjusted so that |θ₂ - θ₁| ∈ (-360, 0]. In pseudo-Javascript:
 		<pre>
 		if (θ₁ < θ₂) {