P3 wide gamut support

[jensimmons]

There isn't a chart on Can I Use for documenting which browsers support Display-P3. There are charts for supporting notation, functions, etc, including for P3. But what about documenting whether P3 itself is supported??

I propose adding such a chart.

Safari implemented Display-P3 support in 2016. And added support inside the canvas element in 2021. (I can look up the exact version numbers later.)

Chrome status: https://chromestatus.com/feature/6280020765966336

[Schweinepriester]

You mention

There are charts for supporting notation, functions, etc, including for P3.

but still, isn't this covered by https://caniuse.com/css-color-function (ref: #3134)?

https://chromestatus.com/feature/6280020765966336 seems to point in that direction as well.

Or which spec or how to test did you have in mind? :) Or perhaps a test from interop-2022-color?

[Schweinepriester]

@jensimmons friendly ping :)

[jensimmons]

I just came here to see why Can I Use doesn't have a page for P3. I still believe it's an important thing to add.

No, the page for color() doesn't do it. That only shows whether/not a browser supports the functional notation for defining a color. Developers can use such a function to define a color in any of a number of different gamuts, including RGB.

The question at hand is — does a browser display colors in the P3 wide gamut? Or does it only understand the RGB gamut (which can be represented by any number of different color spaces, like RGB, sRGB, HSL, LCH, OKLAB, LAB, etc). A color space is the math used to express a color. The color gamut is the range of color that is possible to express.

P3 color can represent 50% more colors than RGB. There are colors (especially bright and vibrant colors) that you cannot express in RGB, but can in P3. This color picker shows the difference — all the colors above and to the right of the white line can only be rendered in P3 gamut. (That image will only make sense on a display that can also show P3.)

Safari added support for P3 wide gamut in 2016. Other browsers are just getting to it now, thanks in part to Interop 2022/23.

[jensimmons]

There are also other CSS features that can do things in P3. Like color-mix, relative color syntax, etc. But again — a browser supporting those CSS features doesn't mean it also supports P3.

I guess it's like being able to transform an image in CSS, or put a border on it, or change its width & height. Or to point to an image file using background-image, etc. But that's different than whether or not a browser supports a specific image codec like AVIF, JPEG, GIF, PNG, etc. P3 is a specific gamut, that well, first must be supported by the display the user is using, then supported by the operating system, and then supported by the browser. Can I Use won't get into the hardware, etc... but knowing which browser supports P3, and starting when would be very helpful.

For instance, the @media (color-gamut: p3) { ... } Media Query tests for P3 support. As does if (window.matchMedia("(color-gamut: p3)").matches) { ... } in JavaScript.

And no, this chart https://caniuse.com/mdn-css_at-rules_media_color-gamut of support for that media query doesn't say whether or not P3 is supported. It shows that the Media Query is supported. A conditional that will correctly report that most browsers for the last seven years have not supported P3.

Does that make sense?

[jensimmons]

Our journey:

• Safari 10.0 — added support for images in P3 color (partial)
• Safari 10.1 — added support for P3 in general (full, with notes)
• Safari 15.2 — added support for P3 inside the canvas element (full, with notes)
• Safari 16.4 — added support for P3 inside WebGL Canvas with drawingBufferColorSpace (full, with notes)

Still need to:

• add support for P3 inside WebGL Canvas with unpackColorSpace (another note)
• add support for P3 in SVG filters (another note)

[jensimmons]

I'd really like to discuss this issue again, now that there's a whole explanation of why using support for color() is not a good substitution for P3 in this session: https://developer.apple.com/videos/play/wwdc2023/10121/?time=385

There is a lot of confusion about which browser added P3 support when. A developer cannot simply look at one feature in CSS, and determine anything about P3 color support. A browser could easily add support for color() or lab() or gradient interpolation color spaces without adding P3 support. Or a browser could add P3 without adding any of those specific features.

Web developers need a place they can go to learn about which browser supports P3, and in which parts of the DOM.

[jensimmons]

We added an entire section to our session on P3 color specifically about support in Safari. https://developer.apple.com/videos/play/wwdc2023/10121/?time=895

I'd love to know the status of Chrome, Edge, Firefox, and all the browsers... but I don't have any place I can learn about where each one is with their support. Can I Use should be that resource.

[jensimmons]

Perhaps @argyleink can provide the information for Chrome, much like I did for Safari above, and at: https://developer.apple.com/videos/play/wwdc2023/10121/?time=895

[jensimmons]

You are probably going to ask about tests.

Does your testing framework support P3? Does if have a way to compare a color swatch from each particular portion of the DOM to an example, to ensure the color is correct?

If not, then perhaps you can either do manual tests. Or take each browser maker at their word that they have implemented support. It's not like this is something that could easily break. It's about rendering the web page. Once it works, it works.

And no, WPT tests won't help. Everyone passes the XYZ tests, for example, even though XYZ literally does not exist beyond a theoretical construct. Zero operating systems support XYZ. Zero displays support XYZ. Even the most expensive reference monitors at B&H only do Rec 2020. The technology does not yet exist for XYZ. These tests only pass because the CSS parsing engine recognizes what they are, and they do alter a gradient, for example, and do something random smooshing things around inside the P3 gamut.... but they do not render XYZ color. (Unless they come with a time machine to the future!)

[jensimmons]

I still believe this would be helpful. I heard recently, for instance, that while Firefox supports the color(), lab(), oklab(), lch(), and oklch()` functions, they still do not support P3 colors. Any color defined in P3 gets smushed into a color that can be represented in sRGB. I have yet to confirm this with Mozilla, but it came up in a comment thread responding to an article we wrote — potentially with wrong information, because there is still no place to look up which browser supports which color gamut in which context.

Supporting CSS that has the potential to ask the browser to use P3 is not the same thing as supporting P3.

[svgeesus]

heard recently, for instance, that while Firefox supports the color(), lab(), oklab(), lch(), and oklch()` functions, they still do not support P3 colors. Any color defined in P3 gets smushed into a color that can be represented in sRGB.

This is completely untrue.

[svgeesus]

Everyone passes the XYZ tests, for example, even though XYZ literally does not exist beyond a theoretical construct. Zero operating systems support XYZ. Zero displays support XYZ. Even the most expensive reference monitors at B&H only do Rec 2020. The technology does not yet exist for XYZ.

This one is wildly untrue. CIE XYZ is used as an interconnection between color spaces and has been since checks notes 1932. It is the basis of ICC profiles and is the standard interconnection space between different RGB or CMYK spaces (including in WebKit).

Yes, there is little hardware which directly accepts an XYZ input. That doesn't mean it is not useful. It is actually essential for color space interconversion.

I get that you want to promote P3, but this sort of fact-free diatribe is not the ideal way to achieve that goal.