More OKLCH Musings

I was reading Robin’s Design systems, color spaces, and CSS where he was coming to the understanding that one of the reasons that the OKLCH color model (the oklch() function in CSS) is awesome is because of the “predictable lightness values” and quotes from the Evil Martians post that made the point very strongly. “Uniform perceived lightness” I’ve also heard it called.

I was also just at Web Unleashed in Toronto and was chatting with Lea Verou after my talk and she re-emphasized that point. I think the uniform perceived lightness is the main point of OKLCH. The reason the color model has that wild shape is, I think, entirely this purpose.

It does do other cool things, as my slide said:

And as I’ve written before…

… 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”.

I don’t think any of those thing are wrong, but here’s some augmented thinking:

1. “anything any older format can do” — True! But it lacks the copy and pasteablity of HEX, and I feel like that alone hampers any color model because we are creatures of convenience. Just as big: virtually no design tooling, or even color-specific tooling (e.g. “color pickers”) support OKLCH, so just getting a color into your CSS is a non-trivial adventure.
2. “share same human readability that HSL has” — Pretty much! Although to be fair, I don’t really understand what Chroma is and how it’s different than Saturation. The 0 to 100% model of Saturation feels more straightforward than the 0.0 to 0.33-ish range of Chroma.
3. “uniform perceived brightness” — Huge
4. “gradient interpolation” — I don’t know that OKLCH is a straight win in gradients. While it generally goes through more vibrant space than sRGB, it can do some weird stuff. Looking at examples, it feels to me so unpredictable I’d almost rather sRGB. Tell you what though, OKLAB feels generally the best to me across the board.
5. P3 — This is totally a reason to use OKLCH, it’s not unique to it. You get P3 in LCH, OKLCH, LAB, OKLAB, color(display-p3 …), and maybe some more you probably access also via color() but I don’t know the whole list.

On #4, the way to fiddle with which color space a gradient interpolates in is like this:

.el {
  background: linear-gradient(
    to right 
    in oklch,
    yellow,
    blue
  );
}
Code language: CSS (css)