[css-color-4] Define epsilon for returning missing hue, #11706

Author: svgeesus

css-color-4/Overview.bs

@@ -1193,18 +1193,19 @@ will have a [=powerless=] hue component.
 	If a [=powerless component=] is manually specified,
 	it acts as normal;
 	the fact that it's [=powerless=] has no effect.
+	
 	However, if a color is automatically produced by color space conversion,
 	then any [=powerless components=] in the result must instead be set to [=missing=],
 	instead of whatever value was produced by the conversion process.
 
-	User agents <em>may</em> treat a component as [=powerless=]
-	if the color is "sufficiently close" to the precise conditions specified.
-	For example, a gray color converted into ''lch()'' may,
+	When performing color space conversion to a [=cylindrical polar color=] space,
+	user agents <em>shall</em> treat a hue component as [=powerless=]
+	if the chroma (or other measure of colorfulness, such as saturation in ''hsl'')
+	is less than the epsilon (ε) specified for that color space.
+	For example, a gray color converted into ''oklch()'' may,
 	due to numerical errors,
 	have an <em>extremely small</em> chroma rather than precisely ''0%'';
-	this can, at the user agent's discretion,
-	still treat the hue component as [=powerless=].
-	It is intentionally unspecified exactly what "sufficiently close" means for this purpose.
+	as a result, the hue component is [=powerless=].
 
 <h3 id=parse-color>
 Parsing a <<color>> Value</h3>
@@ -2169,6 +2170,10 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 				for S and L: 0% = 0.0, 100% = 100.0
 			</td>
 		</tr>
+		<tr>
+			<th>Powerless hue ε</th>
+			<td>S &lt;= 0.001</td>
+		</tr>
 	</table>
 
 	<wpt>
@@ -2706,6 +2711,10 @@ HWB Colors: ''hwb()'' function</h2>
 				for W and B: 0% = 0.0, 100% = 100.0
 			</td>
 		</tr>
+		<tr>
+			<th>Powerless hue ε</th>
+			<td>W + B >= 99.999</td>
+		</tr>
 	</table>
 
 	The first argument specifies the hue,
@@ -3407,6 +3416,10 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
 				for C: 0% = 0, 100% = 150
 			</td>
 		</tr>
+		<tr>
+			<th>Powerless hue ε</th>
+			<td>C &lt;= 0.0015</td>
+		</tr>
 	</table>
 
 	<wpt>
@@ -3576,6 +3589,10 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
 					for C: 0% = 0.0 100% = 0.4
 				</td>
 			</tr>
+			<tr>
+				<th>Powerless hue ε</th>
+				<td>C &lt;= 0.000004</td>
+			</tr>
 		</table>
 
 		<wpt>
@@ -3653,8 +3670,8 @@ Converting Lab or Oklab colors to LCH or OKLCh colors</h3>
 	Conversion to the polar form is trivial:
 
 	<ol>
-		<li>H = atan2(b, a)
 		<li>C = sqrt(a^2 + b^2)
+		<li>if (C > epsilon) H = atan2(b, a) else H is missing
 		<li>L is the same
 	</ol>
 

css-color-4/better-rgbToHsl.js

@@ -9,6 +9,7 @@ function rgbToHsl (red, green, blue) {
     let min = Math.min(red, green, blue);
     let [hue, sat, light] = [NaN, 0, (min + max)/2];
     let d = max - min;
+    let epsilon = 1 / 100000;   // max Sat is 1, in this code
 
     if (d !== 0) {
         sat = (light === 0 || light === 1)
@@ -36,5 +37,9 @@ function rgbToHsl (red, green, blue) {
         hue -= 360;
     }
 
+    if (sat <= epsilon) {
+        hue = NaN;
+    }
+
     return [hue, sat * 100, light * 100];
 }

css-color-4/conversions.js

@@ -374,12 +374,19 @@ function Lab_to_XYZ(Lab) {
 }
 
 function Lab_to_LCH(Lab) {
-	// Convert to polar form
+	var epsilon = 0.0015;
+	var chroma = Math.sqrt(Math.pow(Lab[1], 2) + Math.pow(Lab[2], 2)); // Chroma
 	var hue = Math.atan2(Lab[2], Lab[1]) * 180 / Math.PI;
+	if (hue < 0) {
+		hue = hue + 360;
+	}
+	if (chroma <= epsilon) {
+		hue = NaN;
+	}
 	return [
 		Lab[0], // L is still L
-		Math.sqrt(Math.pow(Lab[1], 2) + Math.pow(Lab[2], 2)), // Chroma
-		hue >= 0 ? hue : hue + 360 // Hue, in degrees [0 to 360)
+		chroma, // Chroma
+		hue // Hue, in degrees [0 to 360)
 	];
 }
 
@@ -439,11 +446,19 @@ function OKLab_to_XYZ(OKLab) {
 }
 
 function OKLab_to_OKLCH(OKLab) {
+	var epsilon = 0.000004;
 	var hue = Math.atan2(OKLab[2], OKLab[1]) * 180 / Math.PI;
+	var chroma = Math.sqrt(OKLab[1] ** 2 + OKLab[2] ** 2);
+	if (hue < 0) {
+		hue = hue + 360;
+	}
+	if (chroma <= epsilon) {
+		hue = NaN;
+	}
 	return [
 		OKLab[0], // L is still L
-		Math.sqrt(OKLab[1] ** 2 + OKLab[2] ** 2), // Chroma
-		hue >= 0 ? hue : hue + 360 // Hue, in degrees [0 to 360)
+		chroma,
+		hue
 	];
 }
 

css-color-4/rgbToHsl.js

@@ -9,6 +9,7 @@ function rgbToHsl (red, green, blue) {
     let min = Math.min(red, green, blue);
     let [hue, sat, light] = [NaN, 0, (min + max)/2];
     let d = max - min;
+    let epsilon = 1 / 100000;   // max Sat is 1, in this code
 
     if (d !== 0) {
         sat = (light === 0 || light === 1)
@@ -21,7 +22,11 @@ function rgbToHsl (red, green, blue) {
             case blue:  hue = (red - green) / d + 4;
         }
 
-        hue = hue * 60;
+        hue = hue * 60; // degrees
+    }
+
+    if (sat <= epsilon) {
+        hue = NaN;
     }
 
     return [hue, sat * 100, light * 100];

css-color-4/rgbToHwb.js

@@ -36,8 +36,12 @@ function rgbToHue(red, green, blue) {
  * @return {number[]} Array of HWB values: Hue as degrees 0..360, Whiteness and Blackness in reference range [0,100]
  */
 function rgbToHwb(red, green, blue) {
+    let epsilon = 1 / 100000;  // account for multiply by 100
     var hue = rgbToHue(red, green, blue);
     var white = Math.min(red, green, blue);
     var black = 1 - Math.max(red, green, blue);
+    if (white + black >= 1 - epsilon) {
+        hue = NaN;
+    }
     return([hue, white*100, black*100]);
 }