Change the color profile of a page in CSS

Question

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 col

Answer 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?