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.


CodePen

I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️