The dimension of color that describes how light or dark a color is, from black to white, independent of its hue and saturation.
Lightness is the attribute of a color that describes how bright or dark it appears, on a scale from pure black (zero lightness) to pure white (maximum lightness). Together with hue and saturation, lightness is one of the three dimensions needed to fully specify a color in models like HSL and OKLCH.
At 0% lightness, any hue becomes black. At 100% lightness in HSL, any hue becomes white. The pure, fully saturated version of a color sits at 50% lightness in HSL, but the perceived brightness of that pure color varies significantly by hue.
Different color models define and measure lightness differently. HSL's lightness is mathematically simple but perceptually non-uniform. OKLCH's lightness (the L in OKLCH) is perceptually uniform: a change of 10 lightness units looks like the same perceptual shift regardless of hue.
Lightness is the single most important dimension for contrast and accessibility. The WCAG contrast ratio formula is fundamentally based on the difference in relative luminance (closely related to lightness) between two colors. Text is readable because it differs in lightness from its background. Hue contrast alone is insufficient.
Lightness also drives visual hierarchy in UI design. Headlines are typically darker (or lighter in dark mode) than body text; disabled states use reduced lightness contrast; backgrounds and surfaces are distinguished by small lightness steps. An entire UI can be designed effectively in a single hue if the lightness range is rich enough.
In HSL: Adjust the L value from 0%-100%. Simple, but perceptually non-uniform. A 10-point lightness increase looks much larger in dark colors than in light ones.
In OKLCH: Adjust the L value from 0-1 (or 0-100 in some tools). Perceptually uniform: a consistent change in L produces a consistent perceived change. This is why OKLCH is preferred for generating shade scales programmatically.
Generating shade scales: A shade scale is a set of lightness steps for a single hue and saturation. In a well-designed scale, each step represents an equal perceptual jump in lightness. Use a contrast checker to verify accessibility across the scale.
A lightness scale for a blue hue in OKLCH (perceptually uniform steps):
Lightness is the perceptual dimension of light-to-dark in HSL. Brightness (or Value) is the same concept in HSV/HSB. Luminance (relative luminance in WCAG) is a physically-derived measure of how much light a color emits relative to white. All three describe the light-to-dark quality of a color, but they are computed differently and have different perceptual accuracy. OKLCH lightness is the most perceptually accurate of the design-facing measures.
Because HSL lightness is mathematically defined, not perceptually defined. The human eye has different sensitivity to different wavelengths. We are most sensitive to yellow-green light and least sensitive to blue. So a yellow hue at 50% HSL lightness reflects more perceived brightness than a blue at the same lightness. OKLCH corrects for this by basing its lightness channel on measured human visual response.
Most design system shade scales have 10-12 steps, typically labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and sometimes 950. This range covers all practical UI uses from background tints (lightest) to text on white backgrounds (darkest). Fewer steps leave gaps in coverage; more steps introduce ambiguity about which shade to use.