[css-color-4] Fixed a few issues regarding hue interpolation

Author: SebastianZ

css-color-4/Overview.bs

@@ -1085,12 +1085,12 @@ any achromatic color will have a [=powerless=] hue component.
 		to achieve an effect where you only <em>want</em> 
 		to interpolate certain components of a color.
 
-		For example, to animate a color to "grayscale", no matter what the color is,
+		For example, to interpolate a color to "grayscale", no matter what the color is,
 		one can interpolate it with ''oklch(none 0 none)''.
 		This will take the hue and lightness from the starting color,
-		but animate its chroma down to 0,
+		but interpolate its chroma down to 0,
 		rendering it into an equal-lightness gray
-		with a steady hue across the whole animation.
+		with a steady hue across the whole interpolation.
 
 		Doing this manually would require 
 		matching the hue and lightness of the starting color explicitly.
@@ -4964,15 +4964,15 @@ Hue Interpolation</h3>
 
 	<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(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, 
+		would be at a hue angle of 30 + (90 - 30) * 0.5 = 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:
+	Interpolated angles are adjusted so that |θ₂ - θ₁| ∈ [-180, 180]. In pseudo-Javascript:
 		<pre>
 		if (θ₂ - θ₁ > 180) {
 			θ₁ += 360;
@@ -4985,14 +4985,14 @@ 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 
+	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) * 0.5 = 240 degrees, 
+		would be at a hue angle of (30 + 360 + 90) * 0.5 = 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)
@@ -5019,25 +5019,25 @@ Hue Interpolation</h3>
 
 	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,
+	However, if one of the hue angles is being interpolated,
 	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) * 0.5 = 110 degrees, 
+		would be at a hue angle of (30 + 190) * 0.5 = 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 the second color is animated to 
+		However, if the hue of the second color is interpolated 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) * 0.5 = 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.
+		rather than flipping to the opponent color part-way through the interpolation.
 	</div>
 
 	Angles are adjusted so that |θ₂ - θ₁| ∈ [0, 360). In pseudo-Javascript:
@@ -5050,34 +5050,34 @@ Hue Interpolation</h3>
 <h4 id="hue-decreasing">
 <dfn export>decreasing</dfn></h4>
 
-	Hue angles are interpolated so that, 
+	Hue angles are interpolated so that,
 	as they progress from the first color to the second, 
 	the angle is always <em>decreasing</em>.
 	If the angle decreases to 0 it is reset to 360,
 	and then continues decreasing.
 
-	Depending on the difference between the two angles, 
+	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,
+	However, if one of the hue angles is being interpolated,
 	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) * 0.5 = 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 the 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) * 0.5 = 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>
+	<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) * 0.5 = 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 the second color is interpolated 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) * 0.5 = 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 interpolation.
+	</div>
 
 	Angles are adjusted so that |θ₂ - θ₁| ∈ (-360, 0]. In pseudo-Javascript:
 		<pre>