What are OKLCH colors?

What are OKLCH colors?

OKLCH is a newer color model that is designed to be perceptually uniform. This means that colors are much more accurate in terms of how humans perceive them and it makes working with them much easier.

Color Models

Before being able to understand how OKLCH differs from the other color models, it is important to understand some of the basic color concepts.

Color models are systems to describe colors. These include RGB, HSL, LCH, OKLCH and more. The model determines how easy it is to manipulate or think about a color.

oklch(0.55 0.18 260) hsl(220 100% 50%) rgb(0, 128, 255) lch(60% 60 260) lab(50 -10 -50) color(xyz 0.18 0.19 0.6) #1E90FF

Gamut

Gamut is a playing field where the model lives and defines what colors are possible. Common gamuts include sRGB (the web default) and Display-P3 (used on modern devices).

Display-P3 sRGB CIE 1931 xy chromaticity diagram

There is a lot more nuance when you get into color spaces. They don’t just define a gamut, but also things like the white point and transfer function. I decided to leave those out for the sake of keeping the article simple.

... continue reading