My brain has a strong desire to crown a winner of technological choices so I can choose it when options come up, or at least have a strong, consistent algorithm for the choosing.
So now that CSS has a bunch of new color options, my brain is trying to do that crowning. It is helped along by others who know a lot more than I do painting a rosy picture of one format in particular: OKLCH.
- Lea Verou: LCH colors in CSS: what, why, and how? — “LCH colors in CSS is something I’m very excited about, and I strongly believe designers would be outraged we don’t have them yet if they knew more about them.”
- Jim Nielsen: OK LCH, I’m Convinced — “One color syntax to rule them all!”
- Andrey Sitnik / Travis Turner: OKLCH in CSS: why we moved from RGB and HSL — “OKLCH is the best color space for color transformations and it’s better to become familiar with its axes by using them in color definitions now.”
- Vojtěch Vidra / Ondřej Pešička: LCH is the best color space! — “In our opinion, it is currently the best color space for creating UI color palettes.”
So here’s my calculus:
- OKLCH can do anything any older format can do.
- OKLCH shares the same human readability that HSL has.
- OKLCH has “uniform perceived brightness”, so that first number behaves way more predictably than it does in HSL.
- OKLCH makes the colors that happen in gradient interpolation better.
- OKLCH allows us to use the “new” set of colors that modern displays support (P3), many of which are deliciously rich, and “beyond”.
That’s a lot of stuff that is all a big deal. I don’t think any of the other new color choices check all of those, nor add any that aren’t on this list.
The only downside is browser support. As I write, only Safari supports it. Chrome, hopefully very soon? It’s very easy to write a fallback, though:
.super-pink-header { background: rgb(255, 44.71, 87.98); background: oklch(65% 0.284 17); }Code language: CSS (css)You can get your hands on those values easily by preprocessing or in this nice picker:
There is another kind of fallback, the “I’m in a browser that supports this but on a display that does not”, but fortunately, I think all the magic is in place for the color to suck back down as close as that display can get.
SIDE NOTE #1: Likely, this thinking isn’t exactly appropriate, as I’m quite sure all these new color declarations are there for a reason. Oh well, I can’t fight it. Free blog post idea: “When using OKLAB is better than using OKLCH”. I assume it will mostly be “because sometimes the color coordinate system of LAB produces more desirable gradient interpolations in super specific situations”.
SIDE NOTE #2: If you’re curious about LCH vs. OKLCH, my understanding is OKLCH is just a little better, fixing some issues with LCH, so we might as well use it instead. I kinda wish LCH just adopted OKLCH rather than having two things, but again that’s probably for good reason.
Related
ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgZnxzfo6oomanm6GwqXmEf2decXZahnJxmGpm