Skip to content

Commit a93d729

Browse files
svgeesussvgeesus
authored
[css-color-4] Add display-p3-linear #12596 (#12601)
* [css-color-4] Add display-p3-linear #12596 * [css-color-hdr] Added a couple of deltaE ITP worked examples, #11250 * Address review comments
1 parent 9b9d5cb commit a93d729

File tree

3 files changed

+92
-8
lines changed

3 files changed

+92
-8
lines changed

‎css-color-4/Overview.bs‎

Lines changed: 63 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -931,8 +931,9 @@ Representing Colors: the <<color>> type</h2>
931931
which allows specifying colors in a variety of color spaces
932932
including
933933
[[#predefined-sRGB|sRGB]],
934-
[[#predefined-sRGB-linear|Linear-light sRGB]],
934+
[[#predefined-sRGB-linear|Linear-Light sRGB]],
935935
[[#predefined-display-p3|Display P3]],
936+
[[#predefined-display-p3-linear|Linear-Light Display P3]],
936937
[[#predefined-a98-rgb|A98 RGB]],
937938
[[#predefined-prophoto-rgb|ProPhoto RGB]],
938939
[[#predefined-rec2020|ITU-R BT.2020-2]],
@@ -3792,7 +3793,7 @@ Specifying Predefined Colors: the ''color()'' function</h3>
37923793
<dfn>color()</dfn> = color( <<colorspace-params>> [ / [ <<alpha-value>> | none ] ]? )
37933794
<dfn>&lt;colorspace-params></dfn> = [ <<predefined-rgb-params>> | <<xyz-params>>]
37943795
<dfn>&lt;predefined-rgb-params></dfn> = <<predefined-rgb>> [ <<number>> | <<percentage>> | none ]{3}
3795-
<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>
3796+
<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>
37963797
<dfn>&lt;xyz-params></dfn> = <<xyz-space>> [ <<number>> | <<percentage>> | none ]{3}
37973798
<dfn>&lt;xyz-space></dfn> = <l>''xyz''</l> | <l>''xyz-d50''</l> | <l>''xyz-d65''</l>
37983799
</pre>
@@ -3977,7 +3978,7 @@ The Predefined sRGB Color Space: the ''sRGB'' keyword</h3>
39773978
</wpt>
39783979

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

39823983

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

4123+
<h3 id="predefined-display-p3-linear">
4124+
The Predefined Linear-Light Display P3 Color Space: the ''display-p3-linear'' keyword</h3>
4125+
4126+
4127+
The <dfn id='display-p3-linear-space' export>display-p3-linear</dfn> predefined color space
4128+
is the same as ''display-p3''
4129+
<em>except</em> that the transfer function
4130+
is linear-light (there is no gamma-encoding).
4131+
4132+
It has the following characteristics:
4133+
4134+
<table id="prr-color-display-p3-linear">
4135+
<thead><td></td><td>x</td><td>y</td></thead>
4136+
<tr><th>Red chromaticity</th><td>0.680</td><td>0.320</td></tr>
4137+
<tr><th>Green chromaticity</th><td>0.265</td><td>0.690</td></tr>
4138+
<tr><th>Blue chromaticity</th><td>0.150</td><td>0.060</td></tr>
4139+
<tr><th>White chromaticity</th> <td colspan="2">[=D65=]</td></tr>
4140+
<tr><th>Transfer function</th><td colspan="2">unity, see below </td></tr>
4141+
<tr><th>White luminance</th><td colspan="2">80.0 cd/m<sup>2</sup></td></tr>
4142+
<tr><th>Black luminance</th><td colspan="2">0.80 cd/m<sup>2</sup></td></tr>
4143+
<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
4144+
<tr>
4145+
<th>Percentages</th>
4146+
<td colspan="2">Allowed for R, G and B</td>
4147+
</tr>
4148+
<tr>
4149+
<th>Percent reference range&nbsp;</th>
4150+
<td>for R,G,B: 0% = 0.0, 100% = 1.0</td>
4151+
</tr>
4152+
</table>
4153+
4154+
<pre class="lang-javascript">
4155+
cl = c;
4156+
</pre>
4157+
4158+
c is the red, green or blue component.
4159+
cl is the corresponding linear-light component, which is identical.
4160+
4161+
To avoid banding artifacts, a
4162+
<a href="#predefined-precision-table">higher precision is required</a>
4163+
for ''display-p3-linear'' than for ''display-p3''.
4164+
4165+
<div class="example" id="display-p3-linear-swatches">
4166+
For example, these are the same color
4167+
<pre class="lang-css">
4168+
<span class="swatch" style="--color: rgb(64.55% 2.065% 26.03%)"></span> color(display-p3 0.591 0.123 0.264)
4169+
<span class="swatch" style="--color: rgb(64.55% 2.065% 26.03%)"></span> color(display-p3-linear 0.3081 0.014 0.0567)
4170+
</pre>
4171+
</div>
4172+
41224173

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

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

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

47454796
<pre class='prod'>
47464797
<dfn export>&lt;color-space></dfn> = &lt;rectangular-color-space> | &lt;polar-color-space>
4747-
<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>>
4798+
<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>>
47484799
<dfn export>&lt;polar-color-space></dfn> = <l>''hsl''</l> | <l>''hwb''</l> | <l>''lch''</l> | <l>''oklch''</l>
47494800
<dfn export>&lt;hue-interpolation-method></dfn> = [ shorter | longer | increasing | decreasing ] hue
47504801
<dfn export id="color-interpolation-method">&lt;color-interpolation-method></dfn> = in [ <<rectangular-color-space>> | <<polar-color-space>> <<hue-interpolation-method>>? ]
@@ -6705,6 +6756,10 @@ Serializing values of the ''color()'' function</h3>
67056756
<td>''display-p3''</td>
67066757
<td>10</td>
67076758
</tr>
6759+
<tr>
6760+
<td>''display-p3-linear''</td>
6761+
<td>12</td>
6762+
</tr>
67086763
<tr>
67096764
<td>''a98-rgb''</td>
67106765
<td>10</td>

‎css-color-adjust-1/Overview.bs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ Title: CSS Color Adjustment Module Level 1
33
Shortname: css-color-adjust
44
Level: 1
55
Status: ED
6+
Prepare for TR: yes
67
Work Status: testing
78
Group: CSSWG
89
TR: https://www.w3.org/TR/css-color-adjust-1/

‎css-color-hdr-1/Overview.bs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -746,10 +746,38 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
746746
high-chroma (wide color gamut),
747747
self-luminous, and
748748
high intensity (HDR) colors.
749+
749750
This makes it suitable for HDR color difference measurement
750751
<a href="#deltaE">(deltaE ITP)</a>
751752
and for gamut mapping of mixed SDR and HDR colors.
752753

754+
<div class="example" id="ex-DE-ITP">
755+
For example, BT.2020 and BT.2100 use the same primaries and white point.
756+
BT.2020 is SDR, while BT.2100 is HDR
757+
and places HDR reference white at a code value close to 0.58.
758+
759+
Here is a very wide gamut primary red in both color spaces:
760+
761+
<pre class="lang-css">
762+
color(rec2100-pq 0.58 0 0) /* ictcp(44.6% -0.129 0.399) */
763+
color(rec2020 1 0 0) /* ictcp(44.7% -0.130 0.399) */
764+
</pre>
765+
766+
The two colors are clearly very close in ICTCP
767+
and the deltaE ITP is 0.487,
768+
meaning the colors are not visually different.
769+
770+
These colors are very different from sRGB "red":
771+
772+
<pre class="lang-css">
773+
color(rec2100-pq 0.58 0 0) /* ictcp(44.6% -0.129 0.399) */
774+
red /* ictcp(42.8% -0.116 0.279) */
775+
</pre>
776+
777+
the deltaE ITP is 87.7,
778+
meaning the colors are very visually different.
779+
</div>
780+
753781
<h3 id="jaz-intro" class="informative">
754782
Introducing Jzazbz and JzCzhz
755783
</h3>

0 commit comments

Comments
 (0)