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.



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

3 responses to “OK, OKLCH 👑”

  1. Drew Geraets says:

    One of the bigger issues with LCH is some color shifting in the blue space (to purple). OKLCH corrects this, but if you’re trying to make color ramps based on “Lightness” (e.g., for a design system), a side effect is that your color is going to “move to black” much sooner than LCH at lower lightnesses (see Twitter thread here: https://twitter.com/drewgeraets/status/1631423651269709824?s=20).

  2. Drew says:

    What is the OK in OKLCH?

    • Chris Coyier says:

      I can’t vouch for it but Google Bard says:

      The OK in OKLCH stands for Optimal Color. It is a color space that was developed to address some of the limitations of other color spaces, such as RGB and HSL. OKLCH is designed to be more perceptually accurate, meaning that it more closely matches how humans perceive color.

      The OK in OKLCH also stands for Origin-Normalized. This means that the L (lightness) axis in OKLCH is normalized to 0% for black and 100% for white. This makes it easier to compare colors across different devices and platforms.

      OKLCH is a relatively new color space, but it is gaining popularity among web developers and designers. It is a good choice for applications where accurate color reproduction is important, such as photo editing and graphic design.

Leave a Reply

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

Back to Top ⬆️