Tools / Color Converter / HSL → HEX
HSL to HEX Converter.
HSL to HEX turns a human-friendly hue/saturation/lightness triple back into the six-digit string CSS and design tools expect. Internally it goes HSL → RGB → HEX; the interesting math is the HSL → RGB step, which reconstructs the three channels from the hue sector.
Not a recognizable HSL color.
All formats
The HSL → HEX formula
C = (1 − |2L−1|)·S, X = C·(1 − |(H/60 mod 2) − 1|), m = L − C/2. Pick the (R,G,B) ordering by hue sector, add m, scale to 0-255, then hex-encode.
Worked example
Convert hsl(220, 49%, 21%):
- C = (1 − |2·0.21 − 1|)·0.49 ≈ 0.20
- Hue 220° falls in the 180-240 sector → (0, X, C)
- Add m and scale → rgb(27, 42, 78)
- Hex-encode → #1B2A4E
JavaScript
// hslToRgb then rgbToHex (see colorConvert.ts)
hslToRgb({h:220,s:49,l:21}); // {r:27,g:42,b:78}
rgbToHex({r:27,g:42,b:78}); // "#1B2A4E"FAQ
Do I even need hex if CSS supports hsl()?
Modern CSS accepts hsl() directly, so for stylesheets you often don't. Hex is still required by many design tools, brand guidelines, and APIs that only accept a 6-digit string.
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.