Image Color Management

图片色彩管理到底在管什么What does image color management actually manage?

同一张图在不同软件、浏览器和屏幕上变色，通常不是图片"坏了"，而是 RGB 数字、色彩配置文件、系统色彩管理和显示器能力没有被同一种规则解释。When the same image shifts color across different apps, browsers, and screens, it's usually not that the image is "broken" — it's that the RGB numbers, the color profile, the system's color management, and the monitor's capability weren't all interpreted by the same rules.

1. 先从一个常见问题开始1. Start with a common problem

摄影师、设计师和视频创作者经常遇到：Photoshop 里正常，浏览器里偏艳，手机上更亮，社交平台压缩后又变淡。色彩管理要解决的不是"让颜色更好看"，而是让颜色被正确解释。Photographers, designers, and video creators hit this constantly: fine in Photoshop, too saturated in the browser, brighter on the phone, washed out after a social platform recompresses it. Color management isn't about "making colors prettier" — it's about getting colors interpreted correctly.

核心句：RGB 数字不是颜色。只有配合色彩空间和 Profile，它才对应到真实的色度、白点和亮度响应。Key sentence: RGB numbers aren't a color. Only together with a color space and a profile do they map to real chromaticity, white point, and tone response.
文件File

图片带着 RGB 数字An image carries RGB numbers

例如 255, 0, 0。数字本身只说明三个通道的比例，不说明这个红到底有多红。Like 255, 0, 0. The numbers alone only state the ratio of the three channels, not how red this red actually is.

解释Interpret

Profile 像说明书A profile is like an instruction sheet

sRGB、Display P3、Adobe RGB 会把同一组 RGB 解释成不同的真实颜色。sRGB, Display P3, and Adobe RGB interpret the same RGB into different real colors.

输出Output

屏幕也有自己的性格The screen has its own personality too

系统还要根据显示器 ICC Profile，把目标颜色转换成这台屏幕需要的驱动值。The system also uses the monitor's ICC profile to convert the target color into the drive values this particular screen needs.

2. RGB 数字不是颜色2. RGB numbers aren't a color

下面用同一组 RGB 数字，在不同色彩空间里解释。你会看到：数值不变，但在 CIE xy 图上的落点不同。P3 与 Adobe RGB 的红/绿原色比 sRGB 更外扩，因此同样的 255 可能代表更饱和的颜色。Below, the same RGB numbers are interpreted in different color spaces. You'll see the values stay the same but land at different points on the CIE xy chart. P3 and Adobe RGB's red/green primaries reach further out than sRGB's, so the same 255 can mean a more saturated color.

这里展示的是"按不同 Profile 解释同一 RGB"。实际屏幕能否显示出来，还取决于显示器色域和浏览器色彩管理。This shows "interpreting the same RGB under different profiles". Whether your screen can actually display it still depends on the monitor's gamut and the browser's color management.
按所选空间解释As the chosen space
当作 sRGB 解释As sRGB
RGB(255, 0, 0)
切换色彩空间查看 xy 落点Switch color space to see the xy point

3. Profile 是图片的说明书3. A profile is the image's instruction sheet

ICC Profile 不是滤镜，也不是调色预设。它是一份机器可读的颜色说明书：告诉软件"这组 RGB 数字如何换算成设备无关颜色"，也告诉系统"这台显示器需要怎样的信号才能发出目标颜色"。An ICC profile isn't a filter or a grading preset. It's a machine-readable color instruction sheet: it tells software "how this set of RGB numbers converts to a device-independent color", and tells the system "what signal this monitor needs to emit the target color".

没有 Profile，RGB 只是三个比例数字；有了源 Profile、显示器 Profile 和 CMM，颜色才有机会在不同设备之间保持一致。Without a profile, RGB is just three ratio numbers; with a source profile, a monitor profile, and a CMM, colors have a chance to stay consistent across devices.
Profile 里有什么What's in a profile
  • 色域原色与白点Gamut primaries and white point
    说明红、绿、蓝原色和参考白在 CIE 坐标中的位置，例如 sRGB、Display P3、Adobe RGB 的三角形不同。States where the red, green, blue primaries and reference white sit in CIE coordinates — sRGB, Display P3, and Adobe RGB triangles differ, for example.
  • TRC / 响应曲线response curve
    说明 RGB 码值如何变成线性光。sRGB、Adobe RGB、显示器实测响应都可能不同。States how RGB code values become linear light. sRGB, Adobe RGB, and a monitor's measured response can all differ.
  • 转换表或矩阵Conversion tables or matrices
    简单矩阵 Profile 用原色矩阵转换；复杂设备 Profile 可能包含 A2B / B2A 查找表。Simple matrix profiles convert with a primaries matrix; complex device profiles may contain A2B / B2A lookup tables.
  • 渲染意图Rendering intent
    当源色域大于目标色域时，告诉 CMM 应该裁切、压缩还是保持相对关系。When the source gamut is larger than the target, it tells the CMM whether to clip, compress, or preserve relative relationships.
谁在用 ProfileWho uses the profile
  • 图片的嵌入 ProfileThe image's embedded profile
    解释文件里的 RGB 数字属于哪个源空间。它描述的是图片，不是屏幕。Interprets which source space the file's RGB numbers belong to. It describes the image, not the screen.
  • 显示器 ProfileThe monitor profile
    由系统、厂商或校色仪提供，描述这台屏幕实际的原色、白点和灰阶响应。Provided by the system, vendor, or a calibration probe; describes this screen's actual primaries, white point, and grayscale response.
  • CMM
    Color Management Module 负责把源 Profile、目标 Profile、渲染意图串起来，计算最终输出 RGB。The Color Management Module ties the source profile, target profile, and rendering intent together to compute the final output RGB.
  • 应用软件The application
    浏览器、Photoshop、预览、视频软件是否调用系统色彩管理，决定链路是否完整。Whether the browser, Photoshop, Preview, or a video app calls the system's color management decides whether the pipeline is complete.
1. 图片 RGB1. Image RGB

文件里的 R/G/B 数值。它们还不是"绝对颜色"。The R/G/B values in the file. They aren't an "absolute color" yet.

2. 源 Profile2. Source profile

把 RGB 解释成源空间中的真实颜色。Interprets the RGB into a real color in the source space.

3. PCS

进入 Profile Connection Space，通常是 D50 适配下的 CIE XYZ 或 Lab。Enters the Profile Connection Space, usually CIE XYZ or Lab under D50 adaptation.

4. 目标 Profile4. Target profile

显示器、打印机或导出目标空间告诉系统它能表达什么。The monitor, printer, or export target space tells the system what it can express.

5. 输出 RGB5. Output RGB

CMM 计算出目标设备需要的通道值，屏幕才真正发光。The CMM computes the channel values the target device needs, and only then does the screen actually light up.

为什么需要 PCS？Why is a PCS needed?

如果每个设备都直接给另一个设备写转换表，N 个设备之间需要大量两两转换。ICC 用 PCS 做中间语言：源 Profile 负责"RGB → PCS"，目标 Profile 负责"PCS → 设备 RGB"。这样一张 P3 图片、一台 sRGB 显示器、一台打印机都能通过同一个连接空间协作。If every device wrote a conversion table straight to every other device, N devices would need a huge number of pairwise conversions. ICC uses the PCS as an intermediate language: the source profile handles "RGB → PCS", the target profile handles "PCS → device RGB". This way a P3 image, an sRGB monitor, and a printer can all cooperate through one connection space.

可以把 PCS 理解成"颜色中转站"：它不关心设备怎么发光，只关心目标颜色在 CIE 标准观察者下是什么。Think of the PCS as a "color transit hub": it doesn't care how a device emits light, only what the target color is under the CIE standard observer.

缺失或错误 Profile 会发生什么？What happens with a missing or wrong profile?

缺失 Profile 时，很多现代软件会把图片当作 sRGB；但旧软件、部分转码链路或未色彩管理的环境可能不这样处理。错误 Profile 更危险：RGB 数字没变，但解释规则换了，画面会整体偏艳、偏灰或偏色。With a missing profile, many modern apps assume sRGB; but older software, some transcoding pipelines, or non-color-managed environments may not. A wrong profile is more dangerous: the RGB numbers don't change, but the interpretation rule does, so the whole image skews saturated, grey, or off-hue.

这也是为什么"看起来变色"常常不是调色问题，而是解释规则在某一环断了。This is why "it looks like the color changed" is often not a grading problem but a break in the interpretation rule somewhere along the chain.

渲染意图：超出目标色域时怎么办Rendering intent: what to do when colors exceed the target gamut

当源颜色超出目标设备能力时，CMM 需要决定如何处理。ICC 规范定义了多种渲染意图，实际软件会根据图像类型和 Profile 支持情况选择。When source colors exceed the target device's capability, the CMM must decide how to handle them. The ICC spec defines several rendering intents, and software picks based on image type and profile support.

渲染意图Rendering intent适合场景Best for直观理解In plain terms
Perceptual 感知Perceptual照片、复杂图像Photos, complex images把整体色域压进目标空间，尽量保持颜色之间的关系。Compresses the whole gamut into the target space, keeping the relationships between colors as much as possible.
Relative Colorimetric 相对色度Relative Colorimetric网页、屏幕交付、精确颜色Web, screen delivery, precise color目标空间能显示的颜色尽量不动，超出的颜色裁到边界，白点按目标适配。Leaves in-gamut colors as-is, clips out-of-gamut colors to the boundary, and adapts the white point to the target.
Absolute Colorimetric 绝对色度Absolute Colorimetric打样、模拟纸白Proofing, simulating paper white连源白点也尽量模拟出来，常用于印刷软打样。Even simulates the source white point; common in print soft-proofing.
Saturation 饱和度Saturation图表、商业图形Charts, business graphics优先保持鲜艳，不追求照片般自然。Prioritizes vividness over photographic naturalness.

4. Assign Profile 和 Convert Profile 是两件事4. Assign Profile and Convert Profile are two different things

很多颜色事故来自这里：指定 Profile 会改变 RGB 数字的解释方式；转换 Profile 会尽量保持外观，但 RGB 数字会被重算。Many color accidents start here: assigning a profile changes how the RGB numbers are interpreted; converting a profile tries to preserve appearance but recomputes the RGB numbers.

如果你把一张 sRGB 图"指定"为 Display P3，颜色会变艳；如果你把它"转换"为 Display P3，外观应尽量保持一致，只是底层 RGB 数字改变。If you "assign" Display P3 to an sRGB image, the colors get more saturated; if you "convert" it to Display P3, the appearance should stay as close as possible while the underlying RGB numbers change.
原始解释Original
处理后After

怎么判断你该用哪个？How to tell which one to use?

颜色看起来错了The colors look wrong
通常先检查是否"指定"了错误 Profile。Usually first check whether a wrong profile was "assigned".
要交付到另一个空间Delivering to another space
例如 P3 图交付网页 sRGB，应该转换 Profile。e.g. delivering a P3 image to web sRGB — you should convert the profile.
不要随手丢弃 ProfileDon't casually drop the profile
文件小一点，但接收方只能猜你的 RGB。The file gets a bit smaller, but the recipient can only guess your RGB.

5. Web 图片为什么容易出问题5. Why web images so easily go wrong

Web 长期默认 sRGB。现代浏览器和设备开始支持 Display P3、CSS Color 4 和广色域图片，但图片、CSS 色值、Canvas、视频的处理路径并不完全一样。The web defaulted to sRGB for a long time. Modern browsers and devices now support Display P3, CSS Color 4, and wide-gamut images — but images, CSS color values, Canvas, and video don't all go through exactly the same path.

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

同样写"红"，含义可能不同The same "red" can mean different things

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

如果当前设备或浏览器不支持 P3，两块可能看起来接近或被映射回 sRGB。If the current device or browser doesn't support P3, the two blocks may look similar or get mapped back to sRGB.

Web 链路的实用规则Practical rules for the web pipeline

普通网页图片：导出 sRGB，并嵌入 Profile。Ordinary web images: export sRGB and embed the profile.
广色域图片：导出 Display P3，并确认目标平台保留 Profile。Wide-gamut images: export Display P3 and confirm the target platform keeps the profile.
不要把未管理的 P3 屏幕当作"颜色更准"。它只可能更艳。Don't treat an unmanaged P3 screen as "more accurate". It can only be more saturated.

6. 按用途选择导出策略6. Choose an export strategy by use case

色彩管理不是"永远用最大的色域"。正确策略取决于用途、接收方、软件链路和是否能保留 Profile。Color management isn't "always use the biggest gamut". The right strategy depends on the use case, the recipient, the software chain, and whether the profile is preserved.

最稳妥的原则：编辑可以用大空间，交付必须按目标链路收窄并嵌入 Profile。The safest principle: edit in a large space, but for delivery narrow down to the target chain and embed the profile.
用途Use case推荐空间Recommended space关键动作Key action风险Risk
普通网页 / 社交Ordinary web / socialsRGB转换到 sRGB，嵌入 ICCConvert to sRGB, embed the ICC平台可能重压缩，但兼容性最好Platforms may recompress, but compatibility is best
Apple 生态广色域展示Wide-gamut display in Apple's ecosystemDisplay P3保留 P3 Profile，测试 Safari / ChromeKeep the P3 profile, test Safari / Chrome非 P3 设备会映射或裁切Non-P3 devices map or clip it
摄影后期母版Photo master for postAdobe RGB / ProPhoto RGB大空间编辑，最终按用途转换Edit in a large space, convert by use case at the end直接发给普通用户容易偏色Sending it straight to ordinary users easily shifts color
印刷协作Print collaboration按印厂 ICC / CMYKPer the printer's ICC / CMYK使用印厂指定 Profile 和软打样Use the printer's specified profile and soft-proofing自己乱转 CMYK 可能损失更大Converting to CMYK yourself can lose even more
HDR / 视频截图HDR / video stills按视频链路Per the video pipeline区分 SDR 图片、HDR 图片和视频帧Distinguish SDR images, HDR images, and video frames浏览器、系统和格式支持差异大Browser, system, and format support vary widely

7. 外部工具：纯色图片生成器7. External tool: solid-color image generator

做色彩管理测试时，纯色色块很有用：你可以生成一张指定 RGB 的图片，再测试不同软件、浏览器和平台是否保留 Profile、是否发生过饱和或裁切。Solid color blocks are handy for color-management testing: generate an image with a specific RGB, then test whether different apps, browsers, and platforms keep the profile and whether oversaturation or clipping occurs.

本页不内嵌生成器。需要生成纯色测试图的用户，可以去工具仓库下载使用。This page doesn't embed the generator. If you need to generate solid-color test images, grab it from the tool repository.
GitHub 工具GitHub tool

Solid Color Image Generator

MeeeetRain 的纯色图片生成工具，可用于制作颜色测试图、导出纯色色块，并配合本章的 Profile / Web 色彩管理实验。MeeeetRain's solid-color image generator — make color test charts, export solid blocks, and pair it with this chapter's profile / web color-management experiments.

打开 GitHub 仓库Open the GitHub repo

资料来源Sources