When each color format actually helps
HEX is the format most designers and developers recognize: six hexadecimal digits that are easy to copy from design tools and paste into CSS. But HEX is opaque for color logic — if you want a 20% lighter version of a color, HEX math is not intuitive. HSL is.
HSL (Hue, Saturation, Lightness) maps directly to how humans think about color. Hue is the color angle (0–360°). Saturation is how vivid it is. Lightness is how bright. To make a hover state that's 10% darker, just subtract 10 from the L value. To make a muted variant, lower the S. This is why CSS custom properties in design systems are often defined in HSL — it makes generating color scales in code straightforward.
A quick format reference
| Format | Example | Best used when |
|---|---|---|
| HEX | #3B82F6 | Copying from Figma/Sketch, CSS shorthand, design tokens |
| RGB | rgb(59, 130, 246) | Canvas API, WebGL, JavaScript color calculations |
| RGBA | rgba(59, 130, 246, 0.5) | CSS with opacity, overlay effects |
| HSL | hsl(217, 91%, 60%) | Programmatic color scales, theming, hover states |
| HSLA | hsla(217, 91%, 60%, 0.8) | HSL with alpha channel |
| HSB / HSV | hsb(217, 76%, 96%) | Photoshop/Illustrator; not native in CSS |
Contrast and accessibility — what to check
WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for body text. But the ratio number alone is not the full picture — the same 4.5:1 pair that passes on a calibrated monitor may fail badly with screen glare or reduced brightness. I covered the specifics of where 4.5:1 still fails in Color Contrast Ratios: What WCAG AA and AAA Actually Mean. Use our Contrast Checker to test specific color combinations.