It's the best way of writing colors we have on the web right now.
- Built-in future-proofing of your colors. They will improve as hardware improves.
- The same numerical change in coordinates produces the same perceptual color difference. This one makes it a lot easier to create color palettes.
oklch(Lightness Chroma Hue[ / Alpha])
background-color: oklch(60% 0.4 240);
background-color: oklch(90% 0.4 240);
background-color: oklch(60% 0.4 240 / 0.5);
I remember hearing about it from Lea Verou in 2020, but I have to admit that browser support wasn't there yet and I forgot about it.
But, recently I stumbled upon Jim Nielsen’s blog post and got curious.
First, it's no longer called
oklch. Why is that?
It turns out there was a bug in blue lightness causing the color to become more purple. But, it's fixed in
oklch so that's what we can use now. Browser support is pretty good as well.
If you want to learn more then I can recommend the MDN article[4:1]. It's clear and practical.
Update 2023-10-23 #
It's worth noting that
oklch is not perfect and there may be pros and cons to using it depending on the situation. But, it still seems like a good default for most people.
LCH colors in CSS: what, why, and how? | Lea Verou ↩︎
OK LCH, I’m Convinced | Jim Nielsen ↩︎
LCH vs OKLCH: what is the difference? ↩︎
oklch | MDN ↩︎ ↩︎
More OKLCH Musings | Chris Coyier ↩︎
Feedback or Comments?
Want to learn more?
Sign up to get a digest of my articles and interesting links via email every month.