色域映射详解：色彩空间之间的转换

当你用专业相机拍摄绚烂的日落，然后在网页浏览器中打开时，有些东西消失了。相机宽色域传感器所记录的深邃、饱和的橙色和紫色，无法在每台显示器上都精确再现——即使能够再现，这些颜色也可能无法在转换为网页安全格式的过程中保留下来。这种将存在于一个色彩空间中的颜色调整以适应另一个色彩空间边界的过程，就被称为色域映射。它是整个数字色彩管线中能见度最低却影响最为深远的操作之一，对于任何关心从设计到生产的色彩准确性的人来说，理解它都至关重要。

什么是色域映射？

色域是特定设备、格式或色彩空间所能表示的完整颜色范围。每个色域都有边界——落在边界内的颜色可以被精确表示；超出边界的颜色则无法表示。

不同的设备和色彩空间有着不同的色域：

当你将颜色从较大色域移动到较小色域时，某些颜色可能落在目标色域之外。这些被称为超出色域的颜色。色域映射就是决定如何处理它们的过程。

反向操作——从较小色域移动到较大色域——通常是无损的，因为所有源颜色都能纳入目标范围。在 Display P3 显示器上显示 sRGB 文件，只是使用了该显示器范围的一个子集，无需色域映射。

超出色域颜色的问题

设想一种鲜艳的青色：sRGB 中的 #00FFFF（#00FFFF）。这种颜色接近 sRGB 色域的边缘。在 Display P3 中，有着 sRGB 根本无法表示的更饱和的青色可用。

现在设想你在 Display P3 中设计了一个界面，使用了一种落在 sRGB 之外的鲜艳绿色：大约是 color(display-p3 0.0 0.9 0.3)——一种饱和度明显高于 sRGB 中 #00E84A（#00E84A）的绿色。当用户在标准 sRGB 显示器上查看时，浏览器必须做出判断：应该用哪种 sRGB 颜色来代表这种无法再现的绿色？

这个判断就是色域映射，有几种不同权衡的处理方式。

裁剪与感知压缩

处理超出色域颜色的两种主要策略是裁剪和感知（压缩）映射。

裁剪

裁剪是最简单的方式：超出色域的颜色被直接对齐到色域边界上最近的点。这类似于将 0–1 刻度上的 1.5 值直接设为 1。

对于饱和度超出色域的颜色，裁剪会将饱和度设为目标色域允许的最大值，同时保持亮度和色相不变。结果是：

• 接近边界的颜色：几乎看不出变化
• 远超色域的颜色：色相准确度大幅下降，颜色可能与原色差异显著

裁剪最大的问题是色相偏移。许多超出色域的颜色在裁剪时会产生可感知的色相偏移。鲜艳的绿色可能裁剪为黄绿色；深紫色可能裁剪为蓝色。原始色相无法保留。

裁剪还会产生条带化现象：一系列不同的源颜色全部裁剪到相同的最大饱和度边界点，在渐变或本应连续的平滑色彩过渡中产生可见的阶梯感。

尽管有这些缺点，裁剪在静态图像和 CSS 中仍然常见，因为它的计算量极低。

感知渲染意图（压缩）

感知渲染——有时称为压缩映射——采用不同的方式。它不是只调整超出色域的颜色，而是按比例缩放整个色域。源颜色中最饱和的颜色映射到目标中可用的最饱和颜色，其他所有颜色按比例缩放。

想象一下，你将一幅大画（Display P3 色域）按比例缩小放到一块较小的画布（sRGB 色域）上，而不是进行裁剪。没有颜色被剪掉；所有颜色之间的关系都被保留——只是经过了压缩。

感知压缩的优点： - 平滑渐变保持平滑（无条带化） - 颜色之间的相对关系得到保留 - 对摄影和渐变通常在视觉上更为悦目

缺点： - 色域内的颜色也会被偏移（饱和度略微降低），即使它们本来不需要调整 - 颜色可能看起来比原始颜色略不鲜艳，即使在本可以精确再现的地方

感知渲染意图是印刷和专业摄影工作流程中 ICC 色彩配置文件使用的默认方式。这也是 CSS 色域映射算法所采用的方式。

相对比色（结合黑点补偿）

第三种方式——相对比色——精确映射色域内的颜色，并裁剪超出色域的颜色，同时调整源颜色与目标颜色之间白点的差异。对于超出色域颜色较少的文档，这是一个很好的折衷方案，因为它比感知方式更好地保留了色域内的准确性。

饱和度渲染意图

第四种意图，主要用于商业图表：以牺牲色相准确性换取最大饱和度。用于条形图和饼图，这类场景中鲜艳、独特的颜色比准确的色相再现更重要。

CSS 中的色域映射

CSS 自 CSS Color Level 4 规范以来支持多种色彩空间，色域映射现已内置于 CSS 颜色解析算法中。

在 CSS 中指定宽色域颜色

/* sRGB（传统方式） */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3（宽色域） */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020（超宽色域） */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH（感知均匀，可寻址宽色域颜色） */
color: oklch(0.75 0.25 150);  /* 极鲜艳的绿色——可能超出 sRGB */

CSS 如何处理色域溢出

当 CSS 颜色值寻址的颜色超出显示器色域时，浏览器会应用 CSS Color Level 4 中定义的 CSS 色域映射算法。该算法在 OKLCH 色彩空间中使用二分搜索，以 deltaE 2000（感知色差度量）作为距离度量，找到最相似的色域内颜色。

结果是一种色域映射方式，优先级为： 1. 优先保留亮度（亮度偏移是最容易被感知到的） 2. 其次保留色相 3. 降低色度（饱和度），直到颜色落在目标色域内

与简单的 sRGB 裁剪相比，这是一个显著的改进。CSS 算法对略微超出色域的颜色产生接近感知压缩的结果，而对远超色域的颜色则优雅降级。

color-gamut 媒体查询

CSS 提供了一个媒体查询来检测显示器支持的色域，允许你为不同能力的设备提供不同的颜色：

/* 默认：为所有显示器提供 sRGB 颜色 */
.brand-color {
  color: #22C55E;
}

/* 增强：为支持 P3 的显示器提供更鲜艳的颜色 */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* 超宽色域：为 Rec. 2020 显示器提供最大色彩活力 */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

color-gamut 的三个取值： - srgb — 显示器覆盖约 sRGB 色域（最常见） - p3 — 显示器覆盖约 Display P3 色域（现代 Mac、iPhone、高端 Android） - rec2020 — 显示器覆盖约 Rec. 2020 色域（专业和 HDR 显示器）

OKLCH 与宽色域

OKLCH 特别适合宽色域设计工作，因为高色度值自然地寻址超出 sRGB 的颜色。OKLCH 中色度值超过约 0.37 的颜色，在大多数色相下都会超出 sRGB 色域，落在 Display P3 或更宽的范围内。

/* 在 sRGB 内：鲜艳的绿色 */
color: oklch(0.75 0.22 145);

/* 超出 sRGB，在 Display P3 内：更鲜艳的绿色 */
color: oklch(0.75 0.35 145);

/* 远超 sRGB：浏览器将进行色域映射 */
color: oklch(0.75 0.5 145);

当 OKLCH 颜色超出色域时，CSS 会自动应用其色域映射算法，无需手动处理——浏览器会自行解析。

使用颜色转换器在不同色彩空间之间转换颜色，了解从 sRGB 到 Display P3 再到 OKLCH 的转换过程中值是如何变化的。

面向设计师的实用解决方案

理解色域映射会改变你处理屏幕色彩工作的方式：

1. 在目标色域中进行设计

如果你的产品主要面向各种设备上的网页用户，请在 sRGB 中进行设计。如果你知道受众主要使用现代 Apple 硬件（Mac、iPhone），可以考虑在 Display P3 中设计，并提供 sRGB 降级。

2. 了解你的鲜艳颜色的色域状态

许多在 Figma（在 Apple 硬件上使用 Display P3）中"正常工作"的鲜艳颜色，在导出为 sRGB 用于网页时可能看起来不同。始终使用你明确定义的 CSS 值来验证最终颜色，而不仅仅依赖 Figma 在你屏幕上的渲染效果。

某些在 Display P3 中极为鲜艳的绿色、青色和品红色在 sRGB 中没有等效颜色。如果你的品牌色是 color(display-p3 0.0 0.9 0.3)——一种比任何 sRGB 绿色都更鲜艳的绿色——你需要决定使用什么 sRGB 降级，或者接受 sRGB 用户看到的是不那么鲜艳的版本。

3. 测试跨色域的渐变过渡

两种宽色域颜色之间的渐变在 sRGB 显示器上可能产生条带化，因为在 P3 中看起来有所区别的中间颜色都映射到了相似的 sRGB 值（渐变中间的颜色裁剪）。如果你在渐变中看到条带化，可以尝试：

• 将两个端点的色度降低到 sRGB 安全级别
• 添加中间渐变色标以扩展过渡
• 通过 OKLCH 路由渐变以实现感知均匀的间距

4. 使用正确的导出格式

对于包含宽色域颜色的图像： - JPEG：嵌入色彩配置文件（Display P3 或 Adobe RGB）——浏览器将使用它进行色彩管理 - PNG：同上——嵌入配置文件 - WebP：支持 ICC 配置文件；为准确的色彩嵌入 - SVG：颜色以 CSS 指定——使用 color() 函数表达宽色域

没有嵌入配置文件的图像被假定为 sRGB，并在不进行色域转换的情况下显示。没有嵌入配置文件的宽色域图像在 P3 显示器上看起来会比预期更加失真。

5. 安全的宽色域方式

对于想要更丰富颜色但不想应对管理多个色域目标复杂性的设计师，OKLCH 中等色度值（0.18–0.25）大多保持在 sRGB 范围内，同时在该范围内比典型 RGB 颜色提供稍微更鲜艳的结果。CSS 色域映射会自动处理任何边缘情况。

/* 鲜艳但大体上 sRGB 安全的蓝色 */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

核心要点

• 色域是设备或色彩空间可以表示的颜色范围。sRGB 是网页标准；Display P3 约大 26%，可在现代 Apple 设备和高端设备上使用。
• 超出色域的颜色是落在目标色域之外、无法在该设备上精确再现的颜色——必须采取某种措施将其纳入范围。
• 裁剪将超出色域的颜色对齐到色域边界——速度快，但可能导致色相偏移和条带化。感知压缩按比例缩放整个色域——速度较慢，但保留颜色关系和渐变质量。
• CSS Color Level 4 定义了使用 OKLCH 和 deltaE 2000 的色域映射算法，能够智能地降低色度同时保留亮度和色相——远优于简单的 sRGB 裁剪。
• color-gamut 媒体查询让你能够为支持 P3 的显示器提供更鲜艳的 color(display-p3) 颜色，同时为其他设备保留 sRGB 降级。
• 宽色域设计陷阱：Apple 硬件上的 Figma 默认渲染 Display P3——Figma 中看起来鲜艳的颜色，在导出为 sRGB 用于网页时可能看起来不那么饱和。请始终使用明确的 CSS 值进行验证。
• 使用颜色转换器检查任意颜色在 sRGB、Display P3 和 OKLCH 之间的转换方式，了解其色域状态并找到最接近的色域内等效颜色。