Login/Register
Change the color profile of a page in CSS
Asked Answered
csssafaridefault-valuecolor-profilecolor-management
R

1

10

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.

Reformatory answered 17/5, 2020 at 11:52 Comment(3)
I don't know if this can help you, but at least you can find it interesting: lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how – Unscramble
I think that using some support queries would make it work. – Adjudge
CSS 3 only supports sRGB, and sRGB is the standard for the internet. CSS 4 will support additional colorspaces and profiles, but it is not the "standard" yet. And once it is, then there is the issue of browsers adding the capability. – Package
S
8

I've tested this and had a different experience altogether.

Running your snippet in Safari, Chrome, Firefox -- left to right:

enter image description here

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...

enter image description here

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?

Soldiery answered 19/5, 2020 at 21:56 Comment(1)
Thanks for your answer. I should have been more clear. My site contains lots of SVG files generated from Adobe Illustrator. It would be incredibly cumbersome to go into the source and manually update every color to provide a P3 alternative. I'm not talking about PNG or JPG images, but rather colors specified in CSS. So, I'm looking for some kind of declaration that will say: if P3 is available, use it for everything. I'll update my question to be more clear. – Reformatory

© 2022 - 2024 — McMap. All rights reserved.