Color Models Explained: HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH
What each color model is actually for, when to use which, and why OKLCH is the modern default for design systems.
6 min read · updated 2026
The screen models: HEX and RGB
RGB describes a color as three channels of light (0–255 each). HEX is nothing more than RGB written in base 16 — #ff5733 means r=255, g=87, b=51. Both are device-oriented: they say "emit this much of each primary" without describing what the color looks like.
The intuition models: HSL and HSV
HSL (hue, saturation, lightness) and HSV (hue, saturation, value) rearrange RGB into attributes humans can reason about: hue is the angle on the color wheel (0–360°), saturation is intensity, lightness/value is how much white or black is mixed in. Sliders in pickers work in these spaces because "more saturation" maps to a single knob.
Their weakness: HSL lightness is not perceptual. Yellow at HSL lightness 50% is far brighter to the eye than blue at 50%. That is why lightness-based scales built on HSL look uneven.
The perceptual models: LAB and OKLCH
CIELAB (and its polar form LCH) was designed so that equal numeric distances look like equal visual differences. OKLab/OKLCH (Björn Ottosson, 2020) is its modern successor: it fixes LAB's hue-shift in the blue region and its lightness non-uniformity, and it is now in the CSS spec as oklch() — so you can write the same values you design with.
Practical consequences: gradients interpolated in OKLab do not pass through muddy gray; lightness ramps (50→950) measured in OKLCH look evenly spaced; hue rotation never changes perceived lightness.
The print model: CMYK
CMYK describes ink coverage on paper. Converting screen colors to CMYK is lossy and depends entirely on the ICC profile of the specific press and paper. The cmyk() values shown on this site are the naive sRGB conversion — useful for intuition, not for sending to a printer. For press work, take the HEX into a color-managed application with the printer's profile.