OKLCH, the one true ring
First off, to see it in action, go here: https://oklch.com/ (They will probably do a better job of explaining it too)
Secondly, there is nothing this blog is going to cover that can't be covered elsewhere better, the first point is proof of that. So why am I making this? I like it! And if nothing else, I am just sharing some joy that I found with frontend development.
Ok (LCH), so what is it?
Its allllll here: https://en.wikipedia.org/wiki/Oklab_color_space
Most people are used to RGB, red green and blue. This is generally a pretty good system since it replicates what a monitor actually displays, red green and blue LEDs. LCH stands for Lightness, Chroma and Hue. But honestly that doesn't mean much to me.
I like to think of it as lightness, vibrancy and colour:
- Lightness - How light the colour is. The higher it is, the closer to white it is. The lower it is, the closer to black it is.
- Chroma - How vibrant the colour is. The higher it is, the closer to hot pink, the lower, the closer to pastel.
- Hue - The actual colour. 0 is red, 360 is also red, all the other colours are in the middle.
The OK in OKLCH represents its link to the OKLAB colour space. For the most part, you can just think of OKLCH as being the OK version of LCH. Its just a little better for hues between blue and purple when adjusting lightness. I think I read somewhere that its better adjusted for modern screens, but I don't know if thats true.
So why use it?
Because its easy! You want a light purple? Find purple and might it lighter! No messing around with green and red, going to external websites to get a Hex code.
Even better, you can allow users to fully pick their colours on your website without ruining the look. Everything is the same vibrancy, same lightness, but the user can pick the actual colour. The slider at the top is trying to show this, but I'm also not great at this frontend stuff...
Conclusion
Use it, its great. Here are some more blogs to convince you:
- https://blog.jim-nielsen.com/2023/ok-lch-im-convinced/ - Where I originally discovered this! Generally does great blogs, worth reading!
- https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl - The people who made the OKLCH website! They actually explain it correctly.
Bye!
