Display-P3颜色渲染异常求助：为何无法显示预期色彩？

核心结论 #

这不是浏览器Bug，主要是色彩空间转换逻辑和系统色彩管理设置共同作用的结果，同时你对色彩空间的视觉表现存在一点理解偏差。

详细解释 #

1. sRGB屏幕配置下的颜色压缩 #

当系统设置为sRGB IEC61966-2.1时，浏览器会判定显示器仅能显示sRGB色域的颜色：

• color(display-p3 0 1 0)是Display-P3色域内的纯绿色，该颜色超出了sRGB的色域范围，浏览器会自动将其映射为sRGB色域中最接近的颜色——也就是#0f0（对应Display-P3空间的0.46 0.99 0.3）。
• 浏览器取色器读取的是显示器实际输出的转换后颜色，因此返回的是映射后的Display-P3值，这属于正常的色彩管理行为。

2. 切换到Display-P3配置后的差异 #

• Safari的表现：切换系统色彩配置到Display-P3后，Safari会识别显示器的色域能力，正确渲染color(display-p3 0 1 0)为Display-P3纯绿色，取色器也能读取到原始正确值，符合预期。
• Chrome的表现：Chrome默认跟随系统色彩配置，但在Mac上可能存在配置延迟或默认限制。你可以手动强制Chrome使用Display-P3色域：
  1. 打开chrome://flags/#force-color-profile
  2. 将选项设置为Display P3
  3. 重启Chrome后再测试，就能看到color(display-p3 0 1 0)和#0f0的明显差异。

3. 视觉一致性的误解 #

你提到“Display-P3配置下的color(display-p3 0 1 0)看起来和sRGB配置下的#0f0完全一致”，这是因为系统色彩管理采用了相对色度转换模式：

• 切换到Display-P3配置时，系统会调整sRGB内容的色彩映射，让sRGB #0f0在Display-P3屏幕上的视觉效果和它在sRGB屏幕上的效果保持一致。
• color(display-p3 0 1 0)是Display-P3色域中更饱和的绿色，视觉上本应比映射后的sRGB #0f0更浓烈，但系统对sRGB内容的“视觉一致性”处理，导致你产生了两者视觉一致的错觉——可以用Mac自带的「数码测色计」读取实际颜色数值，就能发现两者的差异。

测试代码 #

CSS #

:root { background: black; }
#p3-text { color: color(display-p3 0 1 0); }
#srgb-text { color: #0f0; }
#converted-text { color: color(display-p3 0.46 0.99 0.3); }

HTML #

<div id='p3-text'>
  This text is pure green in display-p3.
</div>
<div id='srgb-text'>
  This text is pure green in sRGB.
</div>
<div id='converted-text'>
  This text is pure sRGB green converted to display-p3.
</div>

内容的提问来源于stack exchange，提问作者Dennis Kats