TLDR; #

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.

Format:

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.

Feedback or Comments?

← Home

Want to learn more?

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