- From: Chris Lilley via GitHub <sysbot+gh@w3.org>
- Date: Wed, 11 Oct 2023 20:12:43 +0000
- To: public-css-archive@w3.org
> 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'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>— 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