Question: how to calculate fallback?

[rienheuver]

I love oklch.com and use it regularly. I've recently been trying to generate a colour palette with oklch, but am running into problems where colours don't exist, such as oklch(45% 0.2 144).
oklch.com nicely provides a fallback, but I can't figure out how it manages to do so. I've tried using culori's rgb() function, but it gives me a different result. How do I generate a consistent colour palette with oklch without running off the charts?

[ai]

We are using culori’s clampChroma() https://github.com/evilmartians/oklch-picker/blob/main/lib/colors.ts#L128

Here is some theory about possible strategies for fallback https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl#gamut-correction

I think rgb() will use clip method. It faster but change hue.

[rienheuver]

That's a wonderful blogpost, helped me understand oklch even better than I already thought I did and also helped me solve my problem. Thanks a lot! 😄

[kosmar]

i guess have a related issue, where i am looking for the fallback for
oklch(95.63% 0.1 246)
https://oklch.com/#95.63,0.1,246,100
gives me
#d9f4ff
but webkit falls back to
#b9f8ff
and mozilla falls back to
#c6f6fe

i feel your choice makes more sense
so i am inclined to still use hex/rgb definitions in css, which would mean we still cannot use oklch in actual code? tears

is that what is meant by But still, right now, Chrome and Safari use the fast, but inaccurate, clipping method. on https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl#gamut-correction

[rienheuver]

I have to agree, I'm working on a new project this week and decided to use hex in my color palette exactly because of this. I create the palette in oklch, get the nicer fallbacks from oklch.com and then copy/paste the hex in my css properties. Relative color such as oklch(from var(--accent) calc(l - 0.1) c h); from the above blog is just too unpredictable in my opinion. I haven't tried using clampChroma() from culori for a while, but last time I tried I had difficulty implementing it