Hue, Saturation, Value
Every colour can be described by three independent properties — hue, saturation, and value — which designers manipulate separately to achieve precise visual effects.
The RGB model describes colour the way screens create it — by mixing light. HSL (hue, saturation, lightness) describes colour the way designers think about it. These are not different colours — they are different vocabularies for the same thing. Understanding each property independently lets you make targeted adjustments: brighten without shifting hue, mute without darkening, shift warmth without losing saturation.
Hue — the colour family
Hue is the property most people mean when they say “colour.” It’s the quality that makes something red, orange, yellow, green, blue, or violet. In HSL, hue is expressed as an angle on a colour wheel from 0° to 360°, where red is at 0° (and 360°), green is at 120°, and blue is at 240°.
Hue is the most semantically loaded property of colour. Red carries urgency; blue carries calm; green carries nature or success. These associations are real but context-dependent — the same hue reads differently at different saturations and values. A muted olive green reads earthy and natural. A vivid lime green reads synthetic and energetic. They share a hue but communicate different things.
Saturation — intensity
Saturation controls how vivid or muted a colour appears. At 100% saturation, a colour is as pure and intense as it can be. At 0%, it collapses to grey — the same grey regardless of the hue. Everything in between is a controlled reduction of vividness.
High saturation commands attention. Use it for accents, interactive elements, and status indicators — things that need to stand out. Low saturation works for backgrounds, secondary text, and structural elements — things that should recede. Most of a well-designed interface is at low saturation, reserving vivid colour for the few things that need to be noticed. Using high saturation throughout creates visual noise where everything competes for attention.
Lightness — brightness relative to white
Lightness (also called value in HSV/HSB models) controls how light or dark a colour is, independent of its hue and saturation. In HSL, 0% is black, 100% is white, and 50% is the purest expression of the hue.
Lightness is the most important property for legibility. The contrast between background and text — what value contrast is about — is primarily a difference in lightness. A dark blue and a light blue share a hue and may share similar saturation, but their lightness values create the contrast that makes one readable against the other.
Adjusting independently
The practical power of thinking in HSL is that you can tune properties without unintended side effects. Want a more subtle version of your accent colour? Reduce saturation. Want a hover state that’s slightly darker? Reduce lightness by 10%. Want a warmer version of your primary colour? Nudge the hue 20° toward orange.
CSS now exposes this directly through hsl() and the even more powerful oklch(), which goes further by making perceptual brightness uniform across hues. Modern design tokens often store colours as HSL or OKLCH values for exactly this reason — they’re easier to reason about and adjust systematically. See colour models for how these formats compare.