[css-color-5] rgb and hsl examples

Author: svgeesus

css-color-4/utilities.js

@@ -97,4 +97,34 @@ function LCH_to_r2020(LCH) {
     // so check for that :)
 
     return gam_2020(XYZ_to_lin_2020(D50_to_D65(Lab_to_XYZ(LCH_to_Lab(LCH)))));
-}
+}
+
+// this is straight from the CSS Color 4 spec
+
+function hslToRgb(hue, sat, light) {
+    // 	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]
+    if( light <= .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];
+  }
+
+  function hueToRgb(t1, t2, hue) {
+    if(hue < 0) hue += 6;
+    if(hue >= 6) hue -= 6;
+
+    if(hue < 1) return (t2 - t1) * hue + t1;
+    else if(hue < 3) return t2;
+    else if(hue < 4) return (t2 - t1) * (4 - hue) + t1;
+    else return t1;
+  }

css-color-5/Overview.bs

@@ -371,6 +371,16 @@ When an origin color is present, the following keywords can also be used in this
 - 'b' is a <<percentage>> that corresponds to the origin color's blue channel after its conversion to sRGB
 - 'alpha' is a <<percentage>> that corresponds to the origin color's alpha transparency
 
+<div class="example">
+	To manipulate color channels in the sRGB colorspace:
+
+	<pre>
+		rgb(from <span class="swatch" style="--color: indianred"></span> indianred, 255 g b)
+	</pre>
+
+	This takes the sRGB value of indianred (205 92 92) and replaces the red channel with 255 to give <span class="swatch" style="--color: rgb(255 92 92)"></span>  rgb(255 92 92).
+</div>
+
 <h4 id="relative-HSL">Relative HSL colors</h4>
 
 The grammar of the ''hsl()'' function is extended as follows:
@@ -387,6 +397,15 @@ When an origin color is present, the following keywords can also be used in this
 - 'l' is a <<percentage>> that corresponds to the origin color's HSL lightness after its conversion to sRGB
 - 'alpha' is a <<percentage>> that corresponds to the origin color's alpha transparency
 
+<div class="example">
+	This adds 180 degrees to the hue angle, giving a complementary color.
+	<pre>
+		--accent: <span class="swatch" style="--color: lightseagreen"></span> lightseagreen;
+		--complement:  <span class="swatch" style="--color: hsl(357deg 70% 41%)"></span> hsl(from var(--accent), calc(h+180) s l);
+	</pre>
+	lightseagreen is hsl(177deg 70% 41%), so --complement is <span class="swatch" style="--color: hsl(357deg 70% 41%)"></span> hsl(357deg 70% 41%)
+</div>
+
 <h4 id="relative-HWB">Relative HWB colors</h4>
 
 The grammar of the ''hwb()'' function is extended as follows: