色彩空间基础 - 理解 sRGB、Display P3 与 Adobe RGB 的区别

什么是色彩空间 - 数字图像中的色彩定义

色彩空间是用数值表示颜色的坐标系统。人眼可感知的颜色范围非常广泛,但数字设备只能再现其中的一个子集。色彩空间定义了"哪些颜色可以被表示"以及"如何用数值表示这些颜色"。

色彩空间的三个核心要素:

• 色域 (Gamut): 可表示的颜色范围。在 CIE 色度图上通常表示为三角形区域
• 白点 (White Point): 定义"白色"的标准。D65 (6500K 日光) 是最常用的白点
• 传递函数 (Transfer Function): 数值与实际亮度之间的映射关系,即 gamma 曲线

为什么需要多种色彩空间:

不同的应用场景对色彩的需求不同。Web 浏览需要跨设备一致性 (sRGB),印刷需要覆盖 CMYK 色域 (Adobe RGB),而现代显示器能够显示更广的色域 (Display P3)。选择合适的色彩空间是确保颜色在目标媒介上正确呈现的前提。

色彩管理的基本原则:

色彩管理通过 ICC 配置文件描述设备的色彩特性,在不同设备间进行准确的颜色转换。源配置文件描述图像的色彩空间,目标配置文件描述输出设备的能力,色彩管理引擎负责在两者之间进行映射。

sRGB - Web 标准色彩空间

sRGB (Standard RGB) 是 HP 和 Microsoft 于 1996 年联合开发的色彩空间,是现代 Web 的事实标准。CSS 颜色规范、HTML 图像显示和浏览器渲染默认都在 sRGB 空间中工作。

sRGB 的特性:

• 色域: 覆盖 CIE 色度图约 35% 的面积,是最小的常用色彩空间
• 白点: D65 (6500K)
• Gamma: 约 2.2 (实际使用分段函数,低端为线性)
• 位深: 通常 8 位/通道 (0-255)

sRGB 的优势:

• 几乎所有设备都支持,兼容性最好
• Web 浏览器默认色彩空间,无需额外配置
• 文件不嵌入 ICC 配置文件时默认按 sRGB 解释
• 色彩一致性高,不同设备间差异最小

sRGB 的局限:

• 色域较窄,无法表示高饱和度的青色和绿色
• 现代显示器 (特别是 OLED) 的能力远超 sRGB
• 印刷中某些 CMYK 颜色超出 sRGB 色域

Web 开发中的 sRGB:

CSS 中的 rgb()、hsl()、HEX 颜色值默认都是 sRGB。对于大多数 Web 项目,统一使用 sRGB 是最安全的选择,可以确保所有用户看到一致的颜色。

Display P3 - 下一代 Web 广色域

Display P3 是 Apple 于 2015 年在 iMac 5K 中首次采用的广色域色彩空间。基于 DCI-P3 (电影行业标准),将白点修改为 D65 (与 sRGB 相同)。色域比 sRGB 大约 25%,特别是在红色和绿色区域有显著扩展。

Display P3 的特性:

• 色域: 比 sRGB 大约 25%,红色和绿色方向扩展明显
• 白点: D65 (与 sRGB 相同,便于转换)
• Gamma: 与 sRGB 相同的传递函数
• 设备支持: iPhone、iPad、Mac、部分 Android 旗舰机

CSS 中使用 Display P3:

color: color(display-p3 1 0 0); /* P3 红色,比 sRGB 红更鲜艳 */

使用 @media (color-gamut: p3) 媒体查询检测设备是否支持 P3 色域,为支持的设备提供更鲜艳的颜色。

渐进增强策略:

由于并非所有设备都支持 P3,应采用渐进增强方式: 先定义 sRGB 回退色,再用 @supports 或媒体查询覆盖为 P3 颜色。这样不支持 P3 的设备仍能正常显示。

图像中的 P3:

iPhone 拍摄的照片默认使用 Display P3 色彩空间。在 Web 上显示时,如果浏览器支持色彩管理,会正确显示 P3 色域的鲜艳颜色;不支持的浏览器会将其裁切到 sRGB,导致部分颜色失真。

Adobe RGB - 印刷工作流色彩空间

Adobe RGB 由 Adobe Systems 于 1998 年开发,目标是覆盖 CMYK 印刷可再现的大部分颜色。色域比 sRGB 大约 35%,特别是在青绿色区域有显著优势。

Adobe RGB 的特性:

• 色域: 比 sRGB 大约 35%,青色和绿色方向扩展最大
• 白点: D65
• Gamma: 2.2 (简单幂函数,无分段)
• 主要用途: 印刷工作流、专业摄影

Adobe RGB 与印刷的关系:

CMYK 印刷的色域形状与 RGB 色彩空间不同。Adobe RGB 的设计目标是尽可能覆盖 CMYK 可再现的颜色,使得从 Adobe RGB 转换到 CMYK 时的色域外颜色最少。这对于需要精确色彩还原的商业印刷至关重要。

使用场景:

• 商业印刷品的图像编辑和输出
• 专业摄影师的 RAW 处理工作流
• 需要保留最大色彩信息的存档用途

Web 上的 Adobe RGB:

Adobe RGB 图像直接用于 Web 时,如果浏览器不进行色彩管理转换,颜色会显得暗淡失真。Web 发布前必须将 Adobe RGB 图像转换为 sRGB 或 Display P3。未嵌入 ICC 配置文件的 Adobe RGB 图像会被错误地按 sRGB 解释,导致严重的色彩偏差。

色彩空间转换与重要注意事项

在不同色彩空间之间转换图像时,会面临如何处理超出目标色域的颜色的问题。这种处理方式称为渲染意图 (Rendering Intent),有四种标准方式。

四种渲染意图:

• 感知 (Perceptual): 压缩整个色域使所有颜色都落入目标范围,保持颜色间的相对关系。适合照片
• 相对色度 (Relative Colorimetric): 色域内的颜色保持不变,色域外的颜色裁切到最近的可表示颜色。适合精确色彩匹配
• 饱和度 (Saturation): 优先保持颜色的鲜艳度。适合商业图表和演示文稿
• 绝对色度 (Absolute Colorimetric): 类似相对色度,但不调整白点。用于打样模拟

转换时的信息损失:

• 从广色域转换到窄色域时,超出部分的颜色信息不可逆地丢失
• 8 位图像在转换过程中可能出现色带,建议在 16 位模式下进行转换
• 多次转换会累积误差,应尽量减少转换次数

实用建议:

1. 编辑时使用尽可能广的色彩空间 (如 ProPhoto RGB 或 Adobe RGB)
2. 仅在最终输出时转换到目标色彩空间
3. 始终嵌入 ICC 配置文件,确保颜色被正确解释
4. Web 输出统一转换为 sRGB (或在支持的场景下使用 Display P3)

カラーマネジメントの専門書は Amazon でも入手できます

Web 开发者的色彩空间实践管理

以下是在 Web 开发中正确管理色彩空间的实用指南。基本原则是统一网站中所有图像的色彩空间。当不同色彩空间的图像混合显示时,颜色一致性会被破坏。

图像处理工作流:

1. 确认源图像的色彩空间 (检查 ICC 配置文件)
2. 在适当的色彩空间中进行编辑
3. Web 输出时转换为 sRGB 并嵌入 ICC 配置文件
4. 如果目标用户设备支持 P3,可以提供 P3 版本作为增强

CSS 色彩函数:

• rgb() / hsl(): sRGB 空间
• color(display-p3 r g b): Display P3 空间
• oklch(L C H): 感知均匀色彩空间,适合生成色阶
• color(rec2020 r g b): Rec.2020 超广色域

图像格式与色彩空间:

• JPEG: 支持嵌入 ICC 配置文件,通常为 sRGB
• PNG: 支持 iCCP 和 sRGB 块
• WebP: 支持 ICC 配置文件嵌入
• AVIF: 原生支持广色域和 HDR

常见问题排查:

• 图像颜色暗淡: 可能是 Adobe RGB 图像未转换就用于 Web
• 颜色过于鲜艳: 可能是 P3 图像在不支持色彩管理的浏览器中显示
• 不同浏览器颜色不一致: 检查是否嵌入了 ICC 配置文件