Wait a second! The original sentence is "The king is dead, long live the king!" But in that case, the first king is not the same as the second king. So wouldn't it be better to say something like:
RGB is dead, long live OKLCH!
That's much better. It is clearer that RGB –and the "RGB-based" colors like HEX and even HSL– are no longer the things to use in CSS. There's a new sheriff in town, that's OKLCH, and it's the color format that should be used moving forward.
Except... is that really the case?
OKLCH has many positive features that make it an ideal candidate:
- It supports more colors: 50% more displayable colors than standard RGB! And that's a lot.
- It handles the lightness in a more consistent way than RGB: two colors with the same L value will have a similar perceived darkness/lightness.
- It is more human-readable: definitely true for lightness (refer to previous point), but debatable for hue and chroma.
- It is more focused in human perception than in the machine: the way it represents colors is closer to how the human eye perceives them.
- More natural transformations between colors: no more unexpected jumps in colors or gray in-betweens.
In summary, OKLCH is amazing. More available colors, better perception, better transformations... It beats RGB in almost any aspect that we compare the two. But does that mean you should ditch RGB and update all your projects into OKLCH?
Well... the answer is "it depends." RGB is not being removed from the standard and will always work in CSS. OKLCH provides brighter and more vibrant colors, but not all designs will require them.
But it also comes with some baggage:
- It is widely supported... except by not-so-old browsers: this problem will die down with old browsers but, at this moment, around 7% of the browsers online don't support OKLCH. It is small number, but big enough to consider fallbacks.
- It requires heavier calculations than RGB: color spaces like LCH have been around for decades, but they weren't implemented on the web earlier due to hardware limitations. OKLCH was created in late 2020 to solve some of those limitations and rendering issues, but still requires more computation than other color spaces.
The support is changing rapidly as browsers get deprecated, and the heavier computational cost is not a big deal as modern browsers are optimizing this instantly, so it is a low price to pay.
And you may be using OKLCH without knowing! Some browsers use OKLCH to interpolate transition colors because, as mentioned above, the transition between colors is more natural. So, it doesn't matter if you use OKLCH, RGB, Lab, HEX, or HSL... behind the scenes, they'll be converted to OKLCH for color transitions.
In summary, OKLCH is a superior format in many aspects and should be the favorite choice moving forward, especially if you want to get vibrant colors, precise control, and more natural gradient interpolations.
But don't feel obligated to drop the color format that you love to jump into OKLCH! RGB (and all the other color formats in CSS) are here to stay. As with all things in web development, use the tool that you need. And in some cases, OKLCH may not be needed.
I plan to still use RGB and hex in many of my sites to define font or background colors. They may seem old and rusty, but that's just #FFA500 for you! And it just works nicely.
