What Are OKLCH Colors?

Summary

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-P3sRGB 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. Structure OKLCH, same as LCH, consists of three values: Lightness, Chroma and Hue. The difference between the two is the underlying color space that the color model uses, which in case of OKLCH, is OKLab. Lightness - Equal steps feel like equal changes in brightness. Ranges from value between 0 and 1 or percentage ranging from 0% to 100%. Chroma - Controls intensity of the color, similar to saturation. Hue - Controls the hue, measured in degrees ranging from 0 to 360. Consistent Brightness Let's say you want to create a couple of pill buttons and you want each one to have a different color. The usual workflow with sRGB colors would be defining the first color and then handpicking others to match it. With OKLCH, you can use the same value for all of them and only change hue. That way you create colors that look and feel the same. oklch(0.7 0.16 30)oklch(0.7 0.16 150)oklch(0.7 0.16 250)oklch(0.7 0.16 320)hsl(30 10...