[css-color-hdr] Added interpolation algorithm, #11616

Author: svgeesus

css-color-hdr-1/Overview.bs

@@ -464,7 +464,7 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
 	each with an associated level of HDR headroom.
 	The actual value is computed by interpolating between these two colors,
 	based on the current amount of HDR headroom,
-	as described in [#headroom-interpolation].
+	as described in [[#headroom-interpolation]].
 
 	<div class="informative">
 	This is a similar mechanism to gain maps, 
@@ -478,7 +478,7 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
 	Its syntax is as follows:
 
 	<pre class='prod'>
-		<dfn>hdr-color()</dfn> = color-hdr([ <<color>> && <<number [1,infinity]>>? ]#{2})
+		<dfn>hdr-color()</dfn> = color-hdr([ <<color>> && <<number [0,infinity]>>? ]#{2})
 	</pre>
 
 	<div class="example" id="ex-hdr-color-simple">
@@ -507,14 +507,23 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
 
 	</div>
 
-<h3 id="#headroom-interpolation">
+<h3 id="headroom-interpolation">
 	Interpolating colors based on headroom
 </h3>
 
 	To interpolate between a color <var>c1</var> at headroom <var>H1</var> 
-	and a color <var>c2</var> at headroom <var>H2</var> 
+	and a color <var>c2</var> at headroom <var>H2</var>,
+	giving result color <var>cxyz</var>,
 	when the target headroom is <var>H</var>:
-	
+
+	1. Let <var>c1xyz</var> be <var>c1</var> converted to D65 CIE XYZ
+	2. Let <var>c2xyz</var> be <var>c2</var> converted to D65 CIE XYZ
+	3. Let <var> w1</var> = clamp((log(<var>H</var>) - log(<var>H2</var>)) / (log(<var>H1</var>) - log(<var>H2</var>)), 0, 1)
+	4. Let <var> w2</var> = clamp((log(<var>H</var>) - log(<var>H1</var>)) / (log(<var>H2</var>) - log(<var>H1</var>)), 0, 1)
+		Note that <var> w2</var> = 1 - <var> w1</var>
+	5. Let <var>eps</var> = 0.001 (one JND in linear-light space)
+	6. Let <var>cxyz</var> = pow(<var>c1xyz</var> + <var>eps</var>, <var>w1</var>) * pow(<var>c2xyz</var> + <var>eps</var>, <var>w2</var>) - <var>eps</var>
+
 
 <h2 id="color-function">
 	Specifying Predefined and Custom Color Spaces: the ''color()'' Function