Change the color profile of a page in CSS

问题

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.

回答1:

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?

来源：https://stackoverflow.com/questions/61851331/change-the-color-profile-of-a-page-in-css

标签

css

safari

default-value

color-profile

color-management