在CSS中更改页面的颜色配置文件 [英] Change the color profile of a page in 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);高度:50px;}#box2 {background-color:rgb(0，255，0);高度:50px;}</style></head< body>< div id ="box1"> P3颜色</div>< div id ="box2"> sRGB颜色</div> 当在P3空间中定义颜色时，您会看到绿色更加鲜艳.
或者，您可以在Chrome和Firefox中打开此代码.通过并排，您可以轻松地看到Firefox中的绿色更为丰富.
我正在寻找一种告诉Safari的方法:不要将颜色限制为sRGB，而应使用P3的全部亮度.
我想重写我的CSS，但只需要做一次.在顶部添加类似的内容:
@media色域:p3 {@ color-profile {名称:p3;src:url(/files/P3.icc);}} 我在自动化环境中工作，任何我必须手动为每个图像指定色彩空间的解决方案都是无法使用的.
我可以修改的是基本文档模板，包括基本CSS，所有页面都相同.
欢迎任何解决方案.我拥有如此出色的计算机以及令人赞叹的显示屏，真是令人um目结舌，它刻意让我所有的颜色都变得比所需的更褪色.
我已经对此进行了测试，并且拥有完全不同的经验.
在Safari，Chrome，Firefox中运行您的代码段-从左到右:
由于imgur下采样，它可能在此屏幕快照(
屏幕快照链接位于此处.
总结起来，您可以(并且应该)在可能的情况下指定P3，但是还可以添加后备广告.
最后，我不明白你的意思
我必须手动为每种颜色指定色彩空间的任何解决方案图片不是入门图片.
我们是在谈论图像或可定义的(bg)颜色吗?
I am working on a late-2019 Macbook Pro, which supports the P3 color gamut (wide color).
I'm building a website that includes large blocks of vivid color, where I just want the colors to be as bright as possible.
Most of the intended audience will also have P3-capable monitors.
I discovered that my website looks amazing in Firefox -- much better than it does in Safari. It turns out that Firefox doesn't do any color management so the full P3 gamut is applied.
Safari converts (or preserves) my colors in the sRGB space, which makes them dull. Firefox, not using any color management, uses the full P3 gamut.
To see an example of the difference, run the snipped below (only works on Safari on a computer with wide color):
<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>
You will see that the green is much more vivid when the color is defined in the P3 space.
Alternatively, you can open this code in Chrome and Firefox. Side by side, you can easily see that the green is much richer in Firefox.
What I am looking for is a way to tell Safari: don't limit the colors to sRGB, use the full brightness of P3.
I would like to rewrite my css, but only have to do it once. Something like adding at the top:
@media color-gamut: p3{
@color-profile{ name: p3; src: url(/files/P3.icc); }
}
I am working in an automated environment, and any solution where I have to manually specify the color space for each image is a non-starter.
What I can modify is the basic document template, including base CSS, which will be the same for all pages.
Any solution is welcome. It's a bummer that I have this great computer with an amazing display and it's intentionally making all my colors more faded than necessary.
I've tested this and had a different experience altogether.
Running your snippet in Safari, Chrome, Firefox -- left to right:
It's probably not visible in this screenshot (link) because of imgur downsampling but the P3 box in Safari was much more vivid. Chrome did not seem to support P3 at all while FF seemed to not support P3, yet rendered sRGB as as brightly as safari's P3... Yikes.
@color-profile had been proposed but dropped so you cannot use it.
What you can do, however, is a bit of @supports queries at the top of your 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;
}
After the fallbacks, both Safari & FF render properly but Chrome still reverts to sRGB...
Screenshot link is here.
Summing up, you can (and should) specify P3 whenever possible but also add fallbacks.
Finally, I don't understand what you meant by
any solution where I have to manually specify the color space for each image is a non-starter.
Are we then talking about images or definable (bg) colors?
这篇关于在CSS中更改页面的颜色配置文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
