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.
Paid links below. As an Amazon Associate we earn from qualifying purchases.
Library
Colour references for your next project
Compare the original references behind this archive. Check the contents, edition and format before choosing a book.
Book links are Amazon Associates affiliate links. Your price is unchanged; a small commission supports the archive. As an Amazon Associate we earn from qualifying purchases.
Torn between the two Wada dictionaries? Vol 1 vs Vol 2, compared plate by plate →
Book links are Amazon Associates affiliate links. Your price is unchanged; a small commission supports the archive. As an Amazon Associate we earn from qualifying purchases.