Direct answer
HSL = Hue (0-360°), Saturation (%), Lightness (%). It's a more design-friendly representation than RGB because adjusting lightness gives you predictable tints and shades.
Ad
HEX input
HSL output
About HEX → HSL
Modern design systems often store colors in HSL because variations (hover, disabled, focus) are simple lightness tweaks. Tailwind v4 and many CSS-in-JS libraries default to HSL for this reason.
Ad
Frequently asked questions
Why use HSL over RGB?
Adjusting lightness in HSL is intuitive — l: 50% → 30% gives a darker shade of the SAME color. The same RGB tweak shifts hue too.