众所周知(?)苹果电脑显示屏目前都(至少我的)支持 Display P3 色彩模式,如果你不知道这是什么,可以自行谷歌一下。
作为设计师我在设计软件里也偶尔会用 P3 模式来设计,但是今天发现即使是前端完全按照我提供的色值来写的页面,我用 Chrome 对比实现效果和设计稿还是能看出来颜色的细微差别(用屏幕取色也能看出网页实际颜色和代码是不同的)。问题是既然我用的是同样的屏幕,而且色值也一样,应该最终效果也一样才对,所以很大的可能是 Chrome 并没有支持 Display P3 的颜色模式。
刚刚试了下 Safari,也是同样的情况。
想问一下,难道要实现 P3 模式,是需要一些特殊代码吗?
1
chnhyg 2020-03-18 10:04:17 +08:00 2
CSS 是以 sRGB 作为色彩空间标准的。
|
2
davin 2020-03-18 10:43:23 +08:00 2
|
3
KillPaul OP @davin 感谢解答。我主要就是疑惑为什么浏览器不默认支持,然后刚刚看了看苹果官网,也是同样的情况,所以可能现在大家都没有去考虑吧。不知道移动端什么情况。
|
4
morethansean 2020-03-18 11:43:36 +08:00 1
意义不大吧,所以整个 web 标准以及浏览器支持的发展都很缓慢,你实在有一些比较丰富的内容要支持就用图片来实现,主流浏览器对图片的颜色管理都还是没啥问题的,css media query 选一下颜色空间然后用不同的颜色空间图片。
|
5
fuweichin 2021-05-15 16:02:30 +08:00 1
图片的 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),才能看到差别。 |
6
fuweichin 2021-05-15 16:14:54 +08:00 1
@KillPaul 我写了一个测试页面,在 iPhone 8 上可以看出 sRGB 和 Display P3 的 最红 还是有点差别。Safari 官方也有个测试页面 https://webkit.org/blog-files/color-gamut/comparison.html
|