[css-color-5] Add interpolation section, define hue angle interpolation there

Related to #4647 #4928 #4735

Author: LeaVerou

css-color-5/Overview.bs

@@ -713,6 +713,75 @@ When an origin color is present, the following keywords can also be used in this
 	</pre>
 </div>
 
+Interpolation {#interpolation}
+===================================
+
+In general, interpolation between <<color>> values of the same color space occurs by linearly interpolating each component separately.
+
+Issue: Should gamut mapping occur before or after interpolation?
+
+Issue(4928): How to handle achromatic interpolation?
+
+Color space for interpolation {#interpolation-space}
+------------------------------
+
+If colors are not in the same color space, they are first converted to LCH and and interpolated as LCH colors.
+Host syntax can override the interpolation color space and specify which color space is used for interpolation.
+
+Issue: Should the colors at 0% and 100% be serialized with their original color spaces or converted to the interpolation space?
+
+Hue interpolation {#hue-interpolation}
+-------------------
+
+For color functions with a hue angle (LCH, HSL, HWB etc), there are multiple ways to interpolate.
+We typically want to avoid arcs over 360, as they are rarely desirable,
+so in most cases angles are fixed up prior to interpolation so that per-component interpolation is done over less than 360 degrees, often less than 180.
+Host syntax can specify any of the following algorithms for hue interpolation
+(angles in the following are in degrees, but the logic is the same regardless of how they are specified):
+
+: ''shorter''
+:: Angles are adjusted so that θ₂ - θ₁ ∈ [0, 180). In pseudo-Javascript:
+	<pre>
+	if (θ₂ - θ₁ >= 180) {
+		θ₁ += 360;
+	}
+	else if (θ₂ - θ₁ <= -180) {
+		θ₂ += 360;
+	}
+	</pre>
+
+: ''longer''
+:: Angles are adjusted so that θ₂ - θ₁ ∈ [180, 360). In pseudo-Javascript:
+	<pre>
+	if (θ₂ - θ₁ <= 180) {
+		θ₂ += 360;
+	}
+	else if (θ₂ - θ₁ >= -180) {
+		θ₁ += 360;
+	}
+	</pre>
+
+: ''increasing''
+:: Angles are adjusted so that θ₂ - θ₁ ∈ [0, 360) and θ₁ ≤ θ₂. In pseudo-Javascript:
+	<pre>
+	if (θ₂ < θ₁) {
+		θ₂ += 360;
+	}
+	</pre>
+
+: ''decreasing''
+:: Angles are adjusted so that θ₂ - θ₁ ∈ [0, 360) and θ₁ ≥ θ₂. In pseudo-Javascript:
+	<pre>
+	if (θ₁ < θ₂) {
+		θ₁ += 360;
+	}
+	</pre>
+
+: ''specified''
+:: No fixup is performed. Angles are interpolated in the same way as every other component.
+
+Unless otherwise specified, if no specific hue interpolation algorithm is selected by the host syntax, the default is ''shorter''.
+
 
 Security and Privacy Considerations {#SecPriv}
 ===================================
@@ -725,4 +794,4 @@ Acessibility Considerations {#Ally}
 This specification introduces a new feature
 to help stylesheet authors
 write stylesheets which conform
-to WCAG 2.1 <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">section 1.4.3 Contrast (Minimum)</a>.
+to WCAG 2.1 <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">section 1.4.3 Contrast (Minimum)</a>.