色彩空间基础 - 理解 sRGB、Display P3 与 Adobe RGB 的区别
什么是色彩空间 - 数字图像中的色彩定义
色彩空间是用数值表示颜色的坐标系统。人眼可感知的颜色范围非常广泛，但数字设备只能再现其中的一个子集。色彩空间定义了"哪些颜色可以被表示"以及"如何用数值表示这些颜色"。
色彩空间的三个核心要素：
- 色域 (Gamut)：可表示的颜色范围。在 CIE 色度图上通常表示为三角形区域
- 白点 (White Point)：定义"白色"的标准。D65 (6500K 日光) 是最常用的白点
- 传递函数 (Transfer Function)：数值与实际亮度之间的映射关系，即 gamma 曲线
为什么需要多种色彩空间：
不同的应用场景对色彩的需求不同。Web 浏览需要跨设备一致性 (sRGB)，印刷需要覆盖 CMYK 色域 (Adobe RGB)，而现代显示器能够显示更广的色域 (Display P3)。选择合适的色彩空间是确保颜色在目标媒介上正确呈现的前提。
色彩管理的基本原则：
色彩管理通过 ICC 配置文件描述设备的色彩特性，在不同设备间进行准确的颜色转换。源配置文件描述图像的色彩空间，目标配置文件描述输出设备的能力，色彩管理引擎负责在两者之间进行映射。
色彩空间 (Color Space) 的定义：色彩空间是用数值表达颜色的坐标系。所有色彩空间都可以在 CIE 1931 色度图上以三角形的形式可视化 —— 三角形的顶点是三原色 (红、绿、蓝) 的坐标，面积越大，可表达的颜色范围 (色域) 越广。即使 RGB 数值相同 (例如 R=200, G=50, B=50)，在不同色彩空间中实际显示出的颜色也不同：因为每个色彩空间把原色定义在不同的坐标上，对颜色的解释在根本上就不一样。
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 是最安全的选择，可以确保所有用户看到一致的颜色。
色域范围与位深：sRGB 的色域约覆盖 CIE 1931 色度图的 35%，在三个主要色彩空间中范围最窄。其伽玛曲线把更多的位分配给暗部层次，因此即使在 8 位 (256 级) 这样有限的数据量下，也能得到自然的明暗表现。
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，导致部分颜色失真。
设备与浏览器的支持现状：截至 2024 年，iPhone、iPad、MacBook Pro 以及大多数最新的 Android 旗舰机都已支持 Display P3。Web 浏览器也通过 CSS Color Level 4 规范支持 P3 色彩空间，可以用 color(display-p3 1 0.5 0) 这样的写法直接指定 P3 的颜色。图像方面，推荐把 <picture> 元素与 type 属性组合起来，对嵌入 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 位模式下进行转换
- 多次转换会累积误差，应尽量减少转换次数
实用建议：
- 编辑时使用尽可能广的色彩空间 (如 ProPhoto RGB 或 Adobe RGB)
- 仅在最终输出时转换到目标色彩空间
- 始终嵌入 ICC 配置文件，确保颜色被正确解释
- Web 输出统一转换为 sRGB (或在支持的场景下使用 Display P3)
渲染意图：在不同色彩空间之间转换图像时，会遇到「色域外的颜色如何处理」的问题，其处理方式称为渲染意图，主要有 4 种。「知觉 (Perceptual)」在保持整体色彩关系的同时把颜色收进色域内，适合照片；「相对比色 (Relative Colorimetric)」保持色域内的颜色不变，只把色域外的颜色映射到色域内最接近的颜色。从 sRGB 转换到 Display P3 属于「窄色域→广色域」，不会发生信息损失；反之从 P3 转到 sRGB 时，只有 P3 才能表现的鲜艳颜色可能丢失。
Web 开发者的色彩空间实践管理
以下是在 Web 开发中正确管理色彩空间的实用指南。基本原则是统一网站中所有图像的色彩空间。当不同色彩空间的图像混合显示时，颜色一致性会被破坏。
图像处理工作流：
- 确认源图像的色彩空间 (检查 ICC 配置文件)
- 在适当的色彩空间中进行编辑
- Web 输出时转换为 sRGB 并嵌入 ICC 配置文件
- 如果目标用户设备支持 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 配置文件
CSS 与构建流程的实践：2024 年以后的现代浏览器可以在 CSS 中直接使用 P3 色彩空间，推荐写成带回退的形式 —— color: rgb(255, 50, 50); 作为 sRGB 回退，color: color(display-p3 1 0.2 0.2); 面向支持 P3 的设备；也可以用 @supports (color: color(display-p3 1 1 1)) 检测 P3 支持并按条件应用样式。图像则用 <picture> 元素区分投递 P3 版与 sRGB 版最为可靠。导出图像时，Photoshop 的「存储为 Web 所用格式」与 Figma 的导出功能会自动转换为 sRGB；在构建流程中使用 sharp 库时，可用 .toColorspace('srgb') 显式转换，或选择直接以 P3 投递。