Skip to content

Commit 1c103fc

Browse files
svgeesussvgeesus
committed
[css-color-hdr] Added section introducing Jzazbz and JzCzhz, moved definitions from color(). #11713 
1 parent 1b3fcb2 commit 1c103fc

File tree

1 file changed

+146
-121
lines changed

1 file changed

+146
-121
lines changed

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

Lines changed: 146 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -649,6 +649,32 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
649649
<a href="#deltaE">(deltaE ITP)</a>
650650
and for gamut mapping of mixed SDR and HDR colors.
651651

652+
<h3 id="jaz-intro" class="informative">
653+
Introducing Jzazbz and JzCzhz
654+
</h3>
655+
656+
<em>This section is not normative.</em>
657+
658+
The J<sub>z</sub>a<sub>z</sub>b<sub>z</sub> color space [[!Safdar-PUCS]],
659+
and its polar form J<sub>z</sub>C<sub>z</sub>h<sub>z</sub>,
660+
were designed to be more perceptually uniform
661+
for wide gamut colors such as BT.2020,
662+
to accurately predict a wide-range of lightness,
663+
including HDR colors,
664+
and to have minimal inter-dependence
665+
between the perceptual attributes (lightness, chroma, and hue).
666+
In particular it has superior hue uniformity,
667+
compared to CAM16-UCS [[!Safdar-PUCS]].
668+
669+
CIE Lab uses a lightness scale with a [0%, 100%] range,
670+
relative to HDR reference white;
671+
similarly, Oklab uses a lightness scale with a [0, 1.0] range,
672+
again with 1.0 referring to HDR reference white.
673+
In contrast, the J<sub>z</sub> axis in ''Jzazbz'',
674+
which has a [0, 1.0] range,
675+
uses an encoding <em>similar to</em> Perceptual Quantizer,
676+
and can represent a dynamic range of more than 13 stops.
677+
652678
<dfn export>ICtCp</dfn> {#ICtCp}
653679
-----------------
654680

@@ -709,6 +735,126 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
709735
</pre>
710736
</div>
711737

738+
<dfn export>Jzazbz</dfn> {#Jzazbz}
739+
-----------------
740+
741+
The ''Jzazbz'' color space accepts three numeric parameters,
742+
with J<sub>z</sub> representing the Lightness (similar to L in Lab)
743+
while a<sub>z</sub> and b<sub>z</sub> represent the
744+
redness-greenness and yellowness-blueness
745+
opponent-color axes (similar to a and b in Lab).
746+
747+
''Jzazbz'' has the following characteristics:
748+
749+
<table>
750+
<thead><td></td><td>x</td><td>y</td></thead>
751+
<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
752+
<tr><th>Transfer function</th><td colspan="2">Perceptual Quantizer</td></tr>
753+
<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
754+
<tr><th>Black luminance</th><td colspan="2">0.001 cd/m²</td></tr>
755+
<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
756+
<tr>
757+
<th>Percentages</th>
758+
<td colspan="2">Allowed for Jz, az and bz</td>
759+
</tr>
760+
<tr>
761+
<th>Percent reference range</th>
762+
<td>for Jz: 0% = 0.0, 100% = 1.0<br>
763+
for az and bz: -100% = -0.21, 100% = 0.21</td>
764+
</tr>
765+
</table>
766+
767+
Note that unlike Lab, a [=D65=] whitepoint is used.
768+
Thus, for most RGB spaces
769+
(which also use a D65 whitepoint)
770+
no chromatic adaptation step need be performed.
771+
772+
<a href="#jzazbz_code">Sample code</a>
773+
for converting between XYZ-D65 and ''Jzazbz''
774+
is provided.
775+
776+
<div class="example">
777+
This color represents a comfortable "diffuse white"
778+
This color can be displayed for long periods,
779+
or used for subtitles,
780+
on any sized area of the screen.
781+
It is the same color as sRGB ''white''.
782+
Diffuse white is 203 cd/m² [[!Rec_BT.2100]].
783+
<pre>
784+
<span class="swatch" style="--color: white"></span> color(jzazbz 0.22207 -0.00016 -0.00012)
785+
</pre>
786+
</div>
787+
<!--
788+
unclear why az and bz are not zero here. Is this the crosstalk term?
789+
No, it is due to incomplete adaptation. See
790+
https://github.com/color-js/color.js/issues/613#issuecomment-2666872133
791+
-->
792+
793+
<dfn export>JzCzhz</dfn> {#JzCzHz}
794+
-----------------
795+
796+
Similar to LCH, which is the polar representation of Lab,
797+
''JzCzhz'' is the polar form of ''Jzazbz''.
798+
799+
J<sub>z</sub> is identical to the value in ''Jzazbz'' and represents the Lightness,
800+
while C<sub>z</sub> represents the Chroma or colorfulness
801+
and h<sub>z</sub> represents a hue angle,
802+
measured from the positive a<sub>z</sub> axis,
803+
towards the positive b<sub>z</sub> axis.
804+
805+
It has the following characteristics:
806+
807+
<table>
808+
<thead><td></td><td>x</td><td>y</td></thead>
809+
<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
810+
<tr><th>Transfer function</th><td colspan="2">Perceptual Quantizer</td></tr>
811+
<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
812+
<tr><th>Black luminance</th><td colspan="2">0.001 cd/m²</td></tr>
813+
<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
814+
<tr>
815+
<th>Percentages</th>
816+
<td colspan="2">Allowed for Jz and Cz</td>
817+
</tr>
818+
<tr>
819+
<th>Percent reference range</th>
820+
<td>for Jz: 0% = 0.0, 100% = 1.0<br>
821+
for Cz: -100% = -0.26, 100% = 0.26</td>
822+
</tr>
823+
</table>
824+
825+
<div class="example">
826+
This color represents the sRGB color "lime" in ''Jzazbz''
827+
<pre>
828+
<span class="swatch" style="--color: lime"></span> color(jzazbz 0.17542 -0.1179 0.1092)
829+
</pre>
830+
and here is the same color in the polar form
831+
<pre>
832+
<span class="swatch" style="--color: lime"></span> color(jzczhz 0.17542 0.1614 132.50)
833+
</pre>
834+
</div>
835+
836+
<h4 id='Jzazbz-to-JzCzHz'>
837+
Converting ''Jzazbz'' colors to ''JzCzHz'' colors</h4>
838+
839+
Conversion to ''JzCzHz'' is trivial:
840+
841+
<ol>
842+
<li>Hz = atan2(bz, az) // but convert to degrees!
843+
<li>Cz = sqrt(az^2 + bz^2)
844+
<li>Jz is the same
845+
</ol>
846+
847+
<h4 id='JzCzHz-to-Jzazbz'>
848+
Converting JzCzHz colors to Jzazbz colors</h4>
849+
850+
Conversion to ''Jzazbz'' is trivial:
851+
852+
<ol>
853+
<li>az = Cz cos(H) // convert to radians first!
854+
<li>bz = Cz sin(H) // convert to radians first!
855+
<li>Jz is the same
856+
</ol>
857+
712858
<!-- Big Text: color()
713859

714860
███▌ ███▌ █▌ ███▌ ████▌ ██ ██
@@ -1052,128 +1198,7 @@ Predefined color spaces for HDR: {#predefined-HDR}
10521198
</tr>
10531199
</table>
10541200

1055-
<dfn export>Jzazbz</dfn> {#Jzazbz}
1056-
-----------------
1057-
1058-
The ''Jzazbz'' color space [[!Safdar-PUCS]] accepts three numeric parameters,
1059-
with J<sub>z</sub> representing the Lightness (similar to L in Lab)
1060-
while a<sub>z</sub> and b<sub>z</sub> represent the
1061-
redness-greenness and yellowness-blueness
1062-
opponent-color axes (similar to a and b in Lab).
1063-
1064-
CIE Lab uses a lightness scale with a [0%, 100%] range,
1065-
relative to HDR reference white,
1066-
and has been experimentally extended to L=400%.
1067-
In contrast, the J<sub>z</sub> axis in ''Jzazbz'',
1068-
which has a [0, 1.0] range,
1069-
uses an encoding similar to Perceptual Quantizer,
1070-
and can represent a dynamic range of more than 13 stops.
1071-
1072-
It has the following characteristics:
1073-
1074-
<table>
1075-
<thead><td></td><td>x</td><td>y</td></thead>
1076-
<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
1077-
<tr><th>Transfer function</th><td colspan="2">Perceptual Quantizer</td></tr>
1078-
<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
1079-
<tr><th>Black luminance</th><td colspan="2">0.001 cd/m²</td></tr>
1080-
<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
1081-
<tr>
1082-
<th>Percentages</th>
1083-
<td colspan="2">Allowed for Jz, az and bz</td>
1084-
</tr>
1085-
<tr>
1086-
<th>Percent reference range</th>
1087-
<td>for Jz: 0% = 0.0, 100% = 1.0<br>
1088-
for az and bz: -100% = -0.21, 100% = 0.21</td>
1089-
</tr>
1090-
</table>
1091-
1092-
Note that unlike Lab, a [=D65=] whitepoint is used.
1093-
Thus, for most RGB spaces
1094-
(which also use a D65 whitepoint)
1095-
no chromatic adaptation step need be performed.
1096-
1097-
<div class="example">
1098-
This color represents a comfortable "diffuse white"
1099-
This color can be displayed for long periods,
1100-
or used for subtitles,
1101-
on any sized area of the screen.
1102-
It is the same color as sRGB ''white''.
1103-
Diffuse white is 203 cd/m² [[!Rec_BT.2100]].
1104-
<pre>
1105-
<span class="swatch" style="--color: white"></span> color(jzazbz 0.22207 -0.00016 -0.00012)
1106-
</pre>
1107-
</div>
1108-
<!--
1109-
unclear why az and bz are not zero here. Is this the crosstalk term?
1110-
No, it is due to incomplete adaptation. See
1111-
https://github.com/color-js/color.js/issues/613#issuecomment-2666872133
1112-
-->
1113-
1114-
<dfn export>JzCzHz</dfn> {#JzCzHz}
1115-
-----------------
1116-
1117-
Similar to LCH, which is the polar representation of Lab,
1118-
''JzCzHz'' is the polar form of ''Jzazbz''.
1119-
J<sub>z</sub> is identical to the value in ''JzCzHz'' and represents the Lightness,
1120-
while C<sub>z</sub> represents the Chroma or colorfulness
1121-
and H<sub>z</sub> represents a hue angle,
1122-
measured from the positive a<sub>z</sub> axis,
1123-
towards the positive b<sub>z</sub> axis.
1124-
1125-
It has the following characteristics:
1126-
1127-
<table>
1128-
<thead><td></td><td>x</td><td>y</td></thead>
1129-
<tr><th>White chromaticity</th><td colspan="2">[=D65=]</td></tr>
1130-
<tr><th>Transfer function</th><td colspan="2">Perceptual Quantizer</td></tr>
1131-
<tr><th>Peak white luminance</th><td colspan="2">10,000 cd/m²</td></tr>
1132-
<tr><th>Black luminance</th><td colspan="2">0.001 cd/m²</td></tr>
1133-
<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
1134-
<tr>
1135-
<th>Percentages</th>
1136-
<td colspan="2">Allowed for Jz and Cz</td>
1137-
</tr>
1138-
<tr>
1139-
<th>Percent reference range</th>
1140-
<td>for Jz: 0% = 0.0, 100% = 1.0<br>
1141-
for Cz: -100% = -0.26, 100% = 0.26</td>
1142-
</tr>
1143-
</table>
1144-
1145-
<div class="example">
1146-
This color represents the sRGB color "lime" in ''Jzazbz''
1147-
<pre>
1148-
<span class="swatch" style="--color: lime"></span> color(jzazbz 0.17542 -0.1179 0.1092)
1149-
</pre>
1150-
and here is the same color in the polar form
1151-
<pre>
1152-
<span class="swatch" style="--color: lime"></span> color(jzczhz 0.17542 0.1614 132.50)
1153-
</pre>
1154-
</div>
1155-
1156-
<h4 id='Jzazbz-to-JzCzHz'>
1157-
Converting ''Jzazbz'' colors to ''JzCzHz'' colors</h4>
1158-
1159-
Conversion to ''JzCzHz'' is trivial:
1160-
1161-
<ol>
1162-
<li>Hz = atan2(bz, az) // but convert to degrees!
1163-
<li>Cz = sqrt(az^2 + bz^2)
1164-
<li>Jz is the same
1165-
</ol>
1166-
1167-
<h4 id='JzCzHz-to-Jzazbz'>
1168-
Converting JzCzHz colors to Jzazbz colors</h4>
1169-
1170-
Conversion to ''Jzazbz'' is trivial:
11711201

1172-
<ol>
1173-
<li>az = Cz cos(H) // convert to radians first!
1174-
<li>bz = Cz sin(H) // convert to radians first!
1175-
<li>Jz is the same
1176-
</ol>
11771202

11781203

11791204

0 commit comments

Comments
 (0)