Menu
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.
662
The @color-profile CSS at-rule defines and names a color profile which can later be used in the color() function to specify a color.
To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.
To assign a color profile to a device, go to the Devices tab, and select your display device in the Device drop-down. Select the Use my settings for this device checkbox. This lets you make changes to that device's color profile settings.
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?
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
