oklch() CSS Color

Best color notation in CSS


It's the best way of writing colors we have on the web right now.

  1. Built-in future-proofing of your colors. They will improve as hardware improves.
  2. 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])

In practice:

.blue {
background-color: oklch(60% 0.4 240);

.blue-light {
background-color: oklch(90% 0.4 240);

.blue-transparent {
background-color: oklch(60% 0.4 240 / 0.5);

History #

I remember hearing about it from Lea Verou in 2020[1], 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[2] and got curious.

First, it's no longer called lch but oklch. Why is that?
It turns out there was a bug in blue lightness causing the color to become more purple[3]. But, it's fixed in oklch so that's what we can use now. Browser support is pretty good as well[4].

Learn oklch #

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[5] 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.

  1. LCH colors in CSS: what, why, and how? | Lea Verou ↩︎

  2. OK LCH, I’m Convinced | Jim Nielsen ↩︎

  3. LCH vs OKLCH: what is the difference? ↩︎

  4. oklch | MDN ↩︎ ↩︎

  5. More OKLCH Musings | Chris Coyier ↩︎

Share on Hacker News
Share on LinkedIn

← Home

Want to learn more?

Sign up to get a digest of my articles and interesting links via email every month.

* indicates required

Please select all the ways you would like to hear from Krzysztof Kula:

You can unsubscribe at any time by clicking the link in the footer of my emails.

I use Mailchimp as a marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.