色彩配置文件

色彩配置文件是一组定义图片颜色应如何解释和显示的数据，用来让图片在不同屏幕、浏览器和打印设备上尽量保持一致。

Related workflow terms: 图像格式, 图像质量.

常见色彩配置文件

色彩配置文件的正式名称是 ICC 配置文件，它把图片中的颜色映射到标准色彩空间。与截图和网页图片关系最密切的三种配置文件如下：

sRGB（Standard Red Green Blue，标准红绿蓝）是网页默认的色彩空间，由 HP 和 Microsoft 于 1996 年创建，覆盖约 35% 的可见色谱。所有现代浏览器、操作系统和显示器都支持 sRGB。网页图片未嵌入配置文件时，浏览器会默认按 sRGB 处理。

Display P3 是一种更宽的色域，应用于 Apple 设备（iPhone、iPad 和配备 Retina 显示器的 Mac），也得到越来越多高端显示器的支持。它比 sRGB 多覆盖约 25% 的颜色，能呈现更鲜艳的红色、绿色和橙色。在支持的硬件上，macOS 会以 Display P3 截取屏幕截图。

Adobe RGB 覆盖范围与 Display P3 接近，但更侧重青绿色调，主要用于印刷摄影和印前流程。它与网页截图关系不大，但处理专业相机拍摄的图片时可能会遇到。

理解这些配置文件的关系很重要：Display P3 图片中包含 sRGB 无法表示的颜色。如果不经适当转换就在 sRGB 显示器上显示，超出色域的颜色会被限制，导致色调变暗或偏移。

色彩配置文件为何影响截图

截图会沿用所用显示器的色彩配置文件。现代 Mac 通常使用 Display P3，大多数 Windows 电脑则使用 sRGB。

这会带来一个实际问题：在 Mac 上以 Display P3 截取的图片，放到采用 sRGB 显示器的 Windows 电脑上查看时可能略有不同。P3 中的鲜艳颜色会被压缩到较窄的 sRGB 范围内，画面看起来可能没有原来饱和。

团队在文档、设计评审或客户演示中分享截图时，这种差异容易引起困惑。设计师看到的品牌颜色很鲜艳，而客户在普通显示器上看到的色调可能略有变化。

在服务器上运行无头浏览器的自动截图工具，通常默认以 sRGB 渲染，因此无论操作者使用什么显示设备，输出都比较一致。这种服务器端渲染方式可以避开配置文件不匹配的问题。

色彩配置文件与网页

现代浏览器支持色彩管理，会读取嵌入的 ICC 配置文件，并按当前显示器转换颜色。只要图片嵌入了配置文件，而且浏览器支持色彩管理，Display P3 图片在 P3 和 sRGB 显示器上都能正确显示。

CSS 已支持用于广色域颜色的函数：color(display-p3 1 0.5 0) 可以直接指定 P3 色彩空间中的颜色。开发者也可以用 color-gamut 媒体查询检测用户显示器是否支持广色域，并提供相应素材。

对于大多数网页场景，sRGB 仍是稳妥的默认选择。它得到普遍支持，无需特殊处理，显示效果也可预测。Display P3 等广色域配置文件能在支持的屏幕上带来更丰富的颜色，但需要仔细处理，避免普通显示器出现颜色偏移。

可重复截图评审中的色彩配置文件

多人在不同硬件上检查同一张截图时，色彩配置文件就会成为流程问题。如果一名成员从 P3 Mac 导出广色域截图，另一名成员却在 sRGB 显示器上比较，讨论很快就会变成“为什么我这里看起来不一样”。统一截图和导出规则可以减少这类干扰，让视觉评审结果更可信。

常见问题

• 同一项目混用多种配置文件。 在一个设计或文档中混合 sRGB 与 Display P3 图片，会导致颜色显示不一致。应统一使用一种配置文件，网页内容通常选 sRGB，并转换所有素材以保持一致。
• 优化时移除配置文件。 图片优化工具有时会删除嵌入的 ICC 配置文件来减小体积。如果图片原本采用 Display P3，浏览器会在配置文件消失后把颜色按 sRGB 解释，造成饱和度下降。
• 截图对比时忽略配置文件差异。 在不同硬件上生成截图并做视觉回归测试，可能因配置文件不一致产生误报。应确保所有截图使用相同的色彩配置文件和渲染条件。
• 以为所有显示器颜色都一样。 即使配置文件正确，显示器校准也会不同。在校准过的设计显示器上效果完美的截图，换到笔记本电脑或入门级显示器后可能不同。应采用统一配置文件，并说明色彩准确度也取决于查看者的硬件。