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

> I'm pretty frustrated about the state of what browsers shipped here, and I think we need to do something to fix it asap. From an authoring perspective it's entirely unusable, and it breaks the fundamental promise of the format: providing perceptually-uniform lightness.

I agree. After all the work that went into finding a good Gamut Mapping Algorithm that was hue-preserving, lightness-preserving, and thus allowed the closest approximation to a specified color that was out of gamut of the display device, we end up with **naive clip** shipping in browsers  which gives massive hue shifts and even bigger lightness shifts.

And this was done out of a misguided attempt to make 2D Canvas (which is drawing millions of pixels) align with displayed images (which will be using a perceptual gamut mapping, to preserve overall look and image detail) and with CSS (where you have maybe a hundred or so colors in all the stylesheets on a page). Trading off authoring complexity and frustration for minimal gains in computing efficiency of the implementation,

Here is an example: the CSS Color 4 GMA with Oklch on the left, the (old) CSS Color 4 GMA with CIE LCH and DeltaE2000 on the right, and in the middle naive clip which, as cal clearly be seen, for these light colors gives a much darker result quite unlike the requested color.

![oklab-gma-clip](https://github.com/w3c/csswg-drafts/assets/2506926/ff7dd3ce-efa1-4d1b-9fd0-9378a89d84a0)

Its a screen shot from [this demo](https://svgees.us/Color/ok-clip-lch-explorer.html) with OK lightness set to 0.95.

Which is why we see preprocessor plugings like this which take your CSS and auto-generate sRGB fallbacks (using the CSS Color 4 GMA)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Browsers don&#39;t support this part of CSS Color 4 yet.<br>So if you want to have correct colors on all displays you should include both narrow and wide gamut color values. This new plugin helps you to do just that.<a href="https://t.co/FyYQOElo90">https://t.co/FyYQOElo90</a> <a href="https://t.co/JSMD2ddEzT">pic.twitter.com/JSMD2ddEzT</a></p>&mdash; CSS Tools (@css_tools_) <a href="https://twitter.com/css_tools_/status/1711442717891346482?ref_src=twsrc%5Etfw">October 9, 2023</a></blockquote>

![image](https://github.com/w3c/csswg-drafts/assets/2506926/d1965679-b03e-404e-91fb-f661f0a6d73a)


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


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

Received on Wednesday, 11 October 2023 20:12:45 UTC