Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
surma opened this issue Sep 22, 2021 · 5 comments
Closed

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

surma opened this issue Sep 22, 2021 · 5 comments
Assignees
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-color-4 Current Work

Comments

@surma
Copy link
Member

surma commented Sep 22, 2021

(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
Copy link

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: #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
Copy link
Contributor

@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 svgeesus added the css-color-4 Current Work label Sep 24, 2021
@svgeesus svgeesus self-assigned this Sep 24, 2021
@svgeesus
Copy link
Contributor

@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
Copy link
Member Author

surma commented Sep 24, 2021

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

@svgeesus
Copy link
Contributor

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

@svgeesus svgeesus added Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. labels Sep 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-color-4 Current Work
Projects
None yet
Development

No branches or pull requests

3 participants