OK, OKLCH 👑

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.