Image Color Management

图片色彩管理到底在管什么

同一张图在不同软件、浏览器和屏幕上变色，通常不是图片“坏了”，而是 RGB 数字、色彩配置文件、系统色彩管理和显示器能力没有被同一种规则解释。

1. 先从一个常见问题开始

摄影师、设计师和视频创作者经常遇到：Photoshop 里正常，浏览器里偏艳，手机上更亮，社交平台压缩后又变淡。色彩管理要解决的不是“让颜色更好看”，而是让颜色被正确解释。

核心句：RGB 数字不是颜色。只有配合色彩空间和 Profile，它才对应到真实的色度、白点和亮度响应。
文件

图片带着 RGB 数字

例如 255, 0, 0。数字本身只说明三个通道的比例，不说明这个红到底有多红。

解释

Profile 像说明书

sRGB、Display P3、Adobe RGB 会把同一组 RGB 解释成不同的真实颜色。

输出

屏幕也有自己的性格

系统还要根据显示器 ICC Profile，把目标颜色转换成这台屏幕需要的驱动值。

2. RGB 数字不是颜色

下面用同一组 RGB 数字，在不同色彩空间里解释。你会看到：数值不变，但在 CIE xy 图上的落点不同。P3 与 Adobe RGB 的红/绿原色比 sRGB 更外扩，因此同样的 255 可能代表更饱和的颜色。

这里展示的是“按不同 Profile 解释同一 RGB”。实际屏幕能否显示出来，还取决于显示器色域和浏览器色彩管理。
按所选空间解释
当作 sRGB 解释
RGB(255, 0, 0)
切换色彩空间查看 xy 落点

3. Profile 是图片的说明书

ICC Profile 不是滤镜，也不是调色预设。它是一份机器可读的颜色说明书：告诉软件“这组 RGB 数字如何换算成设备无关颜色”，也告诉系统“这台显示器需要怎样的信号才能发出目标颜色”。

没有 Profile，RGB 只是三个比例数字；有了源 Profile、显示器 Profile 和 CMM，颜色才有机会在不同设备之间保持一致。
Profile 里有什么
  • 色域原色与白点
    说明红、绿、蓝原色和参考白在 CIE 坐标中的位置，例如 sRGB、Display P3、Adobe RGB 的三角形不同。
  • TRC / 响应曲线
    说明 RGB 码值如何变成线性光。sRGB、Adobe RGB、显示器实测响应都可能不同。
  • 转换表或矩阵
    简单矩阵 Profile 用原色矩阵转换；复杂设备 Profile 可能包含 A2B / B2A 查找表。
  • 渲染意图
    当源色域大于目标色域时，告诉 CMM 应该裁切、压缩还是保持相对关系。
谁在用 Profile
  • 图片的嵌入 Profile
    解释文件里的 RGB 数字属于哪个源空间。它描述的是图片，不是屏幕。
  • 显示器 Profile
    由系统、厂商或校色仪提供，描述这台屏幕实际的原色、白点和灰阶响应。
  • CMM
    Color Management Module 负责把源 Profile、目标 Profile、渲染意图串起来，计算最终输出 RGB。
  • 应用软件
    浏览器、Photoshop、预览、视频软件是否调用系统色彩管理，决定链路是否完整。
1. 图片 RGB

文件里的 R/G/B 数值。它们还不是“绝对颜色”。

2. 源 Profile

把 RGB 解释成源空间中的真实颜色。

3. PCS

进入 Profile Connection Space，通常是 D50 适配下的 CIE XYZ 或 Lab。

4. 目标 Profile

显示器、打印机或导出目标空间告诉系统它能表达什么。

5. 输出 RGB

CMM 计算出目标设备需要的通道值，屏幕才真正发光。

为什么需要 PCS？

如果每个设备都直接给另一个设备写转换表，N 个设备之间需要大量两两转换。ICC 用 PCS 做中间语言：源 Profile 负责“RGB → PCS”，目标 Profile 负责“PCS → 设备 RGB”。这样一张 P3 图片、一台 sRGB 显示器、一台打印机都能通过同一个连接空间协作。

可以把 PCS 理解成“颜色中转站”：它不关心设备怎么发光，只关心目标颜色在 CIE 标准观察者下是什么。

缺失或错误 Profile 会发生什么？

缺失 Profile 时，很多现代软件会把图片当作 sRGB；但旧软件、部分转码链路或未色彩管理的环境可能不这样处理。错误 Profile 更危险：RGB 数字没变，但解释规则换了，画面会整体偏艳、偏灰或偏色。

这也是为什么“看起来变色”常常不是调色问题，而是解释规则在某一环断了。

渲染意图：超出目标色域时怎么办

当源颜色超出目标设备能力时，CMM 需要决定如何处理。ICC 规范定义了多种渲染意图，实际软件会根据图像类型和 Profile 支持情况选择。

渲染意图适合场景直观理解
Perceptual 感知照片、复杂图像把整体色域压进目标空间，尽量保持颜色之间的关系。
Relative Colorimetric 相对色度网页、屏幕交付、精确颜色目标空间能显示的颜色尽量不动，超出的颜色裁到边界，白点按目标适配。
Absolute Colorimetric 绝对色度打样、模拟纸白连源白点也尽量模拟出来，常用于印刷软打样。
Saturation 饱和度图表、商业图形优先保持鲜艳，不追求照片般自然。

4. Assign Profile 和 Convert Profile 是两件事

很多颜色事故来自这里：指定 Profile 会改变 RGB 数字的解释方式；转换 Profile 会尽量保持外观，但 RGB 数字会被重算。

如果你把一张 sRGB 图“指定”为 Display P3，颜色会变艳；如果你把它“转换”为 Display P3，外观应尽量保持一致，只是底层 RGB 数字改变。
原始解释
处理后

怎么判断你该用哪个？

颜色看起来错了
通常先检查是否“指定”了错误 Profile。
要交付到另一个空间
例如 P3 图交付网页 sRGB，应该转换 Profile。
不要随手丢弃 Profile
文件小一点，但接收方只能猜你的 RGB。

5. Web 图片为什么容易出问题

Web 长期默认 sRGB。现代浏览器和设备开始支持 Display P3、CSS Color 4 和广色域图片，但图片、CSS 色值、Canvas、视频的处理路径并不完全一样。

正在检测当前浏览器的色域能力。

同样写“红”，含义可能不同

CSS #ff0000sRGB 红
color(display-p3 1 0 0)P3 红

如果当前设备或浏览器不支持 P3，两块可能看起来接近或被映射回 sRGB。

Web 链路的实用规则

普通网页图片：导出 sRGB，并嵌入 Profile。
广色域图片：导出 Display P3，并确认目标平台保留 Profile。
不要把未管理的 P3 屏幕当作“颜色更准”。它只可能更艳。

6. 按用途选择导出策略

色彩管理不是“永远用最大的色域”。正确策略取决于用途、接收方、软件链路和是否能保留 Profile。

最稳妥的原则：编辑可以用大空间，交付必须按目标链路收窄并嵌入 Profile。
用途推荐空间关键动作风险
普通网页 / 社交sRGB转换到 sRGB，嵌入 ICC平台可能重压缩，但兼容性最好
Apple 生态广色域展示Display P3保留 P3 Profile，测试 Safari / Chrome非 P3 设备会映射或裁切
摄影后期母版Adobe RGB / ProPhoto RGB大空间编辑，最终按用途转换直接发给普通用户容易偏色
印刷协作按印厂 ICC / CMYK使用印厂指定 Profile 和软打样自己乱转 CMYK 可能损失更大
HDR / 视频截图按视频链路区分 SDR 图片、HDR 图片和视频帧浏览器、系统和格式支持差异大

7. 外部工具：纯色图片生成器

做色彩管理测试时，纯色色块很有用：你可以生成一张指定 RGB 的图片，再测试不同软件、浏览器和平台是否保留 Profile、是否发生过饱和或裁切。

本页不内嵌生成器。需要生成纯色测试图的用户，可以去工具仓库下载使用。
GitHub 工具

Solid Color Image Generator

MeeeetRain 的纯色图片生成工具，可用于制作颜色测试图、导出纯色色块，并配合本章的 Profile / Web 色彩管理实验。

打开 GitHub 仓库

资料来源