我正在开发2019年末的Macbook Pro，它支持 P3色域(宽色)。
我正在建立一个包含大块鲜艳色彩的网站，我只希望这些色彩尽可能鲜艳。
大多数目标受众也将具有支持P3的监视器。
我发现我的网站在Firefox 中看起来很棒-比Safari更好。事实证明，Firefox不执行任何颜色管理，因此可以使用完整的P3色域。
Safari在sRGB空间中转换(或保留)我的颜色，这使它们变暗了。 Firefox不使用任何颜色管理，而是使用完整的P3色域。
要查看差异的示例，请运行以下代码片段(仅适用于Safari上色彩较宽的计算机):
<html><head><style>
#box1 {
background-color: color(display-p3 0 1 0);
height:50px;
}
#box2 {
background-color: rgb(0, 255, 0);
height:50px;
}
</style></head><body>
<div id="box1">P3 Color</div>
<div id="box2">sRGB Color</div>当在P3空间中定义颜色时，您会看到绿色的更加生动。
或者，您可以在Chrome和Firefox中打开此代码。 并排，您可以轻松地看到Firefox中的绿色更加丰富。
我正在寻找一种告诉Safari的方法:不要将颜色限制为sRGB，而应使用P3的全部亮度。
我想重写我的CSS，但只需要做一次。在顶部添加类似的内容:
@media color-gamut: p3{
@color-profile{ name: p3; src: url(/files/P3.icc); }
}
我在自动化环境中工作，并且必须手动为每个图像指定色彩空间的任何解决方案都是无法使用的。
我可以修改的是基本文档模板，包括基本CSS，所有页面都相同。
任何解决方案都欢迎。我拥有如此出色的计算机以及令人赞叹的显示屏，真是令人惊讶，它故意使我所有的颜色都变得比所需的更褪色。
最佳答案
我已经对此进行了测试，并且完全有不同的经历。
在Safari，Chrome，Firefox中运行您的代码段-从左到右:
由于imgur下采样，该屏幕快照(link)中可能看不到它，但是Safari中的P3框更加生动。 Chrome似乎根本不支持P3，而FF似乎根本不支持P3，但sRGB的颜色却与 Safari 的P3一样明亮。
有人建议使用@color-profile，但建议使用dropped，因此您将无法使用它。
您可以执行的功能，但是在CSS顶部有一些@supports查询:
/* sRGB color. */
:root {
--bright-green: rgb(0, 255, 0);
}
/* Display-P3 color, when supported. */
@supports (color: color(display-p3 0 1 0)) {
:root {
--bright-green: color(display-p3 0 1 0);
}
}
#box1 {
background-color: var(--bright-green);
height:50px;
}
#box2 {
background-color: rgb(0, 255, 0);
height:50px;
}
回退后，Safari和FF均可正确渲染，但Chrome仍会恢复为sRGB ...
屏幕截图链接为here。
总结起来，您可以(并且应该)在可能的情况下指定P3，但也可以添加后备。
最后，我不明白你的意思
any solution where I have to manually specify the color space for each image is a non-starter.
我们是在谈论图像还是可定义的(bg)颜色？
关于css - 在CSS中更改页面的颜色配置文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61851331/