I haven't done frontend dev in a while, but one thing stands out to me here... they call out using OKLCH colours, which I had to look up. (For the uninitiated, this is a cylindrical projection of the also-new-to-me Oklab colour space, which appears largely unrelated to the older CIE L*a*b* colour space).
Do people actually use this? In particular, before LLMs ate the world, I mean. When I did frontend, it was hex, or if you felt fancy, `rgba(...)` (though at that point named colours had mostly fallen out of style).
Is using these less-intuitive colour encodings made more practical through the use of CSS variables?
Yes, people use it in practice. But it's not being used for the thing you're thinking of.
RGB is fine for specifying a color. I mean, there are issues with RGB colorspaces and whatnot, but if you need to pick the background of a page or the color of text, there's no real reason not to use RGB.
The problem with RGB is that it is really bad at color interpolation. You can't take the average of the red, green, and blue components of two colors and expect a usable color in the middle to come out. Instead, you need to move to a perceptual color space. CIELAB is the old perceptual color space of choice; Oklab is the new perceptual color space of choice.
Color interpolation is needed for things like gradients or information visualization, where you need to say things like "20% of the way between color A and color B".
RGB is also highly unintuitive by itself. Because additive color mixing is unintuitive. There is no way of knowing what RGB mixture corresponds to yellow unless you have memorized it.
Well I use it on my personal site: the colors change with the weather and seasons [1]. Oklab’s so-what is that the hues are perceptually a uniform brightness, unlike HSL (which I started with) where blues and reds look a lot brighter than greens and yellows at the same saturation/lightness.
So in my case where color shifting is happening, Oklab actually helps. I don’t know how it’s better than HSL for simple UI elements unless maybe you can get physically brighter values that pop out more on certain screens.
[1]: https://joeldueck.com
> Do people actually use this?
Yes. OKLCH is actually MORE intuitive when creating shades because it's based around human perception. It also supports wide color spaces like P3, where rgba is, IIRC, bound to sRGB.
The utility of these color spaces and color functions isn't lost just because LLM. Color systems haven't gone anywhere.
Would highly recommend reading up on OKLCH if you haven't already. A lot of people put a lot of effort into promoting this and bringing it to baseline..
> Is using these less-intuitive colour encodings made more practical through the use of CSS variables?
I find it more intuitive: when I want to mix colors, or algorithmically choose colors, only oklch works to give decent results.
Maybe you want to severely darken/lighten a color on a page when the user hovers over it - doing it in RGB or HSL results in a color that does not go with the existing colors. Doing it in OKLCH does.
Yes, since the last couple of years. I tend to help architect and scaffold large projects that goes on for years, and changes a lot of developers, designers in its lifecycle. I was pretty confident of moving to OKLCH about 4-years ago and have have had it as default. OKLCH values are now the source of truth for these projects, and other design elements — all the way to Powerpoints (HEX/RGB) and Print (CMYK) are derived from OKLCH. There are variations but most people don’t even know the difference.
This started way back working with my long-term business partner and he built a pretty good tool to help visualize and tinker with it.
Website https://colorcolor.in
Source https://github.com/saneef/color-color
Yes. And I'd argue it's more intuitive if all colors with the same lightness value are in fact the same lightness. Hue and chroma are pretty easy to understand too.
I love OKLCH. Awkward to say, beautiful to look at.
This is my fave article on the subject:
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...