search

evilmartians / oklch-picker

Color Picker for LCH
https://oklch.com
Other
849 stars 65 forks source link

Confirm how P3 compatibility is tested #58

Closed cssinate closed 2 years ago

cssinate commented 2 years ago

This is a really cool tool, and I'm super excited about the new color spaces coming to CSS. Please note in advance that I only have a very basic understanding of color spaces and how everything is working here. After finding this tool, I spent some time making sure my monitor was P3 compatible, and making sure it's using that color space. I set my Chrome flags to force P3. When I visit this site: https://www.wide-gamut.com/test - I can see that my monitor supports ICC profiles, and that my monitor can display wide-gamut colors (I can see the W inside the red box and differences in the RGB squares). When I look at this tool, it says P3 is unavailable on my device. The test from the wide-gamut site seems to show that it is available. I'm just curious about how your tool is testing for P3, and what I might do on my end to convince your tool that I do indeed have it available.

ai commented 2 years ago

What OS do you have? What flag do you enable in Chrome for P3?

We are using @supports (color: oklch(100% 0 0)) and @media (color-gamut: p3) to detect P3 support.

As I know, Chrome doesn’t support oklch() and this is why you have no P3 support.

There is an interesting problem of P3 support in Chrome. There are 2 types of P3 support:

  1. Support P3 profile in images
  2. Support P3 colors in CSS

Seems like you enabled only first P3 support (for images), since Chrome just don’t support any color function with P3 in CSS.

Maybe we can render P3 color by generating image in data:uri, but it looks too complicated. Especially because oklch() support is coming to Chrome.

cssinate commented 2 years ago

Of course! You're correct on everything you said. I made a poor assumption that polyfills would allow oklch to work.

I'm on Windows, and I set the Force color profile Chrome flag to Display P3 D65. I can confirm that the wide-gamut test site uses images to display their values. All in all, I understand now. Thanks for the comment.

I'm definitely not prepared to put the effort into displaying the colors as images, and I'm certainly not asking you or anyone else to either. If, however, someone does want to tackle it, a second option (in addition to data:uri) would be to display the sample color with canvas when the browser doesn't support P3 in CSS.