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

@jamesnw wrote:
> Here's a [Codepen demo](https://codepen.io/jamessw/pen/mdaopeZ?editors=1100) showing (ok)lab and (ok)lch with consistent lightness values, and changing only the a or chroma channels, respectively.

So that demo has [`oklab(90% 0.36 0)`](https://colorjs.io/apps/convert/?color=oklab(90%25%200.36%200)&precision=6) which is out of gamut for all RGB colorspaces (even `prophoto-rgb`) and is `rgb(152.937% 10.3745% 83.2625%)`.

Because Chrome and Firefox do naive clipping, that becomes [`rgb(100% 10.3745% 83.2625%)`](https://colorjs.io/apps/convert/?color=rgb(100%25%2010.3745%25%2083.2625%25)&precision=6) which is a much darker fuchsia and is `oklch(0.6836 0.29009 338.36)`. Lightness changed from 90% to 68% because of the clip; `oklab(90% 0.36 0)` is `oklch(0.9 0.36 0)` so we also see the hue shifted 21.64 degrees because of the clip.

A CSS gamut mapped version of `oklab(90% 0.36 0)` to the sRGB gamut is `rgb(100% 73.3771% 82.2121%)` and taking that back to oklch is `oklch(0.861 0.08294 357.323)`. We still have a lightness shift (to avoid excessive chroma loss), but less so: 90% became 86.1% and a small hue shift too, 2.677 degrees. Much better than the naive clip though.

On a P3 screen, we start from `color(display-p3 1.40598 0.3464 0.8253)` which CSS gamut mapped to P3 is `color(display-p3 1 0.72344 0.82079)` and taking that back to Oklch it is `oklch(0.86331 0.10669 357.684)`. Lightness and he shifts similar to the sRGB case, but a better chroma due to the wider gamut P3 screen.

@mirisuzanne wrote:
> Here's a [codepen demo](https://codepen.io/miriamsuzanne/pen/BavZLNG) showing two colors with the same hue and lightness values, but vastly different perceptual lightness in the results.

Similarly this has [`oklch(90% 90% 0deg)`] which is `rgb(152.937% 10.3745% 83.2625%)` so naive clip gives `rgb(100% 10.3745% 83.2625%)` which is `oklch(0.6836 0.29009 338.36)`, a change in lightness from 90% to 68.36% and a change in hue of 21.64deg.

**TLDR;** clip is a **terrible** gamut mapping replacement (unless the colors to be clipped are barely out of gamut)





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


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

Received on Thursday, 16 November 2023 19:14:32 UTC