[css-color-4] Correct HSL & HWB code, fix w3c#6570

Author: svgeesus

css-color-4/Overview.bs

@@ -2314,36 +2314,23 @@ Converting HSL colors to sRGB colors</h3>
 
 	Converting an HSL color to sRGB is straightforward mathematically.
 	Here's a simple implementation of the conversion algorithm in JavaScript.
-	For simplicity, this algorithm assumes that the hue has been normalized to
-	a number in the half-open range [0, 6),
-	and the saturation and lightness have been normalized to the range [0, 1].
 	It returns an array of three numbers
 	representing the red, green, and blue channels of the colors,
 	normalized to the range [0, 1].
 
-	<pre class='lang-javascript'>
-	function hslToRgb(hue, sat, light) {
-		if( light &lt;= .5 ) {
-			var t2 = light * (sat + 1);
-		} else {
-			var t2 = light + sat - (light * sat);
-		}
-		var t1 = light * 2 - t2;
-		var r = hueToRgb(t1, t2, hue + 2);
-		var g = hueToRgb(t1, t2, hue);
-		var b = hueToRgb(t1, t2, hue - 2);
-		return [r,g,b];
-	}
+	<pre class="include-code lang-javascript">
+		path: hslToRgb.js
+		highlight: js
+	</pre>
 
-	function hueToRgb(t1, t2, hue) {
-		if(hue &lt; 0) hue += 6;
-		if(hue >= 6) hue -= 6;
+<h3 id='rgb-to-hsl'>
+Converting sRGB colors to HSL colors</h3>
 
-		if(hue &lt; 1) return (t2 - t1) * hue + t1;
-		else if(hue &lt; 3) return t2;
-		else if(hue &lt; 4) return (t2 - t1) * (4 - hue) + t1;
-		else return t1;
-	}
+	Conversion in the reverse direction proceeds similarly.
+
+	<pre class="include-code lang-javascript">
+		path: rgbToHsl.js
+		highlight: js
 	</pre>
 
 <h3 id='hsl-examples'>
@@ -2709,35 +2696,19 @@ Converting HWB colors to sRGB colors</h3>
 	first normalizes the white and black components,
 	so their sum is no larger than 100%.
 
-	<pre class="lang-javascript">
-	white /= 100;
-	black /= 100;
-	if (white + black >= 1) {
-		var gray = white / (white + black);
-		return [gray, gray, gray];
-	  }
-	function hwbToRgb(hue, white, black) {
-		var rgb = hslToRgb(hue, 1, .5);
-		for(var i = 0; i &lt; 3; i++) {
-			rgb[i] *= (1 - white - black);
-			rgb[i] += white;
-		}
-		return rgb;
-	}
+	<pre class="include-code lang-javascript">
+		path: hwbToRgb.js
+		highlight: js
 	</pre>
 
 <h3 id="rgb-to-hwb">Converting sRGB colors to HWB colors</h3>
 
 	Conversion in the reverse direction proceeds similarly.
 
-<pre class="lang-javascript">
-	function rgbToHwb(red, green, blue) {
-		var hsl = rgbToHsl(rgb);
-		var white = Math.min(...rgb);
-		var black = 1 - Math.max(...rgb);
-		return([hsl[0], white*100, black*100]);
-	}
-</pre>
+	<pre class="include-code lang-javascript">
+		path: rgbToHwb.js
+		highlight: js
+	</pre>
 
 <h3 id='hwb-examples'>
 Examples of HWB Colors</h3>

css-color-4/hslToRgb.js

@@ -0,0 +1,18 @@
+function hslToRgb (hue, sat, light) {
+    hue = hue % 360;
+
+    if (hue < 0) {
+        hue += 360;
+    }
+
+    sat /= 100;
+    light /= 100;
+
+    function f(n) {
+        let k = (n + hue/30) % 12;
+        let a = sat * Math.min(light, 1 - light);
+        return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    }
+
+    return [f(0), f(8), f(4)];
+}

css-color-4/hwbToRgb.js

@@ -0,0 +1,14 @@
+function hwbToRgb(hue, white, black) {
+    white /= 100;
+    black /= 100;
+    if (white + black >= 1) {
+        let gray = white / (white + black);
+    return [gray, gray, gray];
+    }
+    let rgb = hslToRgb(hue, 100, 50);
+    for (let i = 0; i < 3; i++) {
+        rgb[i] *= (1 - white - black);
+        rgb[i] += white;
+    }
+    return rgb;
+}

css-color-4/rgbToHsl.js

@@ -0,0 +1,22 @@
+function rgbToHsl (red, green, blue) {
+    let max = Math.max(red, green, blue);
+    let min = Math.min(red, green, blue);
+    let [hue, sat, light] = [NaN, 0, (min + max)/2];
+    let d = max - min;
+
+    if (d !== 0) {
+        sat = (light === 0 || light === 1)
+            ? 0
+            : (max - light) / Math.min(light, 1 - light);
+
+        switch (max) {
+            case red:   hue = (green - blue) / d + (green < blue ? 6 : 0); break;
+            case green: hue = (blue - red) / d + 2; break;
+            case blue:  hue = (red - green) / d + 4;
+        }
+
+        hue = hue * 60;
+    }
+
+    return [hue, sat * 100, light * 100];
+}

css-color-4/rgbToHwb.js

@@ -0,0 +1,6 @@
+function rgbToHwb(red, green, blue) {
+    var hsl = rgbToHsl(red, green, blue);
+    var white = Math.min(red, green, blue);
+    var black = 1 - Math.max(red, green, blue);
+    return([hsl[0], white*100, black*100]);
+}