Cool Stuff pt. 1 - oklch()

What is oklch()?

oklch() is a color function introduced in the CSS Color 4 specification that fixes several problems present in other color functions like rgb() hex, and hsl() in addition to allowing access to more colors.

How is it better?

First, oklch() colors are just easier to understand. With oklch(), you just need to decide how bright you want the color, how saturated you want it, and the degree on the color wheel. No more messing with hexadecimal numbers or guessing how much blue or red you need.

Wait, that just sounds like hsl().

And you would be right. But one advantage it has over hsl() is that the lightness of oklch() is based on perceived lightness. Meaning, when you modify your color’s hue, the brightness stays the same. See the example below.

See the Pen Untitled by Brian Michael Poblete (@brian-pob) on CodePen.

Using oklch(), we know that changes to hue won’t lead to brightness-related contrast issues!

References