CSS 颜色 HDR 模块 1 级

1. 引言

本节为非规范性内容。

CSS Color 4 为开放 Web 平台引入了广色域（WCG）色彩空间。 这些色彩空间在设计上都是标准动态范围（SDR）色彩空间。 本规范定义了对高动态范围（HDR）支持的扩展。

虽然广色域相关规范已稳定数十年， HDR 标准还不够成熟， 并在过去十年间经历了频繁修订。

1.1. 值定义

本规范遵循 CSS 属性定义约定 （参见 [CSS2]），并采用 值定义语法 （参见 [CSS-VALUES-3]）。 未在本规范中定义的值类型在 CSS Values & Units [CSS-VALUES-3] 中定义。 与其它 CSS 模块结合时，可能会扩展这些值类型的定义。

除了各属性定义中列出的特定值外， 本规范定义的所有属性 也接受 CSS 全局关键字 作为属性值。 为提升可读性，未在每处重复列出。

2. 动态范围控制

2.1. 动态范围的定义

动态范围 指的是亮度在最亮与最暗颜色之间的差值。 动态范围以摄影中的级（stop）为单位衡量。 每增加一级，亮度翻倍。

function DynamicRange (high, low) {
  return Math.log2(high) - Math.log2(low);
  } 

在标准动态范围（SDR）中， 媒体白（即常规白色背景的颜色， 或暗色背景上的白色文字） 是最亮的颜色。

对于 SDR，亮度被视为相对于媒体白的相对值。 增加屏幕亮度并不会改变动态范围， 因为最暗的颜色也会变亮。

在高动态范围（HDR）中， 可显示比媒体白更亮的颜色。 例如，在 HDR 显示器上将媒体白设置为约 200 cd/m² 时， 可能可以显示高光达到 1000 cd/m²。 通常，最亮的颜色只能显示在屏幕的很小区域， 并且持续时间有限。 这是出于能耗和发热的考虑。

对于 HDR，亮度被视为绝对值， 而不是相对于媒体白。 使用更亮的屏幕会增加动态范围， 媒体白的亮度保持不变。

2.2. 引入 Headroom

本节为非规范性内容

HDR 显示器能够产生的亮度等级 差异很大。

峰值白色比媒体白高出的部分 被称为 HDR headroom（HDR 余量）， 其大小取决于媒体白的水平、 用户偏好 以及观看环境。

该余量通常以摄影级（stop）为单位表示。 因此，标准动态范围（SDR） 根据定义，其HDR 余量为 0 级， 因为最亮的白就是媒体白。

Web 平台目前不会 直接暴露显示器的余量水平， 因为它取决于观看环境， 并且实时、非量化的余量信息 可能成为跟踪用户的手段 （例如，检测用户是否移至室外且为晴天）。

并非总是希望 使用全部可用的 HDR 余量。 CSS 提供了一种方式来大致控制 期望的余量大小； 此余量可按元素和时间变化。

2.3. dynamic-range-limit 属性

standard

显示的最高亮度颜色 与媒体白相同，即 CSS 颜色 white。

high

显示的最高峰值亮度 远高于媒体白，即 CSS 颜色 white； 具体水平未指定。

constrained-high

显示的最高峰值亮度 比媒体白略高，即 CSS 颜色 white， 可使 SDR 和 HDR 内容混合显示时更舒适。

body { dynamic-range-limit: standard; }
div.photogrid img { dynamic-range-limit: constrained-high }

2.4. 动态范围限制混合：dynamic-range-limit-mix() 函数

该函数接受两个 dynamic-range-limit 值， 内部将它们转换为高于媒体白的 stop 值， 并根据指定比例混合后调整显示。 实际计算结果不会暴露。

dynamic-range-limit-mix() = dynamic-range-limit-mix( [ <ident> && <percentage [0,100]> ]#)

如果所有百分比之和为 0%，则该函数无效。

2.5. dynamic-range-limit 的计算值

如果指定值为 standard、constrained-high 或 high，则计算值为指定值。

如果指定值为 dynamic-range-limit-mix()，则计算值按以下算法确定：

1. 令 v1, ..., vN 为待混合参数的计算值。

2. 令 p1, ..., pN 为混合百分比，归一化后和为 100%。

3. 定义贡献百分比如下：

   • 令 p1_standard,...,pN_standard 为 standard 在 v1,...,vN 中的百分比

   • 令 p1_constrained_high,...,pN_constrained_high 为 constrained-high 在 v1,...,vN 中的百分比

   • 令 p1_high,...,pN_high 为 high 在 v1,...,vN 中的百分比

4. 按如下方式计算加权和：

   • p_standard=(p1_standard*p1+...+pN_standard*pN)/100。

   • p_constrained_high=(p1_constrained_high*p1+...+pN_constrained_high*pN)/100。

   • p_high=(p1_high*p1+...+pN_high*pN)/100。

5. 如果 p_standard、p_constrained_high 或 p_high 等于 100%，则计算值分别为 standard、constrained-high 或 high。

6. 否则，计算值为 dynamic-range-limit-mix()，其参数为 standard、constrained-high 和 high，按此顺序，百分比分别为 p_standard、p_constrained_high 和 p_high，忽略百分比为 0% 的参数。

dynamic-range-limit-mix(
    high 10%,
    dynamic-range-limit-mix(standard 25%, constrained-high 75%) 20%,
    dynamic-range-limit-mix(constrained-high 10%, high 30%) 20%)

dynamic-range-limit-mix(standard 10%, constrained-high 40%, high 50%)

3. 指定预定义和自定义色彩空间：color() 函数

color() 函数允许在特定的色彩空间中指定颜色（而不是大多数其他颜色函数使用的隐式 sRGB 色彩空间）。

在本规范中，color() 函数被扩展为 除了来自CSS Color 4 § 10. 预定义色彩空间的预定义 SDR 空间和CSS Color 5 § 4 相对颜色语法的相对色彩语法外， 还允许使用HDR 的预定义色彩空间。

其语法如下：

color() = color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> = [<custom-params> | <predefined-rgb-params> | 
  <predefined-polar-params> | <predefined-rectangular-params> | <xyz-params>]
<custom-params> = <dashed-ident> [ <number> | <percentage> | none ]+
<predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-polar-params> = jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none]
<predefined-rectangular-params> = <predefined-rectangular> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | 
  rec2100-pq | rec2100-hlg | rec2100-linear
<predefined-rectangular> = jzazbz | ictcp
<xyz-params> = <xyz> [ <number> | <percentage> | none ]{3}
<xyz> = xyz | xyz-d50 | xyz-d65

4. HDR 预定义色彩空间：

除了 CSS Color 4 定义的SDR 色彩空间外，下列 HDR 色彩空间也被定义，可在 color 函数中使用。

这些新色彩空间值的序列化方式与CSS Color 4 §  15. 序列化 <color> 值中的描述一致。

4.1. rec2100-pq

rec2100-pq [Rec_BT.2100] 色彩空间接受三个数值参数， 分别代表该颜色的红、绿、蓝通道， 每个通道的有效范围为 [0, 1]， 与实际位深（每通道 10 或 12 位）无关。

采用感知量化器（PQ）电光转换函数 [SMPTE-ST-2084]，[Rec_BT.2100]。 PQ 假定参考观看环境下屏幕周围亮度为 5 cd/m²。

ITU Reference 2100 用于 HDR 4k 和 8k 电视。

与 SDR 色彩空间及部分 HDR 色彩空间不同， PQ 值是绝对值而非相对值。

补充一张用对数刻度显示 SDR 和 HDR 动态范围的图

其特性如下： （显示基色与[Rec.2020]相同）：

对于非参考观看环境下的窄范围 PQ 视频， 或 HLG（任何观看环境）， 应使用[Rec_BT.814] 附录中的 PLUGE 测试信号和程序来调整黑位。 对于 CSS 中的 PQ 值（使用宽范围）， 黑色对应码点 0。

 color(rec2100-pq 1.0 1.0 1.0);

 color(rec2100-pq 0.58 0.58 0.58);

 color(rec2100-pq 0.34 0.34 0.34)

补充更多示例，包括 sRGB 红、绿、蓝和 P3 红、绿、蓝的编码。

线性光 RGB 信号到 PQ 编码的转换如下。采用绝对亮度标尺，因此需要用漫反射（媒体）白的亮度对相对亮度进行缩放。PQ 最大可编码值（峰值，小面积白）为 10,000 cd/m²。媒体白为 203 cd/m² [Rpt_BT.2408]。

var Er;      // 红、绿、蓝分量，[0, 1] 为 SDR，[0, 70 左右] 为 HDR
var Yw = 203;  // 漫反射白的绝对亮度，cd/m²
var x = Er * Yw / 10000;   // 峰值白的绝对亮度为 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);

xPQ 是“伽马校正后”（OETF 调整后）的信号 [0, 1]。

PQ 编码值到线性光的转换如下：

var xPQ;      // PQ 编码红、绿、蓝分量，[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;      // 漫反射白的绝对亮度，cd/m²
var Ea = x * 10000;   // 绝对亮度，[0, 10,000]
var Er = x * 10000 / Yw;   // 相对漫反射白的亮度，[0, 70 左右]

4.2. rec2100-hlg

rec2100-hlg [Rec_BT.2100] 色彩空间接受三个数值参数， 分别代表该颜色的红、绿、蓝通道， 每个通道的有效范围为 [0, 1]， 与实际位深（每通道 10 或 12 位）无关。

采用混合对数伽玛（HLG）电光转换函数 [ARIB_STD-B67]，[Rec_BT.2100]。 HLG 可用于各种亮度的显示器， 并适应广泛的观看环境， 用户可控制整体亮度水平。 值 0.75 表示“漫反射”或“媒体”白， 而“18% 反射灰卡”为 0.38。[Rec_BT.2390]。

其特性如下： （显示基色与[Rec.2020]相同）：

对于窄范围 HLG 视频（任何观看环境）， 应使用[Rec_BT.814] 附录 4 中的 PLUGE 测试信号和程序来调整黑位。 对于 CSS 中的 HLG 值（使用宽范围）， 黑色对应码点 0。

补充更多示例

 color(rec2100-hlg 0.75 0.75 0.75);

 color(rec2100-hlg 0.38 0.38 0.38)

线性光 RGB 信号到 HLG 编码的转换如下 [Rec_BT.2390]：

var E;      // 红、绿、蓝分量，[0, 1]
const a = 0.17883277;
const b = 0.28466892;   // 1 - (4 * a)
const c = 0.55991073;   // 0.5 - a * Math.log(4 *a)
// 处理负值
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;
}

Edash 为“伽马校正后”（OETF 调整后）信号。

反向转换（HLG 编码到线性光）如下 [Rec_BT.2390]：

var Edash;      // 编码红、绿、蓝分量，[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;
}

是否补充同页定义的黑位提升 Β？

4.3. rec2100-linear

rec2100-linear [Rec_BT.2100] 色彩空间接受三个数值参数， 分别代表该颜色的红、绿、蓝通道， 每个通道的标称范围为 [0, 1]， 与实际位深（每通道 10 或 12 位）无关。

红、绿、蓝都为 1.0 的颜色 表示 HDR 参考白，其绝对亮度为 203 cd/m²。

color(rec2100-linear 1 1 1)

color(rec2100-linear 9.852 9.852 9.852)

 color(rec2100-linear 1 1 1)

使用线性光电光转换函数。

其特性如下： （显示基色与[Rec.2020]相同）：

4.4. Jzazbz

Jzazbz 色彩空间 [Safdar-PUCS] 接受三个数值参数， 其中 J_z 代表明度（类似 Lab 中的 L）， a_z 和 b_z 分别代表 红-绿和黄-蓝对立色轴（类似 Lab 中的 a 和 b）。

CIE Lab 使用 [0%, 100%] 范围的明度刻度， 相对于媒体白， 并已实验性扩展到 L=400%。 相比之下，Jzazbz 的 J_z 轴范围为 [0, 1.0]， 采用与 PQ 类似的编码， 可表示超过 13 级的动态范围。

其特性如下：

注意，与 Lab 不同，使用的是 D65 白点。 因此对于大多数 RGB 空间 （同样采用 D65 白点）， 无需进行色度适配步骤。

 color(jzazbz 0.22207 -0.00016 -0.00012)

4.5. JzCzHz

类似于 Lab 的极坐标形式 LCH，JzCzHz 是 Jzazbz 的极坐标形式。 J_z 与 JzCzHz 中的值相同，代表明度， C_z 代表色度或色彩度， H_z 代表色相角， 从正 a_z 轴起，朝正 b_z 轴方向计。

 color(jzazbz 0.17542 -0.1179 0.1092)

 color(jzczhz 0.17542 0.1614 132.50)

4.5.1. Jzazbz 颜色到 JzCzHz 颜色的转换

转换到 JzCzHz 极为简单：

1. Hz = atan2(bz, az) // 但要转换为度！
2. Cz = sqrt(az^2 + bz^2)
3. Jz 不变

4.5.2. JzCzHz 颜色到 Jzazbz 颜色的转换

转换到 Jzazbz 也极为简单：

1. az = Cz cos(H) // 先转换为弧度！
2. bz = Cz sin(H) // 先转换为弧度！
3. Jz 不变

4.6. ICtCp

ICtCp 色彩空间被定义为在 [Rec_BT.2100] 中的 Constant Intensity IC_TC_P 信号格式， 接受三个数值参数， 其中 I 表示强度（类似于 Lab 中的 L，但覆盖可达 10,000 cd/m² 的亮度范围）， 而 C_T 与 C_P 分别表示黄-蓝（tritanope）和红-绿（protanope）的对立色轴（分别类似于 Lab 中的 b 和 a）。

它基于人类视觉系统的 LMS 视锥原色； 使用 Hunt-Pointer-Estevez (HPE) 的 XYZ 到 LMS 变换， 并规范化到 D65 白点。 随后应用串扰矩阵， 以减少 BT.2020 RGB 的色域轮廓凹陷， 从而减少插值误差。 串扰还改善了恒定色相线和 JND（刚好可察觉差异）MacAdam 椭圆的一致性。

其特性如下：

尽管 [Rec_BT.2100] 通过从线性光 BT.2100 RGB 的转换来定义 IC_TC_P（见 [Rec_BT.2100]）， 该转换是经由 LMS 进行的，因此任何其他色彩空间也可以通过应用 XYZ 到 LMS 的变换来表示。

注意，与 Lab 不同，这里使用的是 D65 白点。

此外，不同于主要以低强度反射色测试的 Lab， IC_TC_P 已使用高色度、自发光和高强度（HDR）颜色进行测试。 这使其适用于色差测量（deltaE ITP） 以及对 SDR 和 HDR 颜色的色域映射。

 color(ictcp 0.5393 -0.2643 -0.0625)

 color(ictcp 0.58069 0 0)

5. 合成 SDR 与 HDR 内容

合成应当在 CIE XYZ 中进行， 因为它是一个线性光空间且没有色域限制。 实现也可以选择在线性光 RGB 空间中进行合成， 只要正确处理并保留超出色域的值（负值或大于 100% 的值）， 并在最终传送到设备色彩空间之前不执行裁剪或色域映射，结果将相同。

使用 HLG 传输函数的相对 HDR 必须将 SDR 媒体白映射到用于显示 75% HLG 值的相同亮度。 [SMPTE-ST-2084]

更多细节请参见 ITU Rpt_BT.2408-0 的表 3 和表 4 [Rpt_BT.2408]

使用 PQ 传输函数的绝对 HDR 应当将 SDR 媒体白映射到 203 cd/m²， 这与用于显示 58% PQ 值的亮度相同。 [SMPTE-ST-2084] 但是，实施者可以选择加入色彩重渲染步骤（OOTF） 以考虑非参考观看条件。

6. 序列化 <color> 值

6.1. 序列化 color() 函数的值

本节扩展了 CSS Color 4 § 15.5 序列化 color() 函数的值

color() 值的序列化形式 源自 计算值 并使用 color() 形式， 函数名和色彩空间名称使用 ASCII 小写 字母。

组件值以 10 进制序列化， 作为 <number>。 组件值之间以及色彩空间名与第一个颜色分量之间必须使用单个 ASCII 空格字符 " " 作为分隔符。

对于预定义的 HDR 色彩空间， 用于往返（round-tripping）的最小精度如下：

（建议内部存储使用 16bit、half-float 或 float 每分量）。 值必须 向 +∞ 四舍五入，而非截断。

基于 PQ 的色彩空间在不同观看环境中是否需要进行色调映射（OOTF）以便显示？

隐私注意事项

Web 平台不直接暴露 HDR headroom 的数值原因是，暴露这些信息会泄露当前的观看条件，构成对用户的 隐私侵害。

安全注意事项

目前尚未就本文档提出安全方面的关注

可访问性注意事项

部分用户可能对非常明亮的颜色敏感， 因此用户代理应提供一种机制， 允许用户选项限制最大亮度。 建议采用 [Rec_BT.2390] 第 5.4.1 节 Mapping to display with limited brightness range 中的 toe 和 knee 程序作为合适方法。

用户样式表中也可以将 dynamic-range-limit 属性设置为 standard 或 constrained-high。