CSS gamut mapping method gives incorrect results

[lloydk]

Example color is lch(40.383 143.28 272.5) which should have a blueish hue.

CSS Gamut mapping

https://colorjs.io/apps/convert/?color=lch(40.383%20143.28%20272.5)&precision=4

Gamut mapping using lch.c

Coloraide gamut mapping using 'oklch-chroma'

[lloydk]

I think this is just a result of the weird shape of the OKLCH color space for imaginary colors in the blueish hue range. I had assumed that converting lch(40.383 143.28 272.5) to oklch would result in an imaginary oklch color with the same hue. So I think this can be closed.

[facelessuser]

I see you are using ColorAide as an example. Keep in mind a couple of things:

You didn't specify a gamut, so no gamut mapping occurred when you used oklch-chroma as LCh has no defined gamut. Then when we went to display it on the site, we determined the color was still out of gamut (indicated by the pink border) and we used the default gamut mapping method which is still LCh. Here are actual results when comparing between LCh and OkLCh gamut mapping using the same color.

If the color is quite extreme in the bluish region, OkLCh kind of breaks down once you are out of the visible gamut. It's one of the reasons I still default to LCh gamut mapping even if OkLCh does better in many instances. LCh doesn't handle certain regions perfectly (purple shift in blue region), but the shape of LCh in extreme gamuts gives more sane results generally. I think it ends up being less surprising generally. I still think OkLCh does better when the colors are not so extreme, I just think you have to use it in situations where OKLCh doesn't break down.

I've posted this before, but we can see this when OkLCh is rendered in the ProPhoto gamut.

To illustrate why the algorithm fails, let's try visualizing it by gamut mapping lch(40.383 143.28 272.5) in ProPhoto. There's no reliable way to gamut map these situations.

.

Some Lab color spaces, while not having a defined gamut, can still have reasonable limits. Even spaces like CAM16 can break down if they are rendered in a large enough gamut. Notice blue twisting back into the color solid.

[lloydk]

Thanks for the explanation. I think I may end up gamut mapping using LCh for the color spaces where the results look really broken.

At any rate this isn't an issue so I'm gonna close it.

[facelessuser]

That makes sense. If you are using ColorAide as a comparison, it might not always match what Color.js generates as I use LCh with a D65 white point for gamut mapping and Color.js uses D50. Just an FYI.