[css-color-hdr] Added sample code for hdr-color()

Author: svgeesus

css-color-hdr-1/Overview.bs

@@ -1536,7 +1536,14 @@ The end result is identical, this just takes fewer steps.
 	highlight: js
 </pre>
 
+<h3 id="hdr-color-code">
+	Sample code for ''hdr-color()''
+</h3>
 
+<pre class="include-code lang-javascript">
+	path: colorHdrInterpolate.js
+	highlight: js
+</pre>
 
 
 <!--
@@ -1833,6 +1840,7 @@ in a user stylesheet.
 
 <ul>
 	<!-- to 18 July 2025 -->
+	<li>Added sample code for hdr-color()</li>
 	<li>Explained where the eps factor comes from, and what it is for 
 		(<a href="https://github.com/w3c/csswg-drafts/issues/11788">#11788</a>)</li>
 	<li>Added second color-hdr() worked example</li>

css-color-hdr-1/colorHdrInterpolate.js

@@ -0,0 +1,18 @@
+function hdrColor(col1, H1, col2, H2, H) {
+
+    // col1, col2 are arrays representing two colors, in Absolute XYZ
+    // H1 and H2 are the headroom for each color (in stops, ie log scale, 0 = SDR)
+    // H is available headroom
+
+    // first check the headrooms are distinct
+    if (H1 == H2) return 0;
+
+    let w1 = clamp((H - H2) / (H1 - H2), 0, 1);
+    let w2 = clamp((H - H1) / (H2 - H1), 0, 1);
+    let eps = 0.001;
+    let cxyz = Array(3);
+    for (let i=0; i<3; i++) {
+        cxyz[i] = Math.pow(c1xyz[i] + eps, w1) * Math.pow(c2xyz[i] + eps, w2) - eps;
+    }
+    return cxyz;
+}

css-color-hdr-1/workings/hdr-color.js

@@ -3,7 +3,7 @@ let Color = await import("https://colorjs.io/dist/color.js").then(m => m.default
 const clamp = (n, min, max) =>
   Math.min(Math.max(n, min), max)
 
-function colorHdr(col1, H1, col2, H2, H) {
+function hdrColor (col1, H1, col2, H2, H) {
 
     // https://drafts.csswg.org/css-color-hdr/#headroom-interpolation
     // col1, col2 are colors
@@ -33,5 +33,5 @@ let c2 = new Color("color(rec2100-pq 0.8 0.8 0.8)");
 let h1 = 0;
 let h2 = 2;
 let h = 1;
-let result=colorHdr(c1, h1, c2, h2, h);
+let result=hdrColor(c1, h1, c2, h2, h);
 console.log(result.coords);