Tools / Color Converter / HEX → HSL
HEX to HSL Converter.
HEX to HSL is a two-step conversion: read the hex into RGB, then derive hue, saturation, and lightness. HSL is far easier to reason about than hex when you want to lighten, darken, or rotate a color by hand — which is why design tokens are often stored in HSL.
Not a recognizable HEX color.
All formats
The HEX → HSL formula
Normalize R,G,B to 0-1. L = (max+min)/2. S = (max−min) / (1 − |2L−1|). Hue is the angle of the dominant channel, scaled to 0-360°.
Worked example
Convert #1B2A4E:
- Hex → rgb(27, 42, 78)
- Max = 0.306 (blue), Min = 0.106 (red)
- Lightness = (0.306 + 0.106) / 2 ≈ 21%
- Saturation ≈ 49%, Hue ≈ 220° (blue)
- Result: hsl(220, 49%, 21%)
CSS
/* Same navy in both notations */
--brand: #1B2A4E;
--brand-hsl: hsl(220, 49%, 21%);
/* HSL makes a 10%-lighter tint trivial: */
--brand-tint: hsl(220, 49%, 31%);FAQ
Why convert to HSL at all?
HSL separates 'which color' (hue) from 'how light' (lightness), so generating tints, shades, and hover states is a single-number tweak instead of guessing hex digits.
Is HSL the same gamut as hex?
Yes — both describe sRGB. HSL is just a cylindrical re-mapping of the same colors, so the round-trip is lossless apart from rounding.