What is HSL? The intuitive color format for designers and programmers
HSL (Hue, Saturation, Lightness) describes colors the way people naturally think about them rather than the way screens produce them. Hue is the base color on a 0-360 degree wheel (0 = red, 120 = green, 240 = blue). Saturation is the color intensity from 0% (gray) to 100% (vivid). Lightness is the brightness from 0% (black) to 100% (white), with 50% being the pure hue.
Calculator
How this is calculated
HSL's killer feature is that you can reason about color relationships in your head. Want a lighter version of a color? Increase the L value. Want a more muted version? Decrease S. Want a complementary color? Add 180 to H and wrap at 360. These mental operations are nearly impossible in RGB or hex. This makes HSL ideal for programmatic color generation, design system token derivation, and dynamic theming. CSS added hsl() and hsla() support over a decade ago, and it's supported in every browser.
Verdict
Use HSL when you need to programmatically generate color variations (hover states, accessible color palettes, dark mode variants). Use hex or rgb() for static, hand-picked colors where the mental model doesn't matter. Modern CSS also supports lch() and oklch(), which are perceptually uniform improvements over HSL and worth learning for new projects.