Re: [csswg-drafts] [css-color-4] (ok)lch implementations break the entire purpose for authors (#9449)

With respect to the "red redder", it is not obvious to me that [this (the gamut mapped result)](https://raw.githubusercontent.com/ccameron-chromium/gamut-map/main/gamut-map/rr-srgb-gamut-mapped.png) is a desirable representation of [this (the original, needs a P3 monitor)](https://raw.githubusercontent.com/ccameron-chromium/gamut-map/main/gamut-map/rr-p3.png). I don't think that projecting along constant luminance is the right thing to do in the general case, but we can drop that for now.

I would really like like to apply gamut mapping to `oklab` and `oklch` spaces in one way or another.

The difficulty with the `oklab` and `oklch` space is that, when used correctly, they produce extremely out-of-gamut colors. For example, suppose I like this particular blue (I think it's `oklab(46.64% 0 -0.32)`), and I want to do a gradient from black to white through that blue. Here's that blue in `oklab` (sorry, I wrote `oklch` in the images...).

<img width="320" alt="Visualization of the P3 gamut in oklab space, with a blue color circled" src="https://github.com/w3c/csswg-drafts/assets/32557109/98243e81-9b0e-4551-9f45-83ee74648aec">

This is what the gradient looks like, with CSS gamut mapping, going from `oklab(0% 0 -0.32)` through `oklab(100% 0 -0.32)`. It looks great!

<img width="320" alt="Gamut with slicing plane showing gradient from black to white through the previous blue" src="https://github.com/w3c/csswg-drafts/assets/32557109/fda3ffb9-15a5-474b-96d2-bdf913832c0b">

But there is a problem here! There is a real mapping from points in this 3D space to chromaticity values, and this gradient does not accurately represent those colors.

At the top, at `L=99%`, the true color is a brilliant blue, but what we see here almost-white. In the demo app, set gamut mapping to "none" (and you enable the various flags), then you'll see this true color.

At the bottom, at `L=1%`, the chromaticity of the colors is a physically impossible color. In this picture I've added the spectral colors -- everything outside of the convex hull of the spectral colors is not a physically realizable color.

<img width="320" alt="Gamut with spectral colors" src="https://github.com/w3c/csswg-drafts/assets/32557109/9856011f-da5f-4e5e-b7bc-5514e8296326">

The problem with `oklab` and `oklch` is that they can produce extremely out of gamut and physically impossible colors. A designer working with these colors, say, on a modern P3 display, may like what they see, but:
* The author of the content has no way to visualize what they've truly specified.
* The author may not like the representation on a more powerful display than the one they authored the content on.
* The author has no way to constrain what they've authored to be exactly what they see on their authoring display.

The solution that I see to this problem is to bake gamut mapping into the definitions of `oklab` and `oklch`.

-- 
GitHub Notification of comment by ccameron-chromium
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9449#issuecomment-1836128925 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 1 December 2023 13:35:01 UTC