在 CSS 中更改页面的颜色配置文件
And*_*ift 9 css safari color-management default-value color-profile
我正在开发 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下采样，它可能在此屏幕截图（链接）中不可见，但Safari中的P3框更加生动。Chrome 似乎根本不支持 P3，而 FF 似乎不支持 P3，但渲染 sRGB 和 safari 的 P3 一样明亮......哎呀。
@color-profile已被提议但被删除，因此您无法使用它。但是，您可以做的是@supports在 CSS 顶部进行一些查询：
/* 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 ...
截图链接在这里。
总而言之，您可以（并且应该）尽可能指定 P3，但也可以添加回退。
最后，我不明白你的意思
任何我必须为每个图像手动指定色彩空间的解决方案都不是初学者。
那么我们是在谈论图像还是可定义的 (bg) 颜色？
| 归档时间： |
|
| 查看次数： |
705 次 |
| 最近记录： |