If you think in terms of "a warm orange, fairly saturated, medium brightness," you're already thinking in HSL. This tool takes those three intuitive numbers — hue in degrees, saturation and lightness as percentages — and produces the hex code that CSS, HTML and image tools can actually use.
From artists' intuition to browser syntax
HSL was built specifically to match how humans mentally categorize color, unlike RGB, which reflects how a screen physically produces it. Its adoption into CSS took a while: while the color model itself dates to the 1970s, hsl() only became an official part of the CSS specification with CSS3's Color Module in the 2000s, after browser vendors converged on supporting it as an alternative to hex and rgb(). Today it is one of three interchangeable ways to write the exact same color in a stylesheet.
How the conversion is calculated
The algorithm reverses the hex-to-HSL process: given hue (0–360°), saturation and lightness (0–100%), it computes a "chroma" value from saturation and lightness, then determines where the hue angle falls within one of six 60°-wide sectors of the color wheel to assign temporary RGB values, before adding a lightness offset and scaling each channel to 0–255 and packing the result into hex.
Why you'd start from HSL instead of just picking a hex code
- Programmatic palettes — generating twelve evenly spaced brand colors is one line of logic in HSL (step the hue by 30°) but painful to reason about directly in hex.
- Design specs written in HSL — some style guides and Tailwind CSS's color tooling express colors in HSL specifically so lightness can be themed independently.
- Communicating color changes verbally — "same hue, saturation down 20%" translates directly into HSL math, then converts to the hex a codebase needs.
Frequently asked questions
What's the valid range for each value? Hue wraps at 360° (0° and 360° are the same red), while saturation and lightness are both percentages from 0% to 100%.
Will converting HSL to hex and back give me the exact same numbers? Usually yes, though because hex only has 256 discrete steps per channel while HSL percentages are continuous, very fine-grained HSL values can round to the nearest representable hex color.
Does hue "loop" — is 370° valid? Functionally yes; most implementations, including this one, treat any hue as modulo 360°, so 370° behaves identically to 10°.
Further reading
MDN — hsl() — Formal syntax and conversion notes for the hsl() function.
W3C — CSS Color Module Level 3, §4.3 — The reference algorithm for HSL-to-RGB conversion that browsers implement.