
<pre class='metadata'>
Title: CSS Color HDR Module Level 1
Shortname: css-color-hdr
Level: 1
Status: ED
Prepare for TR: no
Group: csswg
TR: https://www.w3.org/TR/css-color-hdr-1/
ED: https://drafts.csswg.org/css-color-hdr-1/
Work Status: exploring
Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
Abstract: This module defines additions to CSS Color 4 and 5 to enable High Dynamic Range (HDR).
WPT Path Prefix: css/css-color-hdr/
WPT Display: open
</pre>

<pre class="link-defaults">
	spec:css-cascade-5; type:dfn; text:computed value
	spec:css-color-4; type:dfn; text:color space
	spec:css-color-4; type:dfn; text:gamut
	spec:css-color-4; type:dfn; text:rectangular orthogonal color
	spec:css-color-4; type:dfn; text:cylindrical polar color
	spec:css-color-4; type:value; text:none
	spec:css-color-4; type:value; text:srgb
	spec:css-color-4; type:dfn; text:modern color syntax
	spec:css-color-4; type:value; text:alpha-value
	spec:css-color-5; type:type; text:<color>
	spec:css-color-5; type:dfn; text:component keywords
	spec:css-color-5; type:dfn; text:origin color
	spec:css-color-5; type:dfn; text:required conversion
	spec:css-color-5; type:function; text:color()
	spec:css-color-adjust-1; type:value; text:light
	spec:css-color-adjust-1; type:value; text:dark
	spec:css-color-4; type:value; text:rec2020
	spec:css-color-4; type:dfn; text:D65
	</pre>

<pre class=biblio>
	{
   "ARIB_STD-B67":{
      "href":"https://www.arib.or.jp/english/html/overview/doc/2-STD-B67v1_0.pdf",
      "title":"Essential Parameter Values for the Extended Image Dynamic Range Television (EIDRTV) System for Programme Production",
      "publisher":"ARIB",
      "date":"3 July 2015"
   },
   "DisplayHDR":{
      "title":"Summary of DisplayHDR Specs under CTS 1.2",
      "href":"https://displayhdr.org/performance-criteria/",
      "publisher":"VESA",
      "date":"17 May 2024"
   },
   "Development_ITP":{
      "authors":[
         "F.Ebner",
         "M.D.Fairchild"
      ],
      "title":"Development and testing of a color space (IPT) with improved hue uniformity. In: Proceedings of The Sixth Color Imaging Conference, 8-13, 1998",
      "date":"January 1998",
      "href":"https://www.researchgate.net/publication/221677980_Development_and_Testing_of_a_Color_Space_IPT_with_Improved_Hue_Uniformity"
   },
   "ISO_21496-1":{
      "title":"Gain map metadata for image conversion: Part 1: Dynamic Range Conversion",
      "href":"https://www.iso.org/standard/86775.html",
      "publisher":"ISO"
   },
   "Perrin":{
      "authors":[
         "Perrin, A-F.",
         "Rerabek, M.",
         "Husak, W.",
         "Ebrahimi, T."
      ],
      "href":"https://ieeexplore.ieee.org/document/8333011",
      "title":"ICtCp Versus Y'CbCr: Evaluation of ICtCp Color Space and an Adaptive Reshaper for HDR and WCG",
      "publisher":"IEEE Consumer Electronics Magazine",
      "date":"May 2018"
   },
   "Rec_BT.814":{
      "title":"Specifications of PLUGE test signals and alignment procedures for setting of brightness and contrast of displays",
      "href":"https://www.itu.int/dms_pubrec/itu-r/rec/bt/R-REC-BT.814-4-201807-I!!PDF-E.pdf",
      "publisher":"ITU",
      "date":"July 2018"
   },
   "Rec_BT.2100":{
      "title":"ITU-R BT.2100-3 Image parameter values for high dynamic range television for use in production and international programme exchange",
      "href":"https://www.itu.int/rec/recommendation.asp?lang=en&parent=R-REC-BT.2100-3-202502-I",
      "publisher":"ITU",
      "date":"February 2025"
   },
   "Rec_BT.2124":{
      "title":"ITU-R BT.2124-0 Objective metric for the assessment of the potential visibility of colour differences in television",
      "href":"https://www.itu.int/dms_pubrec/itu-r/rec/bt/R-REC-BT.2124-0-201901-I!!PDF-E.pdf",
      "publisher":"ITU",
      "date":"January 2019"
   },
   "Rec_BT.2390":{
      "title":"High dynamic range television for production and international programme exchange",
      "publisher":"ITU",
      "date":"March 2025",
      "href":"https://www.itu.int/pub/R-REP-BT.2390-12-2025"
   },
   "Rpt_BT.2408-9":{
      "title":"Guidelines for operational practices in high dynamic range television production",
      "publisher":"ITU",
      "date":"March 2026",
      "href":"https://www.itu.int/pub/R-REP-BT.2408-9-2026"
   },
   "Safdar-PUCS":{
      "authors":[
         "Safdar, Muhammad",
         "Ciu, Guihua",
         "Kim, Youn Jin",
         "Luo, Ming Ronnier"
      ],
      "href":"https://opg.optica.org/oe/fulltext.cfm?uri=oe-25-13-15131&id=368272",
      "title":"Perceptually uniform color space for image signals including high dynamic range and wide gamut",
      "publisher":"Optics Express, vol 24 no 13 pp. 15131-15151",
      "date":"26 June 2017"
   },
   "SMPTE-ST-2084":{
      "href":"https://pub.smpte.org/latest/st2084/st2084-2014.pdf",
      "title":"ST 2084:2014 - SMPTE Standard - High Dynamic Range Electro-Optical Transfer Function of Mastering Reference Displays",
      "publisher":"SMPTE",
      "date":"29 August 2014",
      "abstract":"This standard specifies an EOTF characterizing high-dynamic-range reference displays used primarily for mastering non-broadcast content. This standard also specifies an Inverse-EOTF derived from the EOTF.",
      "isbn":"978-1-61482-829-7"
   },
   "SMPTE-ST-2094-50":{
      "href":"https://github.com/SMPTE/st2094-50",
      "title":"Dynamic Metadata for Color Volume Transform - Application #5 (Broadcast)",
      "publisher":"SMPTE",
      "date":"2025"
   },
   "What_is_ICtCp":{
      "href":"https://professional.dolby.com/siteassets/pdfs/ictcp_dolbywhitepaper_v071.pdf",
      "title":"What is ICtCp, v7.1",
      "publisher":"Dolby"
   }
}
</pre>
<link rel="stylesheet" href="style.css" />

Introduction {#intro}
=====================

	<em>This section is not normative.</em>

	CSS Color 4 adds Wide Color Gamut (WCG) color spaces to the Open Web Platform.
	By design, these are all Standard Dynamic Range (SDR) color spaces.
	This specification defines additions
	to support High Dynamic Range (HDR).

	<figure id="fig-eotf">
		<p><img src="./images/lin-srgb-hlg-pq.png" alt="" width="839"></p>
		<!-- alt text would be identical to figure caption -->
		<figcaption>
			The Electro-Optical Transfer Functions (EOTF)
			of four color spaces: 
			extended sRGB and linear-light sRGB
			(as defined in CSS Color 4) and
			the Perceptual Quantizer (PQ) and Hybrid Log-Gamma (HLG)
			as defined in this specification, from [[Rec_BT.2100]].
		</figcaption>
	</figure>

	While WCG specifications have been broadly stable for some decades,
	HDR standards are less mature
	and have undergone frequent revision in the last decade.

Value Definitions {#values}
---------------------------

	This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
	using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
	Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
	Combination with other CSS modules may expand the definitions of these value types.

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> as their property value.
	For readability they have not been repeated explicitly.

<!-- Big Text:  terms 

█████▌ █████▌ ████▌  █     █  ███▌ 
  █▌   █▌     █▌  █▌ ██   ██ █▌  █▌
  █▌   █▌     █▌  █▌ █▌█ █▐█ █▌    
  █▌   ████   ████▌  █▌ █ ▐█  ███▌ 
  █▌   █▌     █▌▐█   █▌   ▐█     █▌
  █▌   █▌     █▌ ▐█  █▌   ▐█ █▌  █▌
  █▌   █████▌ █▌  █▌ █▌   ▐█  ███▌ 
-->

HDR Terminology {#terminology}
==========================

Defining Dynamic Range {#defining-dynamic-range}
------------------------------------------------

<dfn export>Peak luminance</dfn> is the [=luminance=]
of the brightest white that can be displayed.
It is a linear-light quantity,
measured in cd/m<sup>2</sup>, also called <em>nits</em>.

<dfn export>Deepest black</dfn>  is the [=luminance=]
of the darkest black that can be displayed.
It is affected by viewing flare
(ambient light reflected off the screen),
and so the actual value depends on the viewing conditions.

<dfn export>Linear dynamic range</dfn> is the [=luminance=] ratio
between the <em>lightest</em> and the <em>darkest</em> colors
that can be displayed.

<dfn export>Dynamic range</dfn> is the base-2 logarithm of [=linear dynamic range=],
because our eyes percieve brightness on a logarithmic scale.
Dynamic range is measured in photographic <em>stops</em>.
One stop is a doubling of luminance.

<xmp class="lang-js" id="dynamic-range-function">
	function DynamicRange (peak, deepest) {
		return Math.log2(peak) - Math.log2(deepest);
	  } 
</xmp>

<dfn export>HDR Reference White</dfn>,
also called media white or diffuse white,
is defined in [[Rpt_BT.2408-9]] section 2.1,
with a standard value of 203 cd/m<sup>2</sup>.
It is the color of a normal white background, 
or of white text on a dark background.
It can be comfortably viewed, over the whole screen.

In <dfn export>Standard Dynamic Range</dfn> (SDR),
HDR Reference White is also
lightest possible color,
produced by full-intensity red, green, and blue.

<div class="example" id="ex-SDR-dynamic-range">
	For example, in [=sRGB=], 
	under standard viewing conditions,
	white is defined to have a luminance of 80 cd/m²
	while black is defined to have a luminance of 0.2 cd/m².
	Thus, the dynamic range is 8.6 stops.
</div>

It is common to adjust the overall brighness of the screen
to acommodate user preference or viewing conditions 
which are different to the standard ones.

For SDR, making the screen brighter does not change the dynamic range,
because the darkest color also gets brighter.

<div class="example" id="ex-SDR-brighter-dynamic-range">
	For example, an [=sRGB=] screen, 
	might be set so that white has a luminance of 160 cd/m²
	so the deepest black now has a luminance of 0.4 cd/m².
	The dynamic range is still 8.6 stops.
</div>

In <dfn export>High Dynamic Range</dfn> (HDR),
brighter colors than [=HDR Reference White=] can be displayed.
For example, if HDR Reference White on an HDR display is set to 203 cd/m²
it might be possible to display small highlights at 1000 cd/m².
Typically, the brightest colors can only be displayed
on a small part of the display,
and for a limited time.
This is because of energy usage and heating considerations.

<div class="example" id="ex-HDR-dynamic-range">
	For example, on an HDR reference mastering display, 
	the small-area peak white might have a luminance of 1000 cd/m²
	while the deepest black has a luminance of 0.05 cd/m².
	Thus, the dynamic range is 14.3 stops.
</div>

For HDR, using a brighter screen increases the dynamic range,
while the luminance of HDR Reference White remains constant.

<div class="example" id="ex-HDR-PQ-dynamic-range">
	For example, using the ''rec2100-pq'' colorspace 
	defined in [[Rec_BT.2100]], 
	the brightest peak white is defined to have a luminance of 10,000 cd/m²
	while the deepest black has a luminance of 0.001 cd/m².
	Thus, the encoded dynamic range is 23.3 stops.
</div>

Issue: add a diagram showing SDR and HDR dynamic ranges on a log scale

When [[#Compositing-SDR-HDR]], 
and for color space conversion,
the HDR Reference White for SDR content
should be anchored at <strong>203 cd/m²</strong> [[!Rpt_BT.2408-9]]
so that that the HDR Reference White level 
of the inputs to compositing
will end up at the HDR Reference White level 
of the combined signal.

When displaying HDR (or mixed SDR and HDR) content,
for displays which are less capable than the reference mastering display,
and for viewing conditions different to the standard ones,
a <dfn export>color re-rendering</dfn> step ((OOTF) will be performed.
This may result in a HDR Reference White being displayed
at a value lower or higher than 203 cd/m².

<!-- Big Text:  headroom 

█▌  █▌ █████▌  ███▌  ████▌  ████▌   ███▌   ███▌  █     █
█▌  █▌ █▌     ▐█ ▐█  █▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ ██   ██
█▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌█ █▐█
█████▌ ████   █▌  █▌ █▌  █▌ ████▌  █▌  █▌ █▌  █▌ █▌ █ ▐█
█▌  █▌ █▌     █████▌ █▌  █▌ █▌▐█   █▌  █▌ █▌  █▌ █▌   ▐█
█▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌ ▐█  █▌  █▌ █▌  █▌ █▌   ▐█
█▌  █▌ █████▌ █▌  █▌ ████▌  █▌  █▌  ███▌   ███▌  █▌   ▐█
-->

Introducing Headroom {#introducing-headroom}
--------------------------------------------

	The [=peak luminance=] level 
	which an HDR display can produce 
	varies greatly.

	The amount by which peak luminance is greater than [=HDR Reference White=]
	is termed the <dfn export>linear HDR headroom</dfn>,
	and the value depends on the level of HDR Reference White,
	user preference,
	and viewing conditions.

	<div class="example" id="ex-linear-headroom">
		For example, if a display
		displays HDR Reference White at 160 cd/m<sup>2</sup>
		and has a peak luminance of 1000 cd/m<sup>2</sup>
		then it has a [=linear HDR headroom=]
		of 1000 / 160 = 6.25 times.
	</div>

	<dfn export>HDR headroom</dfn> is the base 2 logarithm of [=linear HDR headroom=],
	and like dynamic range
	it is expressed in photographic <strong>stops</strong>.

	<xmp class="lang-js" id="headroom-function">
	function Headroom (peak, reference) {
		return Math.log2(peak) - Math.log2(reference);
	  } 
	</xmp>

	<div class="example" id="ex-stops-headroom">
		For example, if a display
		displays HDR Reference White at 160 cd/m<sup>2</sup>
		and has a peak luminance of 1000 cd/m<sup>2</sup>
		then it has an [=HDR headroom=]
		of log<sub>2</sub>(1000) - log<sub>2</sub>(160) = 2.64 stops.
	</div>

	Thus, [=standard dynamic range=] (SDR) 
	by definition has an [=HDR headroom=] of 0 stops,
	because the brightest white is the same as HDR Reference White.

<div class="example" id="ex-low-stops-headroom">
	For example, a low-end HDR display
	(which <em>just</em> meets the requirements of
	<a href="https://displayhdr.org/">DisplayHDR 400</a>, 
	the lowest tier of Vesa Certified DisplayHDR conformance [[DisplayHDR]])
	might display HDR Reference White at 
	up to 200 cd/m<sup>2</sup>
	while the peak white is only
	400 cd/m<sup>2</sup>
	(at the brightest HDR Reference White, only one stop of HDR headroom).
</div>

<div class="example" id="ex-high-stops-headroom">
	For example, a high-end HDR display 
	(which exceeds the requirements of
	<a href="https://displayhdr.org/">DisplayHDR 1400</a>, 
	the current highest tier of Vesa Certified DisplayHDR conformance)
	might display HDR Reference White at 
	up to 400 cd/m<sup>2</sup>
	while it's peak white is
	1600 cd/m<sup>2</sup>.

	In dim viewing conditions,
	with HDR Reference White set to 100 cd/m<sup>2</sup>,
	this gives four stops of HDR headroom
	(16x linear HDR headroom).
</div>

<p id="headroom-privacy">
	The Web platform does not currently
	directly expose the level of headroom of a display,
	because it depends on viewing conditions
	and real-time, unquantized headroom information
	would be a tracking vector
	(for example, detecting that a user moved outside
	and that it is a sunny day).
</p>

<p id="constrained-headroom">
	It is not always desirable 
	to use the maximum available level
	of HDR headroom.
	CSS provides a way to control,
	in broad terms,
	how much headroom is desired;
	and this level can vary by element
	and over time.
</p>

<div class="example" id="ex-photo-grid">
	For example, consider a Web page displaying a grid of photographs.
	Some of these are HDR, including some very high dynamic range images
	such as a shot straight into the sun.
	It would be tiring to view the set of photos together
	at full dynamic range.
	At the same time, 
	squashing everything to the SDR range 
	would not adequately represent
	the character of individual photos.
	The design goal is to show "enough" HDR
	to allow meaningful evaluation of the group of photos.
</div>

Controlling Dynamic Range {#controlling-dynamic-range}
==========================

The 'dynamic-range-limit' property {#the-dynamic-range-limit-property}
-------------------------------
	
	<pre class='propdef'>
		Name: dynamic-range-limit
		Value: standard | no-limit | constrained | <<dynamic-range-limit-mix()>>
		Initial: no-limit
		Applies to: all elements
		Inherited: yes
		Percentages: n/a
		Computed value: see <a href="#computing-dynamic-range-limit">Computed Value for dynamic-range-limit</a>
		Animation type: by ''dynamic-range-limit-mix()'' 
		Canonical order: per grammar
	</pre>

	<wpt>
		computed.html
		inheritance.html
		interpolation.html
		parsing.html 
	</wpt>

	<dl dfn-type="value" dfn-for="dynamic-range-limit">
		<dt><dfn>standard</dfn>
		<dd>
			The highest luminance color
			that is displayed is the same as
			HDR Reference White, i.e. the CSS color ''white''.
		</dd>
		<dt><dfn>no-limit</dfn>
		<dd>
			The highest peak luminance
			that is displayed is much greater than
			HDR Reference White, i.e. the CSS color ''white'';
			the precise level is not specified.
		</dd>
		<dt><dfn>constrained</dfn>
		<dd>
			The highest peak luminance
			that is displayed is somewhat greater than
			HDR Reference White, i.e. the CSS color ''white'',
			such that a mix of SDR and HDR content
			can be comfortably viewed together.
		</dd>	
	</dl>

	<div class="example" id="ex-hdr-limit-photogrid">
		<pre class="lang-css">
			body { dynamic-range-limit: standard; }
			div.photogrid img { dynamic-range-limit: constrained }
		</pre>
	</div>

<!-- Big Text:  d-r-l-m 

████▌        ████▌        █▌          █     █
█▌  █▌       █▌  █▌       █▌          ██   ██
█▌  █▌       █▌  █▌       █▌          █▌█ █▐█
█▌  █▌ ████▌ ████▌  ████▌ █▌    ████▌ █▌ █ ▐█
█▌  █▌       █▌▐█         █▌          █▌   ▐█
█▌  █▌       █▌ ▐█        █▌          █▌   ▐█
████▌        █▌  █▌       █████       █▌   ▐█
-->

Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynamic-range-limit-mix}
--------------------------------------------------------

	This function takes one or more 'dynamic-range-limit' values,
	converts them internally to a value in stops above HDR Reference White,
	and alters the display to the result of mixing them
	by the specified amount.
	For privacy reasons, the actual calculated result is not exposed.


<pre class='prod'>
	<dfn>dynamic-range-limit-mix()</dfn> = dynamic-range-limit-mix( [ <<'dynamic-range-limit'>> && <<percentage [0,100]>> ]#{2,} )
</pre>

<wpt>
	computed.html
	inheritance.html
	interpolation.html
	parsing.html 
</wpt>

<!-- @@ handle the case of percentages summing to zero. Distribute equally?
	https://github.com/w3c/csswg-drafts/issues/11678#issuecomment-2686103826
-->
<h3 id="computing-dynamic-range-limit">
	Computed Value for 'dynamic-range-limit'
</h3>

	If the specified value is ''standard'', ''constrained'', or ''no-limit'', then the computed value is the specified value.

	If the specified value is ''dynamic-range-limit-mix()'', then the computed value is determined by the following algorithm:

	1. Let <var>v1</var>, ..., <var>vN</var> be the computed values for the parameters to be mixed.
	2. Let <var>p1</var>, ..., <var>pN</var> be the mixing percentages, normalized to sum to 100%.
	3. Define the contributing percentages as:
		* Let <var>p1_standard</var>,...,<var>pN_standard</var> be the percentages for ''standard'' in <var>v1</var>,...,<var>vN</var>
		* Let <var>p1_constrained_high</var>,...,<var>pN_constrained_high</var> be the percentages for ''constrained'' in <var>v1</var>,...,<var>vN</var>
		* Let <var>p1_no_limit</var>,...,<var>pN_no_limit</var> be the percentages for ''no-limit'' in <var>v1</var>,...,<var>vN</var>
	4. Compute the weighted sums as:
		* <var>p_standard</var>=(<var>p1_standard</var>*<var>p1</var>+...+<var>pN_standard</var>*<var>pN</var>)/100.
		* <var>p_constrained_high</var>=(<var>p1_constrained_high</var>*<var>p1</var>+...+<var>pN_constrained_high</var>*<var>pN</var>)/100.
		* <var>p_no_limit</var>=(<var>p1_no_limit</var>*<var>p1</var>+...+<var>pN_no_limit</var>*<var>pN</var>)/100.
	5. If <var>p_standard</var>, <var>p_constrained_high</var>, or <var>p_no_limit</var> equals 100%, then the computed value is ''standard'', ''constrained'', or ''no-limit'', respectively.
	6. Otherwise, the computed value is ''dynamic-range-limit-mix()'', with parameters ''standard'', ''constrained'', and ''no-limit'', in that order, and percentages <var>p_standard</var>, <var>p_constrained_high</var>, and <var>p_no_limit</var>, omitting parameters with a percentage equal to 0%. If <em>all</em> parameters are thereby omitted, the computed value is the initial value.

	<wpt>
		computed.html
	</wpt>

	<div class="example" id="ex-hdr-limit-mix">
		The computed value of
	  <pre class="lang-css">
	dynamic-range-limit-mix(
	    high 10%,
	    dynamic-range-limit-mix(standard 25%, constrained 75%) 20%,
	    dynamic-range-limit-mix(constrained 10%, no-limit 30%) 20%)
	</pre>
	is
	  <pre class="lang-css">
	    dynamic-range-limit-mix(standard 10%, constrained 40%, no-limit 50%)
	</pre>
	</div>

<!-- Big Text:  <color> 

   █▌  ███▌   ███▌  █▌     ███▌  ████▌  █▌   
  █▌  █▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌  █▌  █▌  
 █▌   █▌     █▌  █▌ █▌    █▌  █▌ █▌  █▌   █▌ 
█▌    █▌     █▌  █▌ █▌    █▌  █▌ ████▌     █▌
 █▌   █▌     █▌  █▌ █▌    █▌  █▌ █▌▐█     █▌ 
  █▌  █▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌ ▐█   █▌  
   █▌  ███▌   ███▌  █████  ███▌  █▌  █▌ █▌   
-->

<h2 id="color-syntax">The <<color>> syntax</h2>

	This module extends the <<color-function>> type:

	<pre class='prod'>
	<dfn>&lt;color-function></dfn> = <<rgb()>> | <<rgba()>> |
			<<hsl()>> | <<hsla()>> | <<hwb()>> |
			<<lab()>> | <<lch()>> | <<oklab()>> | <<oklch()>> |
			<<ictcp()>> | <<jzazbz()>> | <<jzczhz()>> |
			<<alpha()>> |
			<<color()>> |
			<<hdr-color()>>
	<dfn>ictcp()</dfn> = ictcp([from <<color>>]?
		[<<percentage>> | <<number>> | none]
		[<<percentage>> | <<number>> | none]
		[<<percentage>> | <<number>> | none]
		[ / [<<alpha-value>> | none] ]? )
	<dfn>jzazbz()</dfn> = jzazbz([from <<color>>]?
		[<<percentage>> | <<number>> | none]
		[<<percentage>> | <<number>> | none]
		[<<percentage>> | <<number>> | none]
		[ / [<<alpha-value>> | none] ]? )
	<dfn>jzczhz()</dfn> = jzczhz([from <<color>>]?
		[<<percentage>> | <<number>> | none]
		[<<percentage>> | <<number>> | none]
		[<<hue>> | none]
		[ / [<<alpha-value>> | none] ]? )
	</pre>

<!-- Big Text:  hdr-color() 

█▌  █▌ ████▌  ████▌         ███▌   ███▌  █▌     ███▌  ████▌    ██ ██  
█▌  █▌ █▌  █▌ █▌  █▌       █▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌  █▌  █▌   ▐█ 
█▌  █▌ █▌  █▌ █▌  █▌       █▌     █▌  █▌ █▌    █▌  █▌ █▌  █▌ █▌     ▐█
█████▌ █▌  █▌ ████▌  ████▌ █▌     █▌  █▌ █▌    █▌  █▌ ████▌  █▌     ▐█
█▌  █▌ █▌  █▌ █▌▐█         █▌     █▌  █▌ █▌    █▌  █▌ █▌▐█   █▌     ▐█
█▌  █▌ █▌  █▌ █▌ ▐█        █▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌ ▐█   █▌   ▐█ 
█▌  █▌ ████▌  █▌  █▌        ███▌   ███▌  █████  ███▌  █▌  █▌   ██ ██  
-->

<h2 id="hdr-color-function">HDR colors parameterized by headroom: the ''hdr-color()'' function</h2>

	The ''hdr-color()'' function allows a range of colors to be specified, 
	whose value is automatically calculated based on the [=HDR headroom=].

	It does this by specifying two <<color>> values, 
	each with an associated level of HDR headroom.
	(The two headroom values must not be the same).
	The actual value is computed by interpolating between these two colors,
	based on the current amount of HDR headroom,
	as described in [[#headroom-interpolation]].

	<div class="informative">
	This is a similar mechanism to gain maps, 
	in raster images conforming to [[ISO_21496-1]],
	or to adaptive gain curves,
	in [[SMPTE-ST-2094-50]].
	</div>

	For privacy reasons, the actual calculated color is not exposed, 
	nor is the actual HDR headroom,
	as this is a fingerprinting vector.

	Its syntax is as follows:

	<pre class='prod'>
		<dfn>hdr-color()</dfn> = color-hdr([ <<color>> && <<number [0,infinity]>>? ]#{2})
	</pre>

	<div class="example" id="ex-hdr-color-simple">
	Consider the color:

	<pre class="lang-css">
		color-hdr(
			color(rec2100-linear 0.9 1.0 0.8) 0,
			color(rec2100-linear 1.8 2.0 1.5) 2);
	</pre>

	On a display with [=HDR headroom=] &lt;= 0, 
	in other words, an SDR display,
	this color will display as 
	
	<pre class="lang-css">color(rec2100-linear 0.9 1.0 0.8)</pre>

	On a display with [=HDR headroom=] &gt;= 2, 
	this color will display as 
	
	<pre class="lang-css">color(rec2100-linear 1.8 2.0 1.5) 2);</pre>

	For displays whose headroom lies between 0 and 2, the color is
	interpolated. For <a href="#ex-hdr-interpolate">example</a>, 
	on a display with HDR headroom 1:

	X = 243.664, Y = 275.713, Z = 244.000
	</div>

	Colors are interpolated in <dfn export>Absolute D65 CIE XYZ</dfn>.

	This is derived from ''xyz-d65''
	by multiplying each color component by 203 [[Rpt_BT.2408-9]]
	to convert from relative units (Y of white is 1, regardless of actual brightness)
	to absolute units of cd/m², also called "nits".
	In the <a href="#color-conversion-code">sample code</a>,
	this constant is denoted <var ignore=''>Yw</var>,
	the luminance of HDR Reference White.

	<div class="example" id="ex-rel-to-abs">
		For example, the css color ''white'' is 
		<pre class="lang-css">color(xyz-d65 0.9505 1 1.089)</pre>

		In absolute D65 XYX this is
		[192.9426, 203, 221.0787]
	</div>

<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>,
	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 [=Absolute D65 CIE XYZ=]
	2. Let <var>c2xyz</var> be <var>c2</var> converted to [=Absolute D65 CIE XYZ=]
	3. Let <var> w1</var> = clamp((<var>H</var> - <var>H2</var>) / (<var>H1</var> - <var>H2</var>), 0, 1)
	4. Let <var> w2</var> = clamp((<var>H</var> - <var>H1</var>) / (<var>H2</var> - <var>H1</var>), 0, 1)
		Note that <var> w2</var> = 1 - <var> w1</var>
	5. Let <var>eps</var> = 0.001
	6. Let <var>cxyz</var> = Array(3)
	7. For i from 0 to 2:
		Let <var>cxyz</var>[i] = pow(<var>c1xyz</var>[i] + <var>eps</var>, <var>w1</var> ) * pow(<var>c2xyz</var>[i] + <var>eps</var>, <var>w2</var> ) - <var>eps</var>

	Note: The factor <var>eps</var> is to prevent division by zero,
	and is particularly important when interpolating with SDR colors near to black.

	
	<div class="example" id="ex-hdr-interpolate">
	For example, given c1 = color(rec2100-linear 0.9 1.0 0.8),
	c2 = color(rec2100-linear 1.8 2.0 1.5),
	H1 = 0, H2 = 2, and H = 1:

	<pre  class="lang-css">
	c1xyz = [ 173.156, 195.260, 178.003 ]
	c2xyz = [ 342.883, 389.315, 334.467 ]
	w1 = 0.5
	w2 = 0.5
	cxyz = [ 243.664, 275.713, 244.000 ]
	</pre>
	</div>

	<div class="example" id="ex-hdr-interpolate-2">
		For example, given c1 = color(display-p3 1 1 0.33),
		c2 = jzczhz(70% 0.14 100),
		H1 = 0.5, H2 = 4, and H = 2;

	<pre class="lang-css">
	c1xyz = [ 156.285, 188.337, 28.015 ]
	c2xyz = [ 3776.1434, 4362.407, 1577.913 ]
	w1 = 0.571 
	w2 = 0.429
	cxyz = [ 611.911, 724.180, 157.650 ]
	</pre>

	Note that c1 will be used unmodified at all headroom values &lt;= 0.5,
	and c2 will be used unmodified at all headroom values >= 4.
	</div>

	<div class="example" id="ex-hdr-interpolate-3">
		For example, given c1 = ictcp(50% -0.3 0),
		c2 = ictcp(85% -0.35 0.1),
		H1 = 0, and H2 = 4.
		This would be expressed in CSS as:

		<pre class="lang-css">
			color-hdr(
				var(--c1) 0,
				var(--c2) 4
			)
		</pre>

		If H = 2.3

		<pre class="lang-css">
			c1xyz = [63.6, 96.53, 8.558]
			c2xyz = [2521, 2508, 112.2]
			w1 = 0.425
			w2 = 0.575
			cxyz = [527.68, 628.20, 37.59]
		</pre>

	</div>

<!-- Big Text: ICTCP Jaz 

████  ███▌  █████▌  ███▌  ████▌          █▌  ███▌  █████▌
 ▐▌  █▌  █▌   █▌   █▌  █▌ █▌  █▌         █▌ ▐█ ▐█      ▐▌
 ▐▌  █▌       █▌   █▌     █▌  █▌         █▌ █▌  █▌    ▐▌ 
 ▐▌  █▌       █▌   █▌     ████▌          █▌ █▌  █▌   █▌  
 ▐▌  █▌       █▌   █▌     █▌         █▌  █▌ █████▌  █    
 ▐▌  █▌  █▌   █▌   █▌  █▌ █▌         █▌  █▌ █▌  █▌ █     
████  ███▌    █▌    ███▌  █▌          ███▌  █▌  █▌ █████▌
-->

<h2 id="DI-HDR">
	Device-Independent HDR Colors
</h2>

	In the same way that [[css-color-4#lab-colors]]
	allows specifying device-independent SDR colors,
	this specification allows specifying device-independent HDR colors.

<h3 id="ictcp-intro"  class="informative">
	Introducing ICtCp
</h3>

	<em>This section is not normative.</em>

	The IC<sub>T</sub>C<sub>P</sub> color space 
	has better perceptual uniformity than CIE Lab,
	and is used as a part of the color image pipeline 
	in video and digital photography systems 
	for high dynamic range (HDR) and wide color gamut (WCG) imagery. 

	The T and P subscripts
	refer to the Tritanope (yellowness-blueness) 
	and Protanope (redness-greenness)
	opponent color axes in the human visual system.
	To avoid pesky subscripts,
	the simplification ICtCp is frequently used.
	
	IC<sub>T</sub>C<sub>P</sub> was 
	originaly developed by Dolby Laboratories [[What_is_ICtCp]]
	from the IPT color space by Ebner and Fairchild
	[[Development_ITP]],
	and is defined in [[!Rec_BT.2100]] as the 
	Constant Intensity IC<sub>T</sub>C<sub>P</sub> signal format. 
	It was intended to replace YCbCr [[Perrin]].

	It is based on the human visual system LMS cone primaries;
	the Hunt-Pointer-Estevez (HPE) XYZ to LMS transform
	is used,
	normalized to a [=D65=] whitepoint.
	A 4% crosstalk matrix is then applied  [[What_is_ICtCp]],
	to reduce the gamut hull concavities of BT.2020 RGB,
	thus reducing interpolation errors.
	The crosstalk also provides improved lines of constant hue
	and improved uniformity of Just Noticeable Difference (JND) MacAdam ellipses.

	Unlike ''Lab'', which has primarily been tested with
	lower-intensity <em>reflective</em> colors,
	IC<sub>T</sub>C<sub>P</sub> has been tested with
	high-chroma (wide color gamut),
	self-luminous, and
	high intensity (HDR) colors.
	
	This makes it suitable for HDR color difference measurement 
	<a href="#deltaE">(deltaE ITP)</a>
	and for gamut mapping of mixed  SDR and HDR colors.

	<div class="example" id="ex-DE-ITP">
		For example, BT.2020 and BT.2100 use the same primaries and white point.
		BT.2020 is SDR, while BT.2100 is HDR
		and places HDR Reference White at a code value close to 0.58.

		Here is a very wide gamut primary red in both color spaces:

		<pre class="lang-css">
			color(rec2100-pq 0.58 0 0) /* ictcp(44.6% -0.129 0.399) */
			color(rec2020 1 0 0)       /* ictcp(44.7% -0.130 0.399)  */
		</pre>

		The two colors are clearly very close in ICTCP
		and the deltaE ITP is 0.487,
		meaning the colors are not visually different.

		These colors are very different from sRGB "red":

		<pre class="lang-css">
			color(rec2100-pq 0.58 0 0) /* ictcp(44.6% -0.129 0.399) */
			red                        /* ictcp(42.8% -0.116 0.279) */
		</pre>

		the deltaE ITP is 87.7,
		meaning the colors are very visually different.
	</div>

<h3 id="jaz-intro" class="informative">
	Introducing Jzazbz and JzCzhz
</h3>

	<em>This section is not normative.</em>

	The J<sub>z</sub>a<sub>z</sub>b<sub>z</sub> color space [[!Safdar-PUCS]],
	and its polar form  J<sub>z</sub>C<sub>z</sub>h<sub>z</sub>,
	were designed to be more perceptually uniform 
	for wide gamut colors such as BT.2020, 
	to accurately predict a wide-range of lightness,
	including HDR colors,
	and to have  minimal inter-dependence 
	between the perceptual attributes (lightness, chroma, and hue).
	In particular it has superior hue uniformity,
	compared to CAM16-UCS [[!Safdar-PUCS]].

	CIE Lab uses a lightness scale with a [0%, 100%] range,
	relative to HDR Reference White;
	similarly, Oklab uses a lightness scale with a [0, 1.0] range,
	again with 1.0 referring to HDR Reference White.
	In contrast, the J<sub>z</sub> axis in ''Jzazbz'',
	which has a [0, 1.0] range,
	uses an encoding <em>similar to</em> Perceptual Quantizer,
	and can represent a dynamic range of more than 13 stops.

<dfn export>ICtCp</dfn> {#ICtCp}
-----------------
	
	The ''ICtCp'' color space accepts three numeric parameters,
	with I representing the Intensity
	(similar to L in Lab, but covering a luminance range
	up to 10,000 cd/m<sup>2</sup>)
	while C<sub>T</sub> and C<sub>P</sub> represent the
	yellowness-blueness (tritanope) and
	redness-greenness (protanope)
	opponent-color axes (similar to b and a, respectively, in Lab).

	It has the following characteristics:

	<table>
		<thead><tr><td></td><td>x</td><td>y</td></tr></thead>
		<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
		<tr><th>Transfer function</th><td colspan="2">Perceptual Quantizer</td></tr>
		<tr><th>White luminance</th><td colspan="2">203 cd/m²</td></tr>
		<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
		<tr><th>Black luminance</th><td colspan="2">0.001 cd/m²</td></tr>
		<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
		<tr>
			<th>Percentages</th>
			<td  colspan="2">Allowed for I, Ct and Cp</td>
		</tr>
		<tr>
			<th>Percent reference range</th>
			<td>for I: 0% = 0.0, 100% = 1.0<br>
			for Ct and Cp: -100% = -0.5, 100% = 0.5</td>
		</tr>
	</table>

	Although [[Rec_BT.2100]] defines IC<sub>T</sub>C<sub>P</sub>
	by a conversion from linear-light BT.2100 RGB [[Rec_BT.2100]],
	this conversion proceeds via LMS
	and thus, any other color space can also be represented
	by applying an XYZ to LMS transform
	as shown in [[What_is_ICtCp]].
	The <a href="#ictcp_code">sample code</a> uses this approach.

	<div class="example">
		This color represents the sRGB color "lime" in ''ICtCp''
		<pre>
		<span class="swatch" style="--color: lime"></span> ictcp(0.5393 -0.2643 -0.0625)
		</pre>
	</div>

	<div class="example">
		This color represents a comfortable "diffuse white"
		This color can be displayed for long periods,
		or used for subtitles,
		on any sized area of the screen.
		It is the same color as sRGB ''white''.
		Diffuse white is 203 cd/m²  [[!Rec_BT.2100]].
		<pre>
		<span class="swatch" style="--color: white"></span> ictcp(0.58069 0 0)
		</pre>
	</div>

	Within a [=relative color=] syntax ''ictcp()'' function,
	the allowed [=component keywords=] are:

	* <dfn value for="ictcp()">i</dfn> is a  <<number>>
		that corresponds to the [=origin color's=] I (Lightness)
		after [=required conversion|conversion, if required=], to ictcp.
		1.0 is equivalent to 100%.
	* <dfn value for="ictcp()">ct</dfn> and <dfn value for="ictcp()">cp</dfn> are <<number>>s
		that correspond to the [=origin color's=] ct and cp axes
		after [=required conversion|conversion, if required=], to ictcp.
		0.5 is equivalent to 100%, while -0.5 is equivalent to -100%.
	* <dfn value for="ictcp()">alpha</dfn> is a <<number>> that corresponds to the
		[=origin color's=] alpha transparency. 1.0 is equivalent to 100%.

	<dfn export>Jzazbz</dfn> {#Jzazbz}
	-----------------

		The ''Jzazbz'' color space accepts three numeric parameters,
		with J<sub>z</sub> representing the Lightness (similar to L in Lab)
		while a<sub>z</sub> and b<sub>z</sub> represent the
		redness-greenness and yellowness-blueness
		opponent-color axes (similar to a and b in Lab).
	
		''Jzazbz'' has the following characteristics:
	
		<table>
			<thead><tr><td></td><td>x</td><td>y</td></tr></thead>
			<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
			<tr><th>Transfer function</th><td colspan="2">Perceptual Quantizer</td></tr>
			<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
			<tr><th>Black luminance</th><td colspan="2">0.001 cd/m²</td></tr>
			<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
			<tr>
				<th>Percentages</th>
				<td  colspan="2">Allowed for Jz, az and bz</td>
			</tr>
			<tr>
				<th>Percent reference range</th>
				<td>for Jz: 0% = 0.0, 100% = 1.0<br>
				for az and bz: -100% = -0.21, 100% = 0.21</td>
			</tr>
		</table>
	
		Note that unlike Lab, a [=D65=] whitepoint is used.
		Thus, for most RGB spaces
		(which also use a D65 whitepoint)
		no chromatic adaptation step need be performed.

		<a href="#jzazbz_code">Sample code</a> 
		for converting between XYZ-D65 and ''Jzazbz'' 
		is provided.
	
		<div class="example">
			This color represents a comfortable "diffuse white"
			This color can be displayed for long periods,
			or used for subtitles,
			on any sized area of the screen.
			It is the same color as sRGB ''white''.
			Diffuse white is 203 cd/m²  [[Rec_BT.2100]].
			<pre>
			<span class="swatch" style="--color: white"></span> jzazbz(0.22207 -0.00016 -0.00012)
			</pre>
		</div>
		<!-- 
			unclear why az and bz are not zero here. Is this the crosstalk term? 
			No, it is due to incomplete adaptation. See 
			https://github.com/color-js/color.js/issues/613#issuecomment-2666872133
		-->

		Within a [=relative color=] syntax ''jzazbz()'' function,
		the allowed [=component keywords=] are:

		* <dfn value for="jzazbz()">j</dfn> is a  <<number>>
			that corresponds to the [=origin color's=]  Jz (Lightness)
			after [=required conversion|conversion, if required=], to jzazbz.
			1.0 is equivalent to 100%.
		* <dfn value for="jzazbz()">a</dfn> and <dfn value for="jzazbz()">b</dfn> are <<number>>s
			that correspond to the [=origin color's=] az and bz axes
			after [=required conversion|conversion, if required=], to jzazbz.
			0.21 is equivalent to 100%, while -0.21 is equivalent to -100%.
		* <dfn value for="jzazbz()">alpha</dfn> is a <<number>> that corresponds to the
			[=origin color's=] alpha transparency. 1.0 is equivalent to 100%.
	
<dfn export>JzCzhz</dfn> {#JzCzhz}
-----------------
	
		Similar to LCH, which is the polar representation of Lab,
		''JzCzhz'' is the polar form of ''Jzazbz''.

		J<sub>z</sub> is identical to  the value in ''Jzazbz'' and represents the Lightness,
		while C<sub>z</sub> represents the Chroma or colorfulness
		and h<sub>z</sub> represents a hue angle,
		measured from the positive a<sub>z</sub> axis,
		towards the positive b<sub>z</sub> axis.
	
		It has the following characteristics:
	
		<table>
			<thead><tr><td></td><td>x</td><td>y</td></tr></thead>
			<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
			<tr><th>Transfer function</th><td colspan="2">Perceptual Quantizer</td></tr>
			<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
			<tr><th>Black luminance</th><td colspan="2">0.001 cd/m²</td></tr>
			<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
			<tr>
				<th>Percentages</th>
				<td  colspan="2">Allowed for Jz and Cz</td>
			</tr>
			<tr>
				<th>Percent reference range</th>
				<td>for Jz: 0% = 0.0, 100% = 1.0<br>
				for Cz: 0% = 0.0, 100% = 0.26</td>
			</tr>
			<tr>
				<th>Powerless hue ε </th>
				<td>Cz &lt;= 0.0000026</td>
			</tr>
		</table>
	
		<div class="example">
			This color represents the sRGB color "lime" in ''Jzazbz''
			<pre>
			<span class="swatch" style="--color: lime"></span> jzazbz(0.17542 -0.1179 0.1092)
			</pre>
			and here is the same color in the polar form
			<pre>
			<span class="swatch" style="--color: lime"></span> jzczhz(0.17542 0.1614 132.50)
			</pre>
		</div>

		<figure id="fig-rec2020-jzczhz">
			<img src="images/2020-prim-sec-JzCzHz.svg" width=700 height=769
			alt="diagram of rec2020 primaries and secondaries in JzCzhz">
			<figcaption>Visualization of the rec2020 color space in JzCzhz.
				The primaries and secondaries are shown
				(but in sRGB, not in the correct colors).
				For comparison, the sRGB primaries and secondaries
				are also shown, as dashed circles.
			</figcaption>
		</figure>

		Within a [=relative color=] syntax ''jzczhz()'' function,
		the allowed [=component keywords=] are:

		* <dfn value for="jzczhz()">j</dfn> is a <<number>>
			that corresponds to the [=origin color's=] Jz (Lightness)
			after [=required conversion|conversion, if required=], to jzczhz.
			100 is equivalent to 100%.
		* <dfn value for="jzczhz()">c</dfn> is a  <<number>>
			that corresponds to the [=origin color's=] Cz (chroma)
			after [=required conversion|conversion, if required=], to jzczhz.
			0.26 is equivalent to 100%.
		* <dfn value for="jzczhz()">h</dfn> is a <<number>>
			that corresponds to the [=origin color's=] hz (hue), in degrees,
			after [=required conversion|conversion, if required=], to jzczhz,
			normalized to a [0, 360] range. 90 is equivalent to 90deg.
		* <dfn value for="jzczhz()">alpha</dfn> is a <<number>> that corresponds to the
			[=origin color's=] alpha transparency. 1.0 is equivalent to 100%.
	
	<h4 id='Jzazbz-to-JzCzHz'>
		Converting ''Jzazbz'' colors to ''JzCzhz'' colors</h4>
	
			Conversion to ''JzCzhz'' is trivial:
	
			<ol>
				<li>hz = atan2(bz, az) // but convert to degrees!
				<li>Cz = sqrt(az^2 + bz^2)
				<li>Jz is the same
			</ol>

		In addition, practical code should return a ''none'' value if Cz is less than ε.
	
	<h4 id='JzCzHz-to-Jzazbz'>
	Converting JzCzhz colors to Jzazbz  colors</h4>
	
			Conversion to ''Jzazbz'' is trivial:
	
			<ol>
				<li>az = Cz cos(H) 	// convert to radians first!
				<li>bz = Cz sin(H)	// convert to radians first!
				<li>Jz is the same
			</ol>

			In addition, practical code should check for a ''none'' value
			for hz.



<!-- Big Text:  color() 

 ███▌   ███▌  █▌     ███▌  ████▌    ██ ██  
█▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌  █▌  █▌   ▐█ 
█▌     █▌  █▌ █▌    █▌  █▌ █▌  █▌ █▌     ▐█
█▌     █▌  █▌ █▌    █▌  █▌ ████▌  █▌     ▐█
█▌     █▌  █▌ █▌    █▌  █▌ █▌▐█   █▌     ▐█
█▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌ ▐█   █▌   ▐█ 
 ███▌   ███▌  █████  ███▌  █▌  █▌   ██ ██  
-->

<h2 id="color-function">
	Specifying Predefined and Custom Color Spaces: the ''color()'' Function
</h2>

	The ''color()'' function allows a color to be specified
	in a particular, given [=color space=]
	(rather than the implicit sRGB color space that most of the other color functions operate in).

	This specification extends the ''color()'' function
	to allow <a href="#predefined-HDR">predefined color spaces for HDR</a>,
	in addition to the predefined SDR spaces from [[css-color-4#predefined]]
	and the relative color syntax from [[css-color-5#relative-colors]].

	Its syntax is now as follows:

	<pre class='prod'>
		<dfn>&lt;predefined-rgb></dfn> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | 
			rec2100-pq | rec2100-hlg | rec2100-linear
	</pre>


Predefined color spaces for HDR: {#predefined-HDR}
=====================

	In addition to the <a href="https://drafts.csswg.org/css-color-4/#predefined">SDR
	color spaces</a> defined by CSS Color 4, the following HDR color spaces are defined
	for use in the color function.

	Serialization of values in these new color spaces is identical to the description in [[css-color-4#serializing-color-values]].

<dfn export>rec2100-pq</dfn> {#valdef-color-rec2100-pq}
---------------------------

	The ''rec2100-pq'' [[!Rec_BT.2100]] color space accepts three numeric parameters,
	representing the red, green, and blue channels of the color,
	with each having a valid range of [0, 1]
	regardless of the actual bit depth (10 or 12 bits per component).

	The Perceptual Quantizer (PQ) electro-optical transfer function is used
	[[SMPTE-ST-2084]],[[!Rec_BT.2100]].
	PQ assumes a reference viewing condition
	where the screen surround
	is at 5 cd/m².

	ITU Reference 2100 is used for HDR 4k and 8k television.

	It has the following characteristics:
	(The display primaries are the same as [[!Rec.2020]]):

	<table>
		<thead><tr><td></td><td>x</td><td>y</td></tr></thead>
		<tr><th>Red chromaticity</th><td>0.708</td><td>0.292</td></tr>
		<tr><th>Green chromaticity</th><td>0.170</td><td>0.797</td></tr>
		<tr><th>Blue chromaticity</th><td>0.131</td><td>0.046</td></tr>
		<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
		<tr><th>Transfer function</th><td colspan="2">Perceptual Quantizer</td></tr>
		<tr><th>White luminance</th><td colspan="2">203 cd/m²</td></tr>
		<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
		<tr><th>Black luminance</th><td colspan="2">≤ 0.005 cd/m²</td></tr>
		<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
		<tr>
			<th>Percentages</th>
			<td  colspan="2">Allowed for R, G and B</td>
		</tr>
		<tr>
			<th>Percent reference range</th>
			<td>for R,G,B: 0% = 0.0, 100% = 1.0</td>
		</tr>
	</table>

	For narrow-range PQ video in a non-reference viewing environment, 
	or for HLG (in any viewing environment), 
	the black level should be adjusted 
	using the PLUGE test signal and procedure 
	specified in [[Rec_BT.814]] Annex  . 
	For PQ values in CSS, which uses wide-range, 
	the black corresponds to code point 0.

	<div class="example">
		This color represents a blinding white
		with a luminance of 10,000 cd/m².
		Such a bright color can only be displayed briefly,
		on a small area of the screen.
		Content is typically mastered with a lower peak white,
		such as 4,000  cd/m².
		<pre>
		<span class="swatch oog" style="--color: white"></span> color(rec2100-pq 1.0 1.0 1.0);
		</pre>
	</div>


	<div class="example">
		This color represents a comfortable "diffuse white"
		This color can be displayed for long periods,
		or used for subtitles,
		on any sized area of the screen.
		It is the same color as sRGB ''white''.
		Diffuse white is 203 cd/m²  [[!Rec_BT.2100]].
		<pre>
		<span class="swatch" style="--color: white"></span> color(rec2100-pq 0.58 0.58 0.58);
		</pre>
		This color represents a mid grey,
		like a photographer's "18% reflectance grey" card,
		at 17 cd/m².
		<pre>
		<span class="swatch" style="--color: rgb(46.632% 46.632% 46.632%)"></span> color(rec2100-pq 0.34 0.34 0.34)
		</pre>
	</div>

	Issue: add other examples, including encoding of sRGB red, green, blue and P3 red, green, blue.

	Linear-light RGB signals are converted to PQ encoded as follows.
	The maximum encodable value (peak, small-area white) in PQ is 10,000 cd/m². 
	HDR Reference White is 203 cd/m² [[!Rpt_BT.2408-9]].

	<!-- From Froehlich p.42
		and BT.2100 Table 4 p.4 Reference PQ OETF
	-->

	<pre class="lang-javascript">
		var Er;			// the red, green or blue component, [0, 1] for SDR, [0, 70ish] for HDR
		var Yw = 203;	// the luminance of diffuse white, cd/m²
		var x = Er * Yw / 10000; 	// luminance of peak white is 10,000 cd/m².
		const n = 2610 / (2 ** 14);
		const m = 2523 / (2 ** 5);
		const c1 = 3424 / (2 ** 12);
		const c2 = 2413 / (2 ** 7);
		const c3 = 2392 / (2 ** 7);
		xPQ = (((c1 + (c2 * (x ** n))) / (1 + (c3 * (x ** n)))) ** m);

	</pre>
		xPQ is the "gamma-corrected" (OETF-adjusted) signal [0, 1].

	PQ encoded values are converted to linear-light as follows:

	<!-- from BT.2100 Table 4 p.4 Reference EOTF -->

	<pre class="lang-javascript">
		var xPQ;			// the red, green or blue PQ-encoded component, [0, 1]
		const ninv = (2 ** 14) / 2610;
		const minv = (2 ** 5) / 2523;
		const c1 = 3424 / (2 ** 12);
		const c2 = 2413 / (2 ** 7);
		const c3 = 2392 / (2 ** 7);
		var x = (((Math.max(((xPQ ** minv) - c1), 0) / (c2 - (c3 * (xPQ ** minv)))) ** ninv);
		var Yw = 203;			// the luminance of diffuse white, cd/m²
		var Ea = x * 10000; 	// luminance, [0, 10,000].
		var Er = x * 10000 / Yw; 	// luminance relative to diffuse white, [0, 70 or so].
	</pre>


<dfn export>rec2100-hlg</dfn> {#valdef-color-rec2100-hlg}
---------------------------

	The ''rec2100-hlg'' [[Rec_BT.2100]] color space accepts three numeric parameters,
	representing the red, green, and blue channels of the color,
	with each having a valid range of [0, 1]
	regardless of the actual bit depth (10 or 12 bits per component).

	The Hybrid Log-Gamma (HLG) electro-optical transfer function
	is used [[ARIB_STD-B67]],[[!Rec_BT.2100]].
	HLG can be used with displays of different brightness
	in a wide range of viewing environments,
	with user control of the overall brightness level.
	A value of 0.75 represents "diffuse" or "media" white
	while an "18% reflectance grey" card
	has a value of 0.38. [[!Rec_BT.2390]].

	It has the following characteristics:
	(The display primaries are the same as [[!Rec.2020]]):

	<table>
		<thead><tr><td></td><td>x</td><td>y</td></tr></thead>
		<tr><th>Red chromaticity</th><td>0.708</td><td>0.292</td></tr>
		<tr><th>Green chromaticity</th><td>0.170</td><td>0.797</td></tr>
		<tr><th>Blue chromaticity</th><td>0.131</td><td>0.046</td></tr>
		<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
		<tr><th>Transfer function</th><td colspan="2">Hybrid Log-Gamma</td></tr>
		<tr><th>White luminance</th><td colspan="2">depends on viewing conditions</td></tr>
		<tr><th>Peak white luminance</th><td colspan="2">12 times reference white</td></tr>
		<tr><th>Black luminance</th><td colspan="2">depends on reference white, see text</td></tr>
		<tr><th>Image state</th><td colspan="2">scene-referred</td></tr>
		<tr>
			<th>Percentages</th>
			<td  colspan="2">Allowed for R, G and B</td>
		</tr>
		<tr>
			<th>Percent reference range</th>
			<td>for R,G,B: 0% = 0.0, 100% = 1.0</td>
		</tr>
	</table>

	For narrow-range HLG video (in any viewing environment), 
	the black level should be adjusted 
	using the PLUGE test signal and procedure 
	specified in [[Rec_BT.814]] Annex 4. 

	For HLG values in CSS, which uses wide-range, 
	the black corresponds to code point 0.

	Issue: add other examples

	<div class="example">
		This color represents a comfortable "diffuse white"
		This color can be displayed for long periods,
		or used for subtitles,
		on any sized area of the screen.
		Content is typically mastered with a peak white
		of 1,000 to 4,000  cd/m²,
		so diffuse white will be 203 to 581 cd/m².
		<pre>
		<span class="swatch" style="--color: white"></span> color(rec2100-hlg 0.75 0.75 0.75);
		</pre>
		This color represents a mid grey,
		at 26 to 104  cd/m².
		<pre>
		<span class="swatch" style="--color: rgb(46.632% 46.632% 46.632%)"></span> color(rec2100-hlg 0.38 0.38 0.38)
		</pre>
	</div>

	Linear-light RGB signals are converted to HLG encoded as follows [[Rec_BT.2390]]:

	<!-- From BT.2390 p.26
		confirmed with Froehlich p.43
	-->

	<pre class="lang-javascript">
		var E;			// the red, green or blue component, [0, 1]
		const a = 0.17883277;
		const b = 0.28466892;   // 1 - (4 * a)
		const c = 0.55991073;   // 0.5 - a * Math.log(4 *a)
		// handle negative values
		var sign = E < 0? -1 : 1;
		var abs = Math.abs(E);
		if (abs <= 1/12) {
			Edash = sign * Math.sqrt( 3 * abs);
		}
		else {
			Edash = a * Math.log(12 * E - b) + c;
		}
	</pre>
		Edash is the "gamma-corrected" (OETF-adjusted) signal.

	The reverse conversion (HLG encoded to linear light) is as follows  [[Rec_BT.2390]]::

	<!-- From BT.2390 p.33
	-->

	<pre class="lang-javascript">
		var Edash;			// the red, green or blue encoded component, [0, 1]
		const a = 0.17883277;
		const b = 0.28466892;   // 1 - (4 * a)
		const c = 0.55991073;   // 0.5 - a * Math.log(4 *a)
		if (Edash <= 0.5) {
			E = (Edash ** 2) / 3;
		}
		else {
			E = (Math.exp((Edash - c) / a) + b) / 12;
		}
	</pre>

	Issue: add black level lift Β as defined on same page?

<dfn export>rec2100-linear</dfn> {#valdef-color-rec2100-linear}
---------------------------

	The ''rec2100-linear'' [[!Rec_BT.2100]] color space accepts three numeric parameters,
	representing the red, green, and blue channels of the color,
	with each having a nominal range of [0, 1]
	regardless of the actual bit depth (10 or 12 bits per component).

	The color with red, green and blue all at 1.0 
	represents [=HDR Reference White=] with a luminance of 
	203 cd/m².

	<pre class="lang-css">color(rec2100-linear 1 1 1)</pre>

	<div class="example">
		For example, the following color

		<pre class="lang-css">color(rec2100-linear 9.852 9.852 9.852)</pre>

		represents a white highlight 
		with a luminance
		of 9.852 × 203 = 1,999 cd/m².
	</div>

	
	<div class="example">
		This color represents a comfortable "diffuse white"
		This color can be displayed for long periods,
		or used for subtitles,
		on any sized area of the screen.
		It is the same color as sRGB ''white''.
		Diffuse white is 203 cd/m²  [[!Rec_BT.2100]].
		<pre>
		<span class="swatch" style="--color: white"></span> color(rec2100-linear 1 1 1)
		</pre>
	</div>

	A linear-light electro-optical transfer function is used.

	It has the following characteristics:
	(The display primaries are the same as [[!Rec.2020]]):

	<table>
		<thead><tr><td></td><td>x</td><td>y</td></tr></thead>
		<tr><th>Red chromaticity</th><td>0.708</td><td>0.292</td></tr>
		<tr><th>Green chromaticity</th><td>0.170</td><td>0.797</td></tr>
		<tr><th>Blue chromaticity</th><td>0.131</td><td>0.046</td></tr>
		<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
		<tr><th>Transfer function</th><td colspan="2">Linear</td></tr>
		<tr><th>White luminance</th><td colspan="2">203 cd/m²</td></tr>
		<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
		<tr><th>Black luminance</th><td colspan="2">0.001 cd/m²</td></tr>
		<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
		<tr>
			<th>Percentages</th>
			<td  colspan="2">Allowed for R, G and B</td>
		</tr>
		<tr>
			<th>Percent reference range</th>
			<td>for R,G,B: 0% = 0.0, 100% = 1.0</td>
		</tr>
	</table>




	
<!-- Big Text: composite 

 ███▌   ███▌  █     █ ████▌   ███▌   ███▌  ████ █████▌ █████▌
█▌  █▌ █▌  █▌ ██   ██ █▌  █▌ █▌  █▌ █▌  █▌  ▐▌    █▌   █▌    
█▌     █▌  █▌ █▌█ █▐█ █▌  █▌ █▌  █▌ █▌      ▐▌    █▌   █▌    
█▌     █▌  █▌ █▌ █ ▐█ ████▌  █▌  █▌  ███▌   ▐▌    █▌   ████  
█▌     █▌  █▌ █▌   ▐█ █▌     █▌  █▌     █▌  ▐▌    █▌   █▌    
█▌  █▌ █▌  █▌ █▌   ▐█ █▌     █▌  █▌ █▌  █▌  ▐▌    █▌   █▌    
 ███▌   ███▌  █▌   ▐█ █▌      ███▌   ███▌  ████   █▌   █████▌
-->

Compositing SDR and HDR content {#Compositing-SDR-HDR}
===============================

Compositing should take place in CIE XYZ,
as it is a linear-light space without gamut limitations.
Implementations may chose to composite in a linear-light RGB space instead,
which will give the same result
provided out-of-gamut values (negative, or greater than 100%)
are correctly handled
and not clipped or gamut mapped until
the final transfer to the device color space.

HDR using the HLG transfer function,
must map SDR HDR Reference White
to the same luminance as is used
to display the 75% HLG value. [[!SMPTE-ST-2084]]

For further details, see also tables 3 and 4 in ITU Rpt_BT.2408-0 [[!Rpt_BT.2408-9]]

HDR using the PQ transfer function,
should map SDR HDR Reference White
to 203 cd/m², the same luminance as is used
to display the 58% PQ value. [[!SMPTE-ST-2084]].

However, implementations may chose to incorporate
a color re-rendering step
to account for non-reference viewing conditions.

<!--
 ██████  ████████ ████████  ████    ███    ██
██    ██ ██       ██     ██  ██    ██ ██   ██
██       ██       ██     ██  ██   ██   ██  ██
 ██████  ██████   ████████   ██  ██     ██ ██
	  ██ ██       ██   ██    ██  █████████ ██
██    ██ ██       ██    ██   ██  ██     ██ ██
 ██████  ████████ ██     ██ ████ ██     ██ ████████
-->

<h2 id='serializing-color-values'>
Serializing <<color>> Values</h2>

<h3 id="serializing-color-function-values">
Serializing values of the ''color()'' function</h3>

	This section extends [[css-color-4#serializing-color-function-values]]
	
	The serialized form of ''color()'' values
	is derived from the [=computed value=]
	and uses the ''color()'' form,
	with <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a> 
	letters for the function name
	and the color space name.

	The component values are serialized in base 10,
	as <<number>>.
	A single ASCII space character " "
	must be used as the separator
	between the component values,
	and also between the color space name and the first color component.

	For the predefined HDR color spaces,
	the <em>minimum</em> precision for round-tripping is as follows:

	<table class="data" id="predefined-precision-table">
		<tr><th>HDR color space</th><th>Minimum bits</th></tr>
		<tr>
			<td>''rec2100-pq'', ''rec2100-hlg''</td>
			<td>10</td>
			<!-- to conform to BT.2100 which recommends 12 but allows 10 -->
		</tr>
		<tr>
			<td>''rec2100-linear'', ''jzazbz'', ''jzczhz'', ''ictcp''</td>
			<td>16</td>
		</tr>
	</table>

	(16bit, half-float, or float <em>per component</em>
	is recommended for internal storage).
	Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated.

<!--
 ██████   ███████  ████████  ████████
██    ██ ██     ██ ██     ██ ██
██       ██     ██ ██     ██ ██
██       ██     ██ ██     ██ ██████
██       ██     ██ ██     ██ ██
██    ██ ██     ██ ██     ██ ██
 ██████   ███████  ████████  ████████
-->

<h2 id="color-conversion-code">
	Sample code for Color Conversions</h2>
	
	<em>This section is not normative.</em>
	<wpt title="This section is not normative, it does not need tests."></wpt>
	
	
	For clarity, <a href="https://drafts.csswg.org/css-color-4/multiply-matrices.js">a library</a> is used for matrix multiplication.
	(This is more readable than inlining all the multiplies and adds).
	The matrices are in <a href="https://www.scratchapixel.com/lessons/mathematics-physics-for-computer-graphics/geometry/row-major-vs-column-major-vector">column-major order</a>.
	
	This code also assumes all of the conversion code from
	[[css-color-4#color-conversion-code]] is available.

	The LMS used in ''Jzazbz'' are not the same
	as the ones used in ''ICtCp'',
	take care to use the right ones!

<h3 id="rec2100-linear_code">
	Sample code for ''rec2100-linear''
</h3>

The BT.2020 and BT.2100 color spaces 
use the same RGB primaries and white point,
and both place HDR Reference White at a component value of 1.0.

<pre class="include-code lang-javascript">
	path: rec2100-linear.js
	highlight: js
</pre>

<h3 id="rec2100-pq_code">
	Sample code for ''rec2100-pq''
</h3>

<pre class="include-code lang-javascript">
	path: rec2100-pq.js
	highlight: js
</pre>

<h3 id="rec2100-hlg_code">
	Sample code for ''rec2100-hlg''
</h3>

<pre class="include-code lang-javascript">
	path: rec2100-hlg.js
	highlight: js
</pre>

<h3 id="jzazbz_code">
	Sample code for ''jzazbz''
</h3>

This uses the same signed power (spow) function defined above.

<pre class="include-code lang-javascript">
	path: jzazbz.js
	highlight: js
</pre>

<h3 id="ictcp_code">
	Sample code for ''ICtCp''
</h3>

Rather than first requiring 
conversion to ''rec2100-linear'',
which is how the conversion is defined in [[!Rec_BT.2100]],
this sample code proceeds directly from absolute CIE XYZ
for compatibility with the other color conversion code.

The 4% crosstalk matrix, and the hue rotation,
are also built into the XYZ to LMS step,
rather than being applied as three separate steps.

The end result is identical, this just takes fewer steps.

<pre class="include-code lang-javascript">
	path: ICtCp.js
	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>


<!--
████████  ████████ ██     ████████    ███         ████████
██     ██ ██       ██        ██      ██ ██        ██
██     ██ ██       ██        ██     ██   ██       ██
██     ██ ██████   ██        ██    ██     ██      ██████
██     ██ ██       ██        ██    █████████      ██
██     ██ ██       ██        ██    ██     ██      ██
████████  ████████ ████████  ██    ██     ██      ████████
-->

<h2 id="deltaE">
	Sample code for ΔEITP Color Differences
</h2>

<em>This section is not normative.</em>
<wpt title="This section is not normative, it does not need tests."></wpt>

The ΔEITP [[Rec_BT.2124]] color difference metric 
may be used to measure the perceptual color difference between 
two display-referred colors
in an HDR or mixed SDR/HDR context,
for example in display calibration
or gamut and tone mapping.

It is a Euclideam distance in ''ICtCp'' color space,
scaled such that a ΔEITP of 1.0
represents one just-noticeable difference.

<pre class="include-code lang-javascript">
	path: deltaEITP.js
	highlight: js
	</pre>

<!-- Sample section {#sample-topic}
==============================

	Look at the mark-up in this section for examples.
	See the <a href="https://github.com/tabatkins/bikeshed/blob/master/README.md">documentation</a> for more precise instructions.
	The companion of this template shows the <a href="Overview.html">processed result</a>.

	To refer to HTML, use [[HTML]] (note the double square brackets in the source).
	To make a normative reference,
	insert a “!”, like this:
	[[!CSS-SYNTAX-3]]
	The currently available <a href="https://www.w3.org/Style/Group/css3-src/biblio.ref">list of bibliographic data</a> can of course be extended.

	We write about a property such as 'foo' like this
	and about a piece of CSS code like this: ''foo: bar''.
	(Note that if it looks like a "property: value",
	it'll automatically link to the property.)
	Inline HTML and XML are similar,
	but use the CODE element: <code class=lang-html>&lt;blockquote&gt;...&lt;/blockquote&gt;</code>
	and <code class=lang-xml>&lt;r:xyz&gt;...&lt;/r:xyz&gt;</code>.

	Note: Note that the property will automatically be linked to its definition.

	To define <dfn export>terms</dfn> into the <dfn export id="dfn-index">index</dfn>,
	there are many <dfn export lt="variant">variants</dfn>,
	but hopefully the <dfn export title="simple|simpler|simplest">simplest</dfn>
	will be the most common.
	Note that you need to explicitly export any plain <{dfn}>s you want to be linkable from other specs,
	but all other types of definition automatically export themselves.

	Note: Note that you can add non-normative notes like this.

	Of course, multi-paragraph notes are also possible: just enclose them in a <{div}>:

	<div class=note>
		Note that this note is a multi-paragraph note.

		It doesn't <em>need</em> to have two paragraphs, but it could.
	</div>

	<details class=note>
		<summary>A longer note</summary>

		When you want to insert a longer note
		to provide some useful explanation,
		but the note itself is not critical to the section it's placed in,
		use a <{details}> note instead.

		This will hide the note by default,
		so it's less distracting to the flow of the section.
		(At least, in browsers that support <{details}>;
		legacy browsers will get something like a normal note.)
	</details>

	Displayed examples come in eight different types:
	CSS examples that need no separate paragraph of explanation are put in a simple PRE:

	<pre class="example lang-css">
		EM { font-style: italic }
	</pre>

	CSS examples that need extra text need a DIV.

	<div class=example>
		The following example is the same as the previous one,
		but now it is explained:

		<pre class="lang-css">EM { font-style: italic }</pre>
	</div>

	Illegal CSS examples (examples of errors) are the same,
	but with class "illegal example".
	Examples of HTML and XML code have class "html" and "xml" respectively,
	but are otherwise ditto.

	A formal definition of a property looks like this:

Internal display model: the 'foo' property {#the-foo-property}
--------------------------------------------------------------

	<pre class='propdef'>
		Name: foo
		Value: inline-inside | block-inside | table | ruby | icon
		Initial: text
		Applies to: all elements
		Inherited: no
		Percentages: n/a
		Computed value: specified value
		Animation type: not animatable
		Canonical order: per grammar
	</pre>

	<dl dfn-type="value" dfn-for="foo">
		<dt><dfn>value-name</dfn>
		<dd>
			Define values using a <{dl}>.
			Note that the <{dl}> wrapper
			specifies the default <{dfn}> type and what property it's for,
			so you don't have to repeat that information in each individual definition.
	</dl>

	<dfn>Cross-references</dfn> are created by enclosing a term or phrase in &lt;dfn>
	(like the word <a>cross-references</a> earlier in this sentence).
	Then an &lt;a> without an <code>href=""</code> attribute
	with the same text content will automatically be linked.
	Both &lt;dfn>s and &lt;a>s are typed,
	which allows the same text to appear as different types of terms without a collision.
	The type can often be inferred,
	but sometimes it needs to be specified,
	like when you're linking to a {{Foo}} WebIDL interface.
	(Here, we're using the <em>IDL</em> linking shorthand
	to make it clear that this is one of the IDL types.)

	And a figure with a caption is done like this:

	<figure>
		<img src="corner.png" alt="A table with a caption above it; both have margins and the margins between them are collapsed, as is normal for vertical margins.">

		<figcaption>
			Just a random image.
			Use SVG if you can.
			Otherwise, W3C prefers PNG over GIF (obviously, since PNG is a W3C Rec).
		</figcaption>
	</figure>

	Don't forget to write the alt.

	Issue: An open issue or editorial remark is OK in a WD,
	but they should be resolved/removed before the document goes to &ldquo;CR&rdquo;
	(Candidate Recommendation).
	Use <code class=lang-html>class="issue"</code> on an element,
	or begin a paragraph with &ldquo;Issue:&rdquo;.

	Issue:
	Inline issues will be copied into an <a href="#issues-index">Issues Index</a> at the end of the document,
	for easy reference.

	<pre class='idl'>
		/* Write WebIDL in a &lt;pre class="idl"> as plain text. */
		interface Foo {
			readonly attribute CSSOMString bar;
			boolean baz(FooDict Arg1, (CSSOMString or Foo) Arg2);
		};

		dictionary FooDict {
			sequence&lt;Foo> foos;
			boolean bar;
			CSSOMString baz = "qux";
		};
	</pre>

Shorthands and Descriptors {#shorthands}
----------------------------------------

Shorthand properties have a smaller set of values to provide:

<pre class="propdef shorthand">
Name: shorthand-foo
Value: foo | bar | baz
</pre>

Adding new values to an existing property? Use a partial:

<pre class="propdef partial">
Name: foo
New values: another-icon
</pre>

Or when defining a descriptor, use a descdef block (partials work here, too):

<pre class=descdef>
Name: descriptor-foo
Value: more | values
Initial: values
For: @some-at-rule
</pre>

(A required descriptor can use `Initial: n/a</code>.) -->

<!-- Big Text: privacy  

████▌  ████▌  ████ █▌   █▌  ███▌   ███▌  █   ▐▌
█▌  █▌ █▌  █▌  ▐▌  █▌   █▌ ▐█ ▐█  █▌  █▌ ▐▌  █ 
█▌  █▌ █▌  █▌  ▐▌  █▌   █▌ █▌  █▌ █▌      █ ▐▌ 
████▌  ████▌   ▐▌  ▐▌   █  █▌  █▌ █▌      ▐▌█  
█▌     █▌▐█    ▐▌   █  ▐▌  █████▌ █▌       █▌  
█▌     █▌ ▐█   ▐▌   ▐▌ █   █▌  █▌ █▌  █▌   █▌  
█▌     █▌  █▌ ████   ▐█    █▌  █▌  ███▌    █▌  
-->

<h2 class=no-num id=privacy>Privacy Considerations</h2>

	The reason that numerical values of [=HDR headroom=]
	are not directly exposed by the Web platform
	is because doing so
	would expose the current viewing conditions,
	which would be a <a href="#headroom-privacy">privacy violation</a>.

<!-- Big Text: security 

 ███▌  █████▌  ███▌  █▌  █▌ ████▌  ████ █████▌ █   ▐▌
█▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌  █▌  ▐▌    █▌   ▐▌  █ 
█▌     █▌     █▌     █▌  █▌ █▌  █▌  ▐▌    █▌    █ ▐▌ 
 ███▌  ████   █▌     █▌  █▌ ████▌   ▐▌    █▌    ▐▌█  
    █▌ █▌     █▌     █▌  █▌ █▌▐█    ▐▌    █▌     █▌  
█▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌ ▐█   ▐▌    █▌     █▌  
 ███▌  █████▌  ███▌   ███▌  █▌  █▌ ████   █▌     █▌  
-->

<h2 class=no-num id=security>Security Considerations</h2>

No Security concerns have been raised on this document

<!-- Big Text: A11y  

 ███▌    █▌     █▌   █   ▐▌
▐█ ▐█   ██▌    ██▌   ▐▌  █ 
█▌  █▌ █ █▌   █ █▌    █ ▐▌ 
█▌  █▌   █▌     █▌    ▐▌█  
█████▌   █▌     █▌     █▌  
█▌  █▌   █▌     █▌     █▌  
█▌  █▌ █████▌ █████▌   █▌  
-->

<h2 class="no-num" id="a11y">Accessibility Considerations</h2>

Some individuals may have a sensitivity 
to very bright colors, 
so user agents should provide a mechanism 
to limit the maximum luminance at user option. 
<span class="non-normative">The toe and knee procedure 
	in section 5.4.1 
	<em>Mapping to display with limited brightness range</em> 
	of [[Rec_BT.2390]] 
	is suggested as suitable.</span>

The ''dynamic-range-limit'' property could also be set to
''dynamic-range-limit/standard'' or ''dynamic-range-limit/constrained''
in a user stylesheet.

<!--
 ██████  ██     ██    ███    ██    ██  ██████   ████████  ██████
██    ██ ██     ██   ██ ██   ███   ██ ██    ██  ██       ██    ██
██       ██     ██  ██   ██  ████  ██ ██        ██       ██
██       █████████ ██     ██ ██ ██ ██ ██   ████ ██████    ██████
██       ██     ██ █████████ ██  ████ ██    ██  ██             ██
██    ██ ██     ██ ██     ██ ██   ███ ██    ██  ██       ██    ██
 ██████  ██     ██ ██     ██ ██    ██  ██████   ████████  ██████
-->

<h2 id="changes" class="no-num">
	Changes
</h2>

<h3 id="changes-20260303">Changes since the 
	<a href="https://www.w3.org/TR/2026/WD-css-color-hdr-1-20260303/">3 March 2026 Working Draft
	</a></h3>

	<ul>
		<li>Updated some references to latest versions</li>
		<li>Consistently distinguished between terms defined in linear-light and those defined in log2 (photographic stops) 
		(<a href="https://github.com/w3c-cg/ColorWeb-CG/issues/129">Issue 129</a>)</li>
	</ul>

<h3 id="changes-20241217">Changes since the 
	<a href="https://www.w3.org/TR/2024/WD-css-color-hdr-1-20241217/">17 December 2024
	First Public Working Draft
	</a></h3>

<ul>
	<!-- to 3 March 2026 -->
	<li>Added missing hdr-color() to the grammar  of the color function</li>
	<li>Added missing Jzazbz_to_XYZ to sample code
		<a href="https://github.com/w3c/csswg-drafts/issues/9934">#9934</a>
	</li>
	<li>Removed mention of SMPTE-ST-2094-50  as justification for eps
		(<a href="https://github.com/w3c/csswg-drafts/issues/12873">#12873</a>, 
		<a href="https://github.com/w3c/csswg-drafts/issues/11788">#11788</a>)
	</li>
	<li>Noted similarity of hdr-color to adaptive gain curves</li>
	<li>Added alpha() RCS to color syntax
		<a href="https://github.com/w3c/csswg-drafts/issues/10689">#10689</a>
	</li>
	<li>Added display-p3-linear to color spaces for interpolation
		(<a href="https://github.com/w3c/csswg-drafts/issues/12596">#12596</a>)
	</li>
	<li>Added a couple of deltaE ITP worked examples
		(<a href="https://github.com/w3c/csswg-drafts/issues/11250">#11250</a>)
	</li>
	<li>Added display-p3-linear colorspace
		(<a href="https://github.com/w3c/csswg-drafts/issues/12596">#12596</a>)
	</li>
	<!-- to 19 July 2025 -->
	<li>Added the clamp function which is used in  hdr-color() </li>
	<li>Added sample code for hdr-color()</li>
	<li>Explained what the eps factor is for 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11788">#11788</a>)</li>
	<li>Added second color-hdr() worked example</li>
	<li>Defined the term "Absolute D65 CIE XYZ"</li>
	<li>Clarified pseudo-code for color-hdr() to show each component is calculated separately 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11694">#11694</a>)</li>
	<li>In dynamic-range-limit-mix(), change to 'one or more' per WG resolution
		(<a href="https://github.com/w3c/csswg-drafts/issues/11694">#11694</a>)</li>
	<li>Clarified that the computed value of dynamic-range-limit-mix(), 
		when all parameters are omitted, is the initial value 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11678">#11678</a>)</li>
	<li>Removed re-definition of "color(), link to definition in CSS Color 5 instead
		(<a href="https://github.com/w3c/csswg-drafts/issues/11954">#11954</a>)
	</li>
	<li>Changed "constrained-high" back to "constrained", per WG resolution 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11698">#11698</a>)</li>
	<li>Define epsilon on chroma of JzCzhz, for missing hue
		(<a href="https://github.com/w3c/csswg-drafts/issues/11706">#11706</a>)</li>
	<li>Properly exported, and consistently used, the term "required conversion"</li>
	<li>Removed erroneous negative chroma reference range in JzCzhz</li>
	<li>Added RCS component keywords for relative ictcp, jzazbz, and jzczhz 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11713">#11713</a>)</li>
	<li>Prevented color() links from pointing to back to CSS Color 5, which is SDR-only</li>
	<li>Added an informative section introducing ICtCp, 
		moved definition out from color() 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11713">#11713</a>)</li>
	<li>Removed duplicate productions, already existing in CSS Color 5
		(<a href="https://github.com/w3c/csswg-drafts/issues/11954">#11954</a>)</li>
	<li>Reference ranges encompass the BT.2100 gamut
		(<a href="https://github.com/w3c/csswg-drafts/issues/11710">#11710</a>)</li>
	<li>Remove the "invalid if sum to zero" wording, per CSS WG resolution
		(<a href="https://github.com/w3c/csswg-drafts/issues/11678">#11678</a>)</li>
	<li>Consistently use log (stops) definition of headroom, 
		not linear (multiplier) headroom 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11787">#11787</a>)</li>
	<li>Consistently used preferred term "HDR Reference White", not "media white"</li>
	<li>Added example of color interpolation
		(<a href="https://github.com/w3c/csswg-drafts/issues/11616">#11616</a>)</li>
	<li>Added interpolation algorithm
		(<a href="https://github.com/w3c/csswg-drafts/issues/11616">#11616</a>)</li>
	<li>Added section on interpolating colors parameterized by headroom
		(<a href="https://github.com/w3c/csswg-drafts/issues/11616">#11616</a>)</li>
	<li>Added color-hdr function per WG resolution. 
		Added ISO 21496-1 informative reference
		(<a href="https://github.com/w3c/csswg-drafts/issues/11616">#11616</a>)</li>
	<li>Added sample code for Jzazbz
		(<a href="https://github.com/w3c/csswg-drafts/issues/9934">#9934</a>)</li>
	<li>Add missing signed power function for sample code</li>
	<li>Added sample code for rec2100 colorspaces
		(<a href="https://github.com/w3c/csswg-drafts/issues/9934">#9934</a>)</li>
	<li>Added sample code for ICtCp
		(<a href="https://github.com/w3c/csswg-drafts/issues/9934">#9934</a>)</li>
	<li>Added informative reference to the Perrin ICtCp paper</li>
	<li>Added new section, sample code for color conversions 
		(<a href="https://github.com/w3c/csswg-drafts/issues/9934">#9934</a>)</li>
	<li>Added informative reference to Dolby "What is ICtCp" white paper 
		(<a href="https://github.com/w3c/csswg-drafts/issues/9934">#9934</a>)</li>
	<li>Clarified on the grammar and spec text for dynamic-range-limit-mix() 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11672">#11672</a>)</li>
	<li>Added ΔEITP color difference metric from BT.2124 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11250">#11250</a>)</li>
	<li>For dynamic-range-limit, changes high to no-limit 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11698">#11698</a>)</li>
	<li>Corrected prose, dynamic-range-limit-mix takes 2 or more values 
		(<a href="https://github.com/w3c/csswg-drafts/issues/11694">#11694</a>)</li>
	<li>Removed absolute and relative HDR concepts, stress instead scene-referred and display-referred. 
		Anchor media white, and allow color re-rendering 
		(<a href="https://github.com/w3c/csswg-drafts/issues/10460">#10460</a>)</li>
	<li>Defined "media white" more clearly</li>
	<li>Collected together explanatory material into an introductory section</li>
</ul>
