I like the color picker at https://oklch.com/ — it’s well-done and handy. I use it fairly regularly, in part because most other “color pickers” don’t offer anything P3-anything, let alone the particular model varietal you might want in CSS, which is annoying. (I emailed Sip the other day, the picker I usually use, to see what they’d say about it, but I didn’t hear back.)
There is one big misconception about OKLCH that oklch.com fosters though (at least in me). It’s this:
If you move around the controls and the cross-hair selector is on part of the model, you see a preview of that color. If you are off the model, it says “Unavailable on any device” — which makes it feel like that color is entirely invalid and will not render.
But if we use that color, oklch(58.61%, 0.185 71.72), assuming your browser supports OKLCH, it’s fine:
Imagine if we set the Lightness at 70% and the Chroma at 0.185 and rotate the Hue from 0 to 360. You might imagine, as I did, that the color will… disappear?… I guess?… at three different gaps during that rotation.
But check it out by sliding this range slider:
No gaps. The color never disappears. It’s totally fine.
So when you (cough: I) say something like “OKLCH is great for design systems and programmatic control of color because you can deterministically alter the color values and get expected results”, that’s no lie.
So, what’s the deal with those “Unavailable on any device” colors? Best I understand it, they are rather “out of range” for the color model, but there is built-in browser magic in place that pulls the values back into range. It picks the best I know what you meant color match. I suppose it is the same concept as when you are using a browser that supports P3 color, but a display that doesn’t. Magic happens that pulls the colors down into a reasonable, display-able place. It doesn’t just not show the color. I think there are competing and opinionated algorithms that do this, I’m not up to snuff on all that.
Even totally absurd values work:
Leave a Reply