问一个程序员可能很少注意的问题（关于 Display P3 色彩模式）

This topic created in 2260 days ago, the information mentioned may be changed or developed.

众所周知（？）苹果电脑显示屏目前都（至少我的）支持 Display P3 色彩模式，如果你不知道这是什么，可以自行谷歌一下。

作为设计师我在设计软件里也偶尔会用 P3 模式来设计，但是今天发现即使是前端完全按照我提供的色值来写的页面，我用 Chrome 对比实现效果和设计稿还是能看出来颜色的细微差别（用屏幕取色也能看出网页实际颜色和代码是不同的）。问题是既然我用的是同样的屏幕，而且色值也一样，应该最终效果也一样才对，所以很大的可能是 Chrome 并没有支持 Display P3 的颜色模式。

刚刚试了下 Safari，也是同样的情况。

想问一下，难道要实现 P3 模式，是需要一些特殊代码吗？

色值

display

Chrome

模式

7 replies • 2021-05-16 10:15:43 +08:00

chnhyg

Mar 18, 2020

CSS 是以 sRGB 作为色彩空间标准的。

davin

Mar 18, 2020

除非你的前端页面完全是为了支持 Display P3 色彩模式而设计，否则还是以 sRGB 为主。CSS 可以通过媒体嗅探的方式，来针对不同的色彩模式设置不同的样式。比如：
```CSS
// 支持 Display P3 色彩模式
@supports (color: color(display-p3 1 1 1)) {
.main {
background-color: red;
}
}
// 支持 sRGB 色彩模式
@media (color-gamut: srgb) {
.main {
background-color: blue;
}
}
```
但对不同的浏览器版本，系统平台或设备是有差异的。

KillPaul

Mar 18, 2020

@davin 感谢解答。我主要就是疑惑为什么浏览器不默认支持，然后刚刚看了看苹果官网，也是同样的情况，所以可能现在大家都没有去考虑吧。不知道移动端什么情况。

morethansean

Mar 18, 2020

意义不大吧，所以整个 web 标准以及浏览器支持的发展都很缓慢，你实在有一些比较丰富的内容要支持就用图片来实现，主流浏览器对图片的颜色管理都还是没啥问题的，css media query 选一下颜色空间然后用不同的颜色空间图片。

fuweichin

May 15, 2021

图片的 Display P3 色域，浏览器除 Safari 11+外，Chrome 也已经实验性地支持(Go to chrome://flags, search for "force color profile", switch the option from "default" to "Display P3 D65")

CSS 的 Display P3 颜色，浏览器目前只有 Safari 11+支持，Chrome 正打算实现 CSS 的 color 函数以支持 Display P3 颜色(见 https://bugs.chromium.org/p/chromium/issues/detail?id=1068610)

如果显示器不支持 P3，或者显示器 /系统 /软件未采用 Display P3 色域显示，那就不用想着看 Display P3 的效果。

如果你用到的颜色全在 sRGB 的范围内，就体现不了 Display P3 出色之处。得用上 Display P3 比 sRGB 多出的那部分颜色，如用 iPhone 8+相机拍摄鲜艳的红色 /绿色实景，又如用 CSS 颜色表达式如 color(display-p3 1 0 0)，才能看到差别。

fuweichin

May 15, 2021

@KillPaul 我写了一个测试页面，在 iPhone 8 上可以看出 sRGB 和 Display P3 的最红还是有点差别。Safari 官方也有个测试页面 https://webkit.org/blog-files/color-gamut/comparison.html

KillPaul

May 16, 2021

@fuweichin 感谢挖坟解答😄️ 看来离正式支持不远了啊