HSL reimagines color in a way that matches human intuition. Instead of three RGB channels that all mix together, HSL exposes three independent properties: hue, saturation and lightness. This makes HSL the preferred model for design systems and palettes.
The Three Properties
Hue (H)
Hue is the color itself, measured as an angle on the color wheel:
- 0° = Red
- 60° = Yellow
- 120° = Green
- 180° = Cyan
- 240° = Blue
- 300° = Magenta
- 360° = Back to red
Saturation (S)
How vivid or muted the color is:
- 0% = Pure gray
- 50% = Muted
- 100% = Fully vivid
Lightness (L)
How light or dark:
- 0% = Black
- 50% = Pure color
- 100% = White
Example: OmniColor Blue
hsl(215, 84%, 51%) breaks down as:
- 215° — Hue, a blue-cyan color
- 84% — High saturation (vivid)
- 51% — Medium lightness (near pure color)
Why Designers Prefer HSL
Easy Lightness Scaling
To create 10 shades of a color, keep hue and saturation, vary lightness from 10% to 90%. This is the basis of every design system 50-900 scale.
Easy Palette Generation
To create an analogous palette, shift hue by ±30°. For a complementary palette, shift by 180°. Everything else stays constant.
Easy Theme Switching
Dark mode becomes trivial: swap lightness values, keep hue and saturation. The result is a color system that looks intentional in both modes.
Easy Accessibility Tuning
To increase contrast, lower lightness. To increase readability, adjust saturation slightly. HSL gives you independent control over each axis.
HSL vs RGB
Both describe sRGB colors, but the coordinate systems differ:
- RGB: Independent channels that mix. Hard to predict how a color changes when you adjust a channel.
- HSL: Independent properties. Intuitive to adjust — changes track expectations.
Converting between them is lossless: hsl(215, 84%, 51%) = rgb(21, 94, 239) = #155EEF.
HSL vs HSV
HSL and HSV share hue and saturation but differ in the third axis:
- HSL lightness: 0% = black, 50% = pure color, 100% = white
- HSV value: 0% = black, 100% = pure color (no upper limit toward white)
HSL is more intuitive for design; HSV maps better to how color pickers work.
Practical HSL in CSS
color: hsl(215, 84%, 51%); /* classic comma syntax */
color: hsl(215 84% 51%); /* modern space-separated */
color: hsl(215 84% 51% / 0.8); /* with alpha */All three syntaxes work in modern browsers.
HSL for Design Systems
Design tokens defined in HSL are easier to reason about:
:root {
--brand-h: 215;
--brand-s: 84%;
--primary: hsl(var(--brand-h), var(--brand-s), 51%);
--primary-light: hsl(var(--brand-h), var(--brand-s), 90%);
--primary-dark: hsl(var(--brand-h), var(--brand-s), 25%);
}Changing one brand hue variable updates the entire system.
Limitations
HSL has one drawback: lightness isn't perceptually uniform. hsl(215, 84%, 30%) and hsl(30, 84%, 30%) may look different in brightness despite having the same L value, because human vision isn't linear with lightness. This is why OKLab and similar perceptual spaces were introduced. For most design work, HSL remains useful.