相关疑难解决方法(0)

在 CSS 中更改页面的颜色配置文件

我正在开发 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>

Run Code Online (Sandbox Code Playgroud)

您会看到在 P3 空间中定义颜色时，绿色更加鲜艳。

或者，您可以在 Chrome 和 Firefox 中打开此代码。并排，您可以很容易地看到 Firefox 中的绿色更丰富。

我正在寻找的是一种告诉 Safari 的方法：不要将颜色限制为 sRGB，而是使用 P3 的全亮度。

我想重写我的 css，但只需要做一次。像在顶部添加的东西：