色域和颜色空间

Web 历史概述

CSS 在 1996 年引入 Web 时，大多数计算机显示器都非常糟糕，大多不是高清的。无论是使用 RGB 、HSL 或 HEX （十六进制）定义的颜色，都是在 sRGB 色域内，仅适用于当时的显示器。

现在，大多数新设备都具备广色域显示能力，比如使用 Display P3 色域，甚至还有像 Rec.2020 更大的色域。广色域显示器能够显示比 sRGB 更多的颜色。

CSS 正在努力赶上，例如，CSS 颜色模块 Level 4 规范新增了多个新的颜色函数，它们都允许使用色相、明度和饱和度等属性来指定颜色。新的颜色功能使你能够使用超出 sRGB 色域的更加生动的颜色，因此在支持的显示器屏幕上可以使用更广泛的颜色范围

概念

色域

色域是可以显示的颜色范围，或者说是它可供选择的颜色范围。即一种设备或媒介所能表现的颜色的范围。不同的设备、媒介、颜色模型或者色彩空间可以有不同的色域

img

颜色空间

颜色空间是根据已定义的颜色模型对颜色进行分组的系统。颜色空间提供了一种清晰和一致的方式来描述颜色，同时在转换为不同的颜色空间时保持外观不变

CSS 颜色模块 Level4 规范中引入了 12 种新的颜色空间，它们分别是 sRGB Linear、LCH、OKLCH、 LAB、OKLAB、Display P3、Rec.2020 、a98 RGB、ProPhoto RGB 、XYZ 、XYZ D50 和 XYZ D65 等

img

区别

色域与颜色空间之间的差别就是：

  • 使用色域来描述颜色范围，例如低范围或窄色域与高范围或宽色域等。
  • 使用色彩空间来讨论颜色的排列方式、用于指定颜色的语法、颜色的处理以及颜色的插值等。

CSS 的颜色空间

img

Display P3

Display P3 是一种广色域颜色空间，用于显示器和其他电子设备上的显示。它使用一种相对较宽的色域，可以显示比标准 sRGB 颜色空间更多的颜色，从而提供了更高的动态范围、更好的色彩深度和更准确的颜色。Display P3 最初由苹果公司在其 iMac 设备中引入，并迅速在许多其他电子设备中得到使用，尤其是一些支持 HDR 技术的电视和显示器

.display-p3-colors {
    --percents: color(display-p3 34% 58% 73%);
    --decimals: color(display-p3 .34 .58 .73);

    --percent-opacity: color(display-p3 34% 58% 73% / 50%);
    --decimal-opacity: color(display-p3 .34 .58 .73 / .5);
}

Rec.2020

Rec.2020 是一种 ITU-R 建议规范，它是超高清电视（UHDTV）的一部分，也是一种广色域颜色空间标准。它是根据电视和视频技术需求而开发的，旨在提供比传统的 sRGB 和 Rec.709 色彩空间更高的动态范围和更丰富的显示颜色。Rec.2020 的色域比 sRGB 和 Rec.709 更广，可以呈现更多的红色、绿色和蓝色的颜色。由于 Rec.2020 可以呈现更高的动态范围和更全面的色彩，它是许多高端电视和显示器以及视频产业中广泛使用的颜色空间标准。同时，Rec.2020 也是许多 4K 和 8K 电视、监视器和摄像机的主要颜色空间标准之一。

.rec2020-colors {
    --percents: color(rec2020 34% 58% 73%);
    --decimals: color(rec2020 .34 .58 .73);

    --percent-opacity: color(rec2020 34% 58% 73% / 50%);
    --decimal-opacity: color(rec2020 .34 .58 .73 / .5);
}

A98 RGB

A98 RGB 是一种颜色空间，也称为 Adobe RGB（1998）色彩空间，由 Adobe Systems 于 1998 年推出并得到广泛应用，主要用于数字摄影、出版和印刷行业中的颜色管理。与 sRGB 相比，A98 RGB 可以呈现更广泛的颜色范围，尤其是在红色和绿色方向上，提供更高的色彩深度和更准确的颜色显示。A98 RGB 是一个较大的颜色空间，其色域比 sRGB 更广，但比 DCI-P3 和 Rec.2020 色域更小。它通常用于印刷行业中，其中颜色准确性和细节非常重要，但在数字媒体中的应用相对较少。

.a98-rgb-colors {
    --percents: color(a98-rgb 34% 58% 73%);
    --decimals: color(a98-rgb .34 .58 .73);

    --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
    --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
}

ProPhoto RGB

ProPhoto RGB 是一种广泛使用于数字摄影和印刷行业的颜色空间，它具有非常广泛的色域，可以展示大多数 RGB 颜色。它在色彩范围方面比其他常见的颜色空间（如 sRGB 和 Adobe RGB）更广，因此更适合于高质量的数字图像处理，可以呈现更微妙的色调和更丰富的颜色。ProPhoto RGB 常用于数字摄影，因为它可以捕捉相机所能看到的最广泛的色域，同时在后期处理和打印时提供更大的灵活性。但是，由于其色域过大，可能有一部分颜色会在转换为更小的颜色空间时丢失，因此需要进行谨慎处理和管理。

.prophoto-rgb-colors {
    --percents: color(prophoto-rgb 34% 58% 73%);
    --decimals: color(prophoto-rgb .34 .58 .73);

    --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
    --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
}

XYZ, XYZ-d50, XYZ-d65

XYZ 是一种基于 CIE1931 标准观察者模型的颜色空间，被认为是一种“参考空间”，通常用于计算和处理其他颜色空间中的颜色。XYZ 空间不是基于某种物理测量，而是基于人眼对颜色的感知，并将其定义为一组基色的线性组合。

XYZ-D50 和 XYZ-D65 都是基于 XYZ 颜色空间的变体，它们使用不同的白点进行标准化。XYZ-D50 使用标准照明条件下的 D50 白点（即日光色温为 5000K ），而 XYZ-D65 使用标准照明条件下的 D65 白点（即日光色温为 6500K）。

注意，白点是颜色空间的属性，表示真正的白色在该空间内存在的位置。对于电子屏幕而言，D65 是最常见的白点，它代表摄氏 6500 度的色温。在颜色转换中，白点的匹配非常重要，以避免温暖或寒冷的色温影响。

.xyz-colors {
    --percents: color(xyz 22% 26% 53%);
    --decimals: color(xyz .22 .26 .53);

    --percent-opacity: color(xyz .22 .26 .53 / 50%);
    --decimal-opacity: color(xyz .22 .26 .53 / .5);
}

.xyz-d50-colors {
    --percents: color(xyz-d50 22% 26% 53%);
    --decimals: color(xyz-d50 .22 .26 .53);

    --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
    --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
}
  
.xyz-d65-colors {
    --percents: color(xyz-d65 22% 26% 53%);
    --decimals: color(xyz-d65 .22 .26 .53);

    --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
    --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
}

自定义颜色空间

CSS 颜色模块 Level5 规范还提供了一种教浏览器如何使用自定义颜色空间的方法。这是一个 ICC 配置文件，告诉浏览器如何解析颜色。

@color-profile --foo {
    src: url(./custom.icc); /* 用户自定义颜色数据，即颜色空间配置文件 */
}

加载后，可以使用 color() 函数访问此自定义配置文件中的颜色，并指定其通道值。

.custom-color-spaces {
    background: color(--foo 1 0 0);
}

总结

颜色空间优点缺点
LAB感知一致的渐变高动态范围可能存在色相变化在阅读值时，很难手工编写或猜测颜色
LCH由于是感知线性的（大多数情况下），颜色处理可预测使用熟悉的通道具有允满活力的渐变容器超出色域在极少情况下，渐变可能需要中间点进行调整，以防止色相移动
OKLCH处理蓝色和紫色色调更出色感知线性的亮度使用熟悉的通道高动态范围容器超出色域新的和相对未被探索的仅有少数颜色选择器
OKLAB可以提供更好的渐变和插值效果感知线性的亮度不像 LAB 那样存在色相移动感知一致的渐变新的和相对未探索的仅有少数颜色选择器
Display P3极好的支持，被认为是 HDR 显示器的基线比 sRGB 多 50％ 的颜色DevTools 提供了一个优秀的颜色选择器最终会被 Rec.2020 和 CIE 空间超越
Rec2020具备超高清颜色尚未在消费者中普及在手持设备或平板电脑中不常见
A98 RGB颜色空间比 sRGB ，但比 DCI-P3 和 Rec.2020 色域更小数字设计师中使用的空间相对较少没有很多人将调色板从 CMYK 转换过来使用
ProPhoto RGB颜色空间的色域范围是当前已知 RGB 颜色空间中最宽的能够显示人眼可见的大多数颜色高精度和详细的颜色还原改变亮度时具有最小的色调变化原色鲜艳大约 13％ 所提供的颜色是虚构的，意味着它们不在人类可见的光谱范围内没有被应用程序广泛支持在共享或在较小的色域空间中显示图像时可能会引起兼容性问题
XYZ, XYZ-d50, XYZ-d65线性光的访问具有方便的用途适用于物理颜色混合不像 LCH、OKLCH、LAB 和 OKLAB那样具有感知上的线性属性
自定义颜色空间更准确的颜色呈现更大的独立性浏览器支持不足颜色空间的复杂性

兼容性

如果想只对拥有相应颜色空间的设备使用 color() 语法，而没有的设置优雅降级，可以使用以下方式

:root {
  --hotpink: hotpink;
}

/* 查询的是硬件是否支持 p3 */
@media (color-gamut: p3) {
    :root {
        --hotpink: color(display-p3 1 0 0.87);
    }
}

body {
    background-color: var(--hotpink);
}

如果还想同时检测设备是否支持 color 函数，则可以将 @supports 和 @media 结合起来使用：

:root {
    --hotpink: hotpink;
}

@supports (color: color(display-p3 1 1 1)){
    @media (color-gamut: p3) {
        :root {
            --hotpink: color(display-p3 1 0 0.87);
        }
    }
}

body {
    background-color: var(--hotpink);
}

例子：

最近更新:
Contributors: kingmusi