[css-color-4] Split hue angle into its own section, allow NaN, fix w3c#5309

Author: svgeesus

css-color-4/Overview.bs

@@ -244,6 +244,8 @@ Representing Colors: the <<color>> type</h2>
 	such as the ''hsl()'' and ''lch()'' functions,
 	or the long list of [=named colors=].
 
+<h3 id="color-syntax">The <<color>> syntax</h3>
+
 	Colors are represented as a list of components,
 	also sometimes called “channels”,
 	representing axises in the color space.
@@ -269,6 +271,14 @@ Representing Colors: the <<color>> type</h2>
 		<<lab()>>, <<lch()>>, and
 		<<color()>>.
 
+	Of those, <<hsl()>>, <<hsla()>>, <<hwb()>> and <<lch()>>
+		are cylindrical polar representations,
+		which specify color using a <<hue>> angle,
+		a central axis representing lightness
+		(black-to-white),
+		and a radius representing saturation or chroma
+		(how far the color is from a neutral grey)
+
 	<!--  <<device-cmyk()>> does not actually specify a color; it can't be converted to Lab -->
 
 	For easy reference in other specifications,
@@ -277,6 +287,40 @@ Representing Colors: the <<color>> type</h2>
 	but fully transparent--
 	i.e. <nobr>''rgb(0 0 0 / 0%)''</nobr>.
 
+<h3 id="hue-syntax">The <<hue>> syntax</h3>
+
+Hue is represented as an angle of the color circle
+(the rainbow, twisted around into a circle).
+
+<pre class='prod'>
+	<dfn>&lt;hue></dfn> = <<number>> | <<angle>>
+</pre>
+
+Because this value is so often given in degrees,
+the argument can also be given as a number,
+which is interpreted as a number of degrees.
+
+The angles and spacing
+corresponding to particular hues
+depend on the colorspace.
+For example, in HSL and HWB, which use the sRGB colorspace,
+sRGB green is 120 degrees.
+In LCH, sRGB green is 134.39 degrees,
+display-p3 green is 136.01 degrees,
+a98-rgb green is 145.97 degrees
+and prophoto-rgb green is 141.04 degrees
+(because these are all different shades of green).
+
+For colors very close to the neutral axis,
+the hue angle becomes indeterminate
+(for example, in Lab,
+minute changes in near-zero a and b values
+give huge changes in LCH hue angle).
+<span id="NaN-hue">Therefore, sometimes a hue angle of Nan
+(not a number) may be returned.</span>
+This impacts, for example,
+<a href="https://drafts.csswg.org/css-color-5/#hue-interpolation">hue interpolation</a>.
+
 <h3 id="notes">
 Accessibility and Conveying Information By Color</h3>
 
@@ -1068,20 +1112,15 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 
 	<pre class='prod'>
 	<dfn>hsl()</dfn> = hsl( <<hue>> <<percentage>> <<percentage>> [ / <<alpha-value>> ]? )
-	<dfn>&lt;hue></dfn> = <<number>> | <<angle>>
 	</pre>
 
-	The first argument specifies the hue.
-	Hue is represented as an angle of the color circle
-	(the rainbow, twisted around into a circle).
-	The angle ''0deg'' represents red
+	The first argument specifies the hue angle.
+
+	In HSL (and HWB) the angle ''0deg'' represents sRGB primary red
 	(as does ''360deg'', ''720deg'', etc.),
 	and the rest of the hues are spread around the circle,
-	so ''120deg'' represents green,
-	''240deg'' represents blue, etc.
-	Because this value is so often given in degrees,
-	the argument can also be given as a number,
-	which is interpreted as a number of degrees.
+	so ''120deg'' represents sRGB primary green,
+	''240deg'' represents sRGB primary blue, etc.
 
 	The next two arguments are the saturation and lightness, respectively.
 	For saturation, ''100%'' is a fully-saturated, bright color,