Thinking in HSL
Hue, saturation, and lightness — the model that matches how humans perceive color.
What HSL is
RGB tells you *how much* of each channel — but not what color you're actually seeing. HSL reframes color into three human-friendly axes: Hue (which color, 0–360° around the wheel), Saturation (how vivid, 0–100%), and Lightness (how bright or dark, 0–100%).
Every color picker is really an HSL explorer. Want a darker shade? Drop lightness. Want a muted tone? Drop saturation. No guessing at three RGB numbers.
Hue (H)
Position on the color wheel. 0°/360° = red, 120° = green, 240° = blue.
Saturation (S)
Vividness. 0% = grey, 100% = fully saturated color.
Lightness (L)
Brightness. 0% = black, 50% = pure color, 100% = white.
To make a color less vivid (more grey) without changing its hue or brightness, you adjust…
In HSL, a lightness of 0% always produces…
Navigating the hue wheel
Memorize six landmarks on the hue wheel and you can navigate any color: 0°/360° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta. Everything else lives between these anchors.
Opposite sides of the wheel are complementary — they create maximum hue contrast. Adjacent positions (~30° apart) are analogous — they feel harmonious and calm.
| Hue | Degrees | Complement |
|---|---|---|
| Red | 0° / 360° | Cyan (180°) |
| Yellow | 60° | Blue (240°) |
| Green | 120° | Magenta (300°) |
| Cyan | 180° | Red (0°) |
| Blue | 240° | Yellow (60°) |
| Magenta | 300° | Green (120°) |
On the HSL hue wheel, green sits at approximately…
Adjusting color with HSL
HSL makes common adjustments trivial. A shade (darker version) drops lightness. A tint (lighter version) raises lightness. A tone (muted version) drops saturation. Each is one slider move — no recalculating RGB.
This is why designers think in HSL even when the output format is hex. Pick your base color, then generate variants by moving one axis at a time.
Shade ↓
Lower lightness. Same hue, same saturation. Darker version of the color.
Tint ↑
Raise lightness. Same hue, same saturation. Lighter version of the color.
Tone ↓
Lower saturation. Same hue, same lightness. Muted/greyed version.
To create a 'tone' (muted version) of a color in HSL, you…