When I first dived into the topic of colors, it seemed to me that I was at least studying nuclear physics. It still does, though. 😅

Disclaimer:

1. I might have some inaccuracies in this article.
2. Sometimes I used definitions provided by Google AI, because it was challenging for me to convey/explain the ideas with precise words. But mostly there are links and definitions from Wikipedia and other resources.

There are many notions and abbreviations: CIE 1931, RGB, sRGB, HSL, CMYK, Oklab, LCH, OKLCH, P3 Colors, Adobe RGB, Rec.2020...

A few years ago we all used good old HEX or HSL in CSS, and everything seemed perfectly fine.

Then, Björn Ottosson introduced the OKLCH model in December 2020.

In Tailwind 4, the color palette already uses OKLCH. I haven't yet migrated to Tailwind 4, so I was curious: what the heck is oklch (42.4%, 0.199, 265.638)?

Here I'll tell you how I understand it, based on a few resources I've listed at the end of the article.

CIE 1931

First of all, there is the CIE 1931 color space.

So I assume that CIE 1931 is basically a map of all colors humans can see.

But to be precise, it's not fully correct. The diagram represents the colors humans can perceive in terms of hue and saturation, but not their brightness.

In any case, I think about it as a "master map of colors". It might be an oversimplification, but it's enough for practical usage.

What's the difference between RGB and sRGB?

​RGB is an additive color model, in which the red, green, and blue colors are added together. There is also a subtractive color model, CMYK. But it's a different story.

​sRGB stands for standard RGB. It is a color space standard developed by Hewlett-Packard and Microsoft in 1996 to ensure consistent color display across different devices like computer monitors and printers.

sRGB is a subset of CIE 1931, which approximately looks like this:

So, there is a "master gamut" that has all the colors and a subset, which is sRGB.

In the sRGB space we can describe the green color by using HEX, RGB, or HSL values.

P3 Colors

For many years sRGB was enough because displays couldn’t show anything wider anyway.

The first monitors capable of reproducing a larger gamut appeared around 2008 (HP DreamColor with ~97% DCI-P3).

Apple later standardized a consumer-friendly version called “Display P3” in 2015, and by 2016 P3 began spreading across laptops, phones, and desktop monitors.

Along with P3, there are other wide-gamut color spaces such as AdobeRGB (mainly used in photography and print workflows) and Rec.2020 (a much larger space defined for UHD/HDR video and modern TVs).

They also cover a wider range of colors compared to sRGB but are used in different industries and for different hardware.

OKLAB and OKLCH

OKLAB is a more modern, perceptually uniform color space developed in 2020. Perceptually uniform means that colors change in a way that feels visually even and consistent for humans.

In CSS you can set by using the oklab function:

It takes three params:

L (lightness) - Ranges from 0.0 (black) to 1.0 (white)

a (Green-Red axis):

1. Determines the amount of green or red.
2. Negative values are green, positive values are red.
3. Values can theoretically be unbounded but are often in a range of -0.4 to + 0.4

b (Blue-Yellow axis):

1. Determines the amount of blue or yellow.
2. Negative values are blue, positive values are yellow.
3. Values can theoretically be unbounded but are often in a range of -0.4 to + 0.4

While OKLCH, as defined in MDN:​

So!

In summary, OKLab and OKLCH are two coordinate systems describing the same perceptually uniform color space, with OKLCH being the more user-friendly option.

It takes three params as well:

1. L (Lightness) - Perceived brightness of the color, ranges from 0 to 1 (or 0% to 100%)
2. C (Chroma) - Color intensity or vividness. Its minimum useful value is 0, while the maximum is theoretically unbounded (but in practice does not exceed 0.5).
3. H (Hue) - The type of color, such as red, blue, or green. Ranges from 0 degrees to 360 degrees.

This is way more readable.

But why do we need OKLCH?

Wide gamut support, e.g. P3 Colors

In Chrome developer tools, if you set a color using oklch, you'll see this picture showing extra colors available:

OKLCH doesn’t increase the gamut, it just helps navigate it more predictably.

It is better than HSL for accessibility reasons.

Look at the picture from this article.

In both HSL and OKLCH only the HUE value has been changed, which made HSL version inaccessible while OKLCH remains accessible.

Must read (!)

This https://oklch.net/ and this https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl.

And here is the converter https://oklch.com/​

Conclusion

It's time to switch to oklch, use wider gamuts, more vibrant yet accessible colors.

Have a wonderful week!