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

It's probably important to note that there likely isn't a perfect gamut mapping approach, each will probably have some quirks and can be useful if their limits are understood, but anything is better than clipping, which currently is what all browsers do.

OkLCh generally does well for gamut mapping when colors are within the model's ideal range. OkLCh seems to do decent up through rec2020 as the color space maintains a reasonable geometric shape. It also avoids the purple shift that occurs when gamut mapping with LCh.

![rec200_in_oklch](https://github.com/w3c/csswg-drafts/assets/1055125/9b1d01dd-ecb8-411c-a8cc-8e5b7afcf8d6)
https://facelessuser.github.io/coloraide/demos/3d_models.html?space=oklch&gamut=rec2020&edges=false&aspect=false&ortho=false

But we can see that the geometry of the OkLCh space becomes quite distorted for a space like ProPhoto RGB which extends past the visible gamut. This distortion helps contribute to issues like https://github.com/w3c/csswg-drafts/issues/7071.

![prophoto_in_oklch](https://github.com/w3c/csswg-drafts/assets/1055125/8c0b5e6e-39eb-4635-9e00-b8f6df0a6859)
https://facelessuser.github.io/coloraide/demos/3d_models.html?space=oklch&gamut=prophoto-rgb&edges=false&aspect=false&ortho=false

Gamut mapping with LCh has its own issues, purple shift in the blue range as an example, but the space does hold its shape much better with extreme gamuts allowing for more consistent mapping, but still, some corner cases exists, like with bright yellows due to the geometry in that hue region.

![prophoto_in_lch](https://github.com/w3c/csswg-drafts/assets/1055125/fd7bb6d0-53b5-4e42-91f0-c7c8373fd509)

https://facelessuser.github.io/coloraide/demos/3d_models.html?space=lch&gamut=prophoto-rgb&edges=false&aspect=false&ortho=false

Clipping is still probably worse than either of these [options](https://facelessuser.github.io/coloraide/playground/?code=from%20coloraide%2eeverything%20import%20ColorAll%20as%20Base%0A%0Aclass%20Color%28Base%29%3A%0A%20%20%20%20INTERPOLATOR%20%3D%20%27css-linear%27%0A%20%20%20%20FIT%20%3D%20%27oklch-chroma%27%0A%20%20%20%20POWERLESS%20%3D%20True%0A%20%20%20%20CARRYFORWARD%20%3D%20True%0A%0AColor%2einterpolate%28%5B%27oklch%2890%25%2010%25%200deg%29%27%2C%20%27oklch%2890%25%2090%25%200deg%29%27%5D%2C%20space%3D%27oklab%27%29%0A%0Aclass%20Color2%28Base%29%3A%0A%20%20%20%20INTERPOLATOR%20%3D%20%27css-linear%27%0A%20%20%20%20FIT%20%3D%20%27lch-chroma%27%0A%20%20%20%20POWERLESS%20%3D%20True%0A%20%20%20%20CARRYFORWARD%20%3D%20True%0A%0AColor2%2einterpolate%28%5B%27oklch%2890%25%2010%25%200deg%29%27%2C%20%27oklch%2890%25%2090%25%200deg%29%27%5D%2C%20space%3D%27oklab%27%29%0A%0Aclass%20Color3%28Base%29%3A%0A%20%20%20%20INTERPOLATOR%20%3D%20%27css-linear%27%0A%20%20%20%20FIT%20%3D%20%27clip%27%0A%20%20%20%20POWERLESS%20%3D%20True%0A%20%20%20%20CARRYFORWARD%20%3D%20True%0A%0AColor3%2einterpolate%28%5B%27oklch%2890%25%2010%25%200deg%29%27%2C%20%27oklch%2890%25%2090%25%200deg%29%27%5D%2C%20space%3D%27oklab%27%29):

<img width="1335" alt="Screenshot 2023-10-09 at 6 08 20 PM" src="https://github.com/w3c/csswg-drafts/assets/1055125/a74b0dff-7370-4854-a8e2-5e350973c8ab">






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


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

Received on Tuesday, 10 October 2023 00:10:53 UTC