Skip to content

[css-color-4] Add display-p3-linear #12596 #12601

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 20, 2025
Merged

[css-color-4] Add display-p3-linear #12596 #12601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3d39b76
[css-color-adjust-1]][editorial] Prepare for CRD
svgeesus Aug 6, 2025
10926c5
[css-color-4] Add display-p3-linear #12596
svgeesus Aug 13, 2025
5862cfb
[css-color-adjust-1] back to ED
svgeesus Aug 13, 2025
6e74872
[css-color-hdr] Added a couple of deltaE ITP worked examples, #11250
svgeesus Aug 19, 2025
87f1e1c
Address review comments
svgeesus Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 63 additions & 8 deletions css-color-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -931,8 +931,9 @@ Representing Colors: the <<color>> type</h2>
which allows specifying colors in a variety of color spaces
including
[[#predefined-sRGB|sRGB]],
[[#predefined-sRGB-linear|Linear-light sRGB]],
[[#predefined-sRGB-linear|Linear-Light sRGB]],
[[#predefined-display-p3|Display P3]],
[[#predefined-display-p3-linear|Linear-Light Display P3]],
[[#predefined-a98-rgb|A98 RGB]],
[[#predefined-prophoto-rgb|ProPhoto RGB]],
[[#predefined-rec2020|ITU-R BT.2020-2]],
Expand Down Expand Up @@ -3792,7 +3793,7 @@ Specifying Predefined Colors: the ''color()'' function</h3>
<dfn>color()</dfn> = color( <<colorspace-params>> [ / [ <<alpha-value>> | none ] ]? )
<dfn>&lt;colorspace-params></dfn> = [ <<predefined-rgb-params>> | <<xyz-params>>]
<dfn>&lt;predefined-rgb-params></dfn> = <<predefined-rgb>> [ <<number>> | <<percentage>> | none ]{3}
<dfn>&lt;predefined-rgb></dfn> = <l>''srgb''</l> | <l>''srgb-linear''</l> | <l>''display-p3''</l> | <l>''a98-rgb''</l> | <l>''prophoto-rgb''</l> | <l>''rec2020''</l>
<dfn>&lt;predefined-rgb></dfn> = <l>''srgb''</l> | <l>''srgb-linear''</l> | <l>''display-p3''</l> | <li>''display-p3-linear''</li> | <l>''a98-rgb''</l> | <l>''prophoto-rgb''</l> | <l>''rec2020''</l>
<dfn>&lt;xyz-params></dfn> = <<xyz-space>> [ <<number>> | <<percentage>> | none ]{3}
<dfn>&lt;xyz-space></dfn> = <l>''xyz''</l> | <l>''xyz-d50''</l> | <l>''xyz-d65''</l>
</pre>
Expand Down Expand Up @@ -3977,7 +3978,7 @@ The Predefined sRGB Color Space: the ''sRGB'' keyword</h3>
</wpt>

<h3 id="predefined-sRGB-linear">
The Predefined Linear-light sRGB Color Space: the ''srgb-linear'' keyword</h3>
The Predefined Linear-Light sRGB Color Space: the ''srgb-linear'' keyword</h3>


The <dfn id='sRGB-linear-space' export>sRGB-linear</dfn> predefined color space
Expand Down Expand Up @@ -4119,6 +4120,56 @@ The Predefined Display P3 Color Space: the ''display-p3'' keyword</h3>
2d.color.space.p3.toDataURL.with.putImageData.html
</wpt>

<h3 id="predefined-display-p3-linear">
The Predefined Linear-Light Display P3 Color Space: the ''display-p3-linear'' keyword</h3>


The <dfn id='display-p3-linear-space' export>display-p3-linear</dfn> predefined color space
is the same as ''display-p3''
<em>except</em> that the transfer function
is linear-light (there is no gamma-encoding).

It has the following characteristics:

<table id="prr-color-display-p3-linear">
<thead><td></td><td>x</td><td>y</td></thead>
<tr><th>Red chromaticity</th><td>0.680</td><td>0.320</td></tr>
<tr><th>Green chromaticity</th><td>0.265</td><td>0.690</td></tr>
<tr><th>Blue chromaticity</th><td>0.150</td><td>0.060</td></tr>
<tr><th>White chromaticity</th> <td colspan="2">[=D65=]</td></tr>
<tr><th>Transfer function</th><td colspan="2">unity, see below </td></tr>
<tr><th>White luminance</th><td colspan="2">80.0 cd/m<sup>2</sup></td></tr>
<tr><th>Black luminance</th><td colspan="2">0.80 cd/m<sup>2</sup></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&nbsp;</th>
<td>for R,G,B: 0% = 0.0, 100% = 1.0</td>
</tr>
</table>

<pre class="lang-javascript">
cl = c;
</pre>

c is the red, green or blue component.
cl is the corresponding linear-light component, which is identical.

To avoid banding artifacts, a
<a href="#predefined-precision-table">higher precision is required</a>
for ''display-p3-linear'' than for ''display-p3''.

<div class="example" id="display-p3-linear-swatches">
For example, these are the same color
<pre class="lang-css">
<span class="swatch" style="--color: rgb(64.55% 2.065% 26.03%)"></span> color(display-p3 0.591 0.123 0.264)
<span class="swatch" style="--color: rgb(64.55% 2.065% 26.03%)"></span> color(display-p3-linear 0.3081 0.014 0.0567)
</pre>
</div>


<h3 id="predefined-a98-rgb">
The Predefined A98 RGB Color Space: the ''a98-rgb'' keyword</h3>
Expand Down Expand Up @@ -4714,13 +4765,13 @@ Color Space for Interpolation</h3>
Thus, different color spaces may be more appropriate for each interpolation use case.

* In some cases, the result of physically mixing two colored lights is desired.
In that case, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity.
In that case, the CIE ''XYZ'', ''display-p3-linear'' or ''srgb-linear'' color spaces are appropriate, because they are linear in light intensity.
* If colors need to be evenly spaced perceptually (such as in a gradient),
the Oklab color space (and the older Lab), are designed to be perceptually uniform.
the ''Oklab'' color space (and the older ''Lab''), are designed to be perceptually uniform.
* If avoiding graying out in color mixing is desired, i.e. maximizing chroma throughout the transition,
OkLCh (and the older LCH) work well for that.
''OkLCh'' (and the older ''LCH'') work well for that.
* Lastly, compatibility with legacy Web content may be the most important consideration.
The sRGB color space, which is neither linear-light nor perceptually uniform, is the choice here,
The ''sRGB'' color space, which is neither linear-light nor perceptually uniform, is the choice here,
even though it produces poorer results (overly dark or greyish mixes).

These features are collectively termed the <dfn export>host syntax</dfn>.
Expand All @@ -4744,7 +4795,7 @@ Color Space for Interpolation</h3>

<pre class='prod'>
<dfn export>&lt;color-space></dfn> = &lt;rectangular-color-space> | &lt;polar-color-space>
<dfn export>&lt;rectangular-color-space></dfn> = <l>''srgb''</l> | <l>''srgb-linear''</l> | <l>''display-p3''</l> | <l>''a98-rgb''</l> | <l>''prophoto-rgb''</l> | <l>''rec2020''</l> | <l>''lab''</l> | <l>''oklab''</l> | <<xyz-space>>
<dfn export>&lt;rectangular-color-space></dfn> = <l>''srgb''</l> | <l>''srgb-linear''</l> | <l>''display-p3''</l> | <l>''display-p3-linear''</l> | <l>''a98-rgb''</l> | <l>''prophoto-rgb''</l> | <l>''rec2020''</l> | <l>''lab''</l> | <l>''oklab''</l> | <<xyz-space>>
<dfn export>&lt;polar-color-space></dfn> = <l>''hsl''</l> | <l>''hwb''</l> | <l>''lch''</l> | <l>''oklch''</l>
<dfn export>&lt;hue-interpolation-method></dfn> = [ shorter | longer | increasing | decreasing ] hue
<dfn export id="color-interpolation-method">&lt;color-interpolation-method></dfn> = in [ <<rectangular-color-space>> | <<polar-color-space>> <<hue-interpolation-method>>? ]
Expand Down Expand Up @@ -6705,6 +6756,10 @@ Serializing values of the ''color()'' function</h3>
<td>''display-p3''</td>
<td>10</td>
</tr>
<tr>
<td>''display-p3-linear''</td>
<td>12</td>
</tr>
<tr>
<td>''a98-rgb''</td>
<td>10</td>
Expand Down
1 change: 1 addition & 0 deletions css-color-adjust-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ Title: CSS Color Adjustment Module Level 1
Shortname: css-color-adjust
Level: 1
Status: ED
Prepare for TR: yes
Work Status: testing
Group: CSSWG
TR: https://www.w3.org/TR/css-color-adjust-1/
Expand Down
28 changes: 28 additions & 0 deletions css-color-hdr-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -746,10 +746,38 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
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>
Expand Down