RGB describes a color the way a screen produces it, not the way a person thinks about it. Nobody says "I'd like a bit more green and a bit less red"; we say "lighter," "less vivid," "more towards orange." To bring the numbers closer to human language, models were created that separate hue, saturation and lightness. Some are simple transformations of RGB, others try to reproduce perception. Knowing their strengths and limits avoids unbalanced palettes and misleading comparisons.
HSV and HSL: RGB rearranged
HSV (hue, saturation, value) and HSL (hue, saturation, lightness) are derived from RGB with geometric formulas. Picture the RGB cube standing on one corner, with black at the bottom and white at the top:
- hue is an angle from 0° to 360°: 0° red, 120° green, 240° blue;
- saturation indicates how far the color is from gray;
- value (in HSV) or lightness (in HSL) indicates how light it is.
The main difference concerns the top end. In HSV, maximum value and maximum saturation give the pure color. In HSL, 50% lightness and maximum saturation give the pure color, while 100% lightness is always white. That is why HSL is symmetric and intuitive for lightening and darkening, and it is widely used in CSS.
The limit: they are not perceptual
HSL and HSV are convenient but misleading. Take hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue): according to the model they have the same lightness. To our eyes the yellow looks much lighter than the blue. HSL "lightness" is a calculation on RGB values, not a measure of how we perceive lightness.
The practical consequences are concrete:
- a palette built by rotating hue at constant lightness produces colors with very different contrast;
- white text can be readable on a blue and unreadable on a yellow with the same "lightness";
- gradients interpolated in HSL often pass through unexpected colors.
CIE Lab: measuring perception
In 1976 the International Commission on Illumination (CIE) defined the CIE L*a*b* space, designed so that equal distances correspond, as far as possible, to equal perceived differences:
| Component | Meaning |
|---|---|
| L* | perceived lightness, from 0 (black) to 100 (white) |
| a* | green (negative) – red (positive) axis |
| b* | blue (negative) – yellow (positive) axis |
Lab is device-independent: it describes color as a standard observer would see it under a given illuminant. That is why it is used as a reference space in color management and in industrial measurement.
Its polar form, LCh, replaces a* and b* with chroma (C, intensity) and hue (h, an angle): it effectively becomes a "perceptual HSL."
Delta E: how different two colors are
The distance between two colors in Lab is called ΔE (Delta E). The original formula is a simple Euclidean distance; later formulas, such as CIEDE2000, correct the regions where Lab is not uniform, for example the blues. As an order of magnitude, ΔE differences around 1 are at the threshold of perceptibility for an attentive observer, while values of several units are obvious. Acceptable tolerances in real work, however, should be agreed case by case.
OKLab and OKLCH: a modern alternative
Lab has known flaws: some shades of blue drift towards purple when lightness changes. In 2020 Björn Ottosson proposed OKLab, a perceptual space designed to correct these problems with simple calculations. Its polar form, OKLCH, is now supported in modern CSS through the oklch() function.
Example: three colors with the same perceived lightness and different hues.
oklch(70% 0.15 30) /* orange */
oklch(70% 0.15 150) /* green */
oklch(70% 0.15 260) /* blue */
These three colors will have similar contrast against the same background, which HSL would not achieve. Bear in mind that not every combination of values can be displayed: at high chroma, some hues fall outside the screen's gamut and the browser brings them back inside.
Which model to use
- HSL/HSV: color pickers, small adjustments, simple code. Fine when perceptual consistency is not critical.
- Lab/LCh: measurement, quality control, comparing samples, color management.
- OKLCH: designing palettes and color systems for interfaces, generating gradients, light and dark variants of a base color.
In my work, when I need to create a color scale for an interface, I start from OKLCH: I fix the hue, vary lightness in regular steps and adjust chroma so it stays within the sRGB gamut. The result is a scale in which each step "weighs" visually the same as the others.
In short
- HSL and HSV rearrange RGB into hue, saturation and lightness, but they are not perceptual.
- At equal HSL "lightness," yellow looks much lighter than blue.
- CIE Lab is device-independent and designed for perceptual uniformity; ΔE measures differences.
- OKLab and OKLCH correct some of Lab's flaws and are supported in modern CSS.
- For balanced palettes use a perceptual model and always check that colors stay within gamut.
