HSL — hue, saturation, lightness — was designed to fix a real problem with RGB: RGB tells a computer how to mix light, but it tells a human almost nothing about what the color will actually look like. This tool converts a hex code into HSL so you can reason about a color the way a person does — "a slightly less saturated, slightly darker teal" — rather than juggling three unrelated 0–255 numbers.
Where HSL came from
The HSL model (and its close cousin HSV/HSB) was formalized in a widely cited 1978 SIGGRAPH paper by Alvy Ray Smith, one of the founders of Pixar, titled "Color Gamut Transform Pairs." Smith was working on early computer animation at NYIT and needed a way for artists — not engineers — to specify color intuitively, without thinking in terms of phosphor intensities. CSS3, finalized as a W3C recommendation in the early 2010s, added hsl() as a first-class color function specifically because it made programmatic color manipulation — lightening, darkening, desaturating — vastly simpler than doing the same math in RGB.
How the conversion works mathematically
The hex code is first unpacked into RGB (each channel scaled to 0–1). Lightness is calculated from the average of the maximum and minimum channel values; saturation depends on how far apart the max and min channels are relative to the lightness; and hue is derived from which channel is dominant, expressed as an angle in degrees around a 360° color wheel. A pure red sits at 0°/360°, green at 120°, and blue at 240° — the same three-way split you'd get dividing a circle evenly by the three primary colors.
Why developers reach for HSL specifically
- Building color scales — keeping hue and saturation fixed while sweeping lightness from 10% to 90% produces a perfectly consistent tint/shade ramp for a design system.
- Theming — many CSS custom-property-based theming systems store a base hue and saturation once, then vary only lightness for light/dark mode.
- Accessibility tuning — nudging lightness up or down is a much more predictable way to fix a contrast ratio than guessing at RGB values.
Frequently asked questions
Is HSL "more accurate" than RGB? No — they describe exactly the same color space, just with different coordinates. Converting hex → HSL → hex again returns the identical color, with no information lost.
Why does 100% lightness always give white, no matter the hue? Because lightness in the HSL model represents how much white or black is mixed in; at the extremes (0% or 100%) hue and saturation stop mattering entirely, which is a known limitation compared to perceptual models like CIELAB.
Should I use HSL or the newer LCH/OKLCH color spaces? HSL is simpler and has universal browser support; OKLCH (added to CSS Color 4) is perceptually more uniform — equal lightness steps look more equal to the human eye — but is a newer addition still gaining tooling support.
Further reading
Wikipedia — HSL and HSV — Origins, formulas and comparison of the two cylindrical color models.
MDN — hsl() — Full CSS syntax for hsl() and hsla() color functions.