w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 661 forks source link

[css-color-5] lch/lab out of gamut mapping #6668

Closed surma closed 3 years ago

surma commented 3 years ago

(I tried to figure out if gamut mapping is prescribed anywhere, but couldn’t quite get clarity. Please let me know if I missed something in the specs here.)

Safari TP (I’m using TP 132) supports lab() and lch() but the gamut mapping they utilize is, in my opinion, unexpected. Specifically, any value with 0% lightness can end up being quite colorful if the remaining parameters are big enough. Mathematically, that makes sense: lch(0% 100 0) maps to rgb(37.59% -21.03% 3.46%). Safari now performs clamping to gamut map, using rgb(37.59% 0% 3.46%) as the rendering color.

Screen Shot 2021-09-22 at 16 44 40

Similar unexpected behavior can be triggered with lab().

I wonder if it would be appropriate, at least for color spaces that model “lightness” to be a bit more prescriptive on how gamut mapping should work, i.e. that L=0 can only result in black.

cc @argyleink

facelessuser commented 3 years ago

As far as I know, there is no gamut mapping defined in the CSS color spec except clipping, but it seems they might be working towards officially define a better way as this issue seems to suggest that maybe OkLab is a better fit for such gamut mapping: https://github.com/w3c/csswg-drafts/issues/6642. Lab and LCH are not perfect color spaces and seem to have some issues in the blue range and the distance calculation is far more complex.

The CSS color authors have a JS app where they sort of test out color stuff, and in their documentation, they talk about gamut mapping via compressing the chroma in the LCH color space: https://colorjs.io/docs/gamut-mapping.html#so-how-does-colorjs-handle-all-this. This gives much more reasonable colors, even if LCH isn't a perfect space. I imagine with Oklch that the results will be even better.

svgeesus commented 3 years ago

@surma You didn't miss anything in the specs, and there is an open issue to define gamut mapping in CSS Color 4: Define gamut mapping. Also Should lab() colors which are outside the sRGB gamut be rendered on capable displays? where the main question has been answered but the issue is still open as it depends on the missing gamut mapping section.

I had some problems writing that section, both in terms of the quality of the result and also in terms of the computational complexity. I'm now happy with a solution, hence Add OKLab, OKLCH which both improves the quality and decreases the computational cost.

@facelessuser yes with OKLCH the results are better, see the slides for my color workshop talk

svgeesus commented 3 years ago

@surma and yes, clamping as a gamut mapping technique is terrible and gives very different colors, which is why Color 4 needs to have a gamut mapping section. Which I have been trying to write for a while. (I also cover that in my presentation).

surma commented 3 years ago

Thanks for taking the time, @svgeesus. Seems to me like this can be closed then?

svgeesus commented 3 years ago

I think so, in this case. Thanks for checking though, much appreciated!