HSL to HEX Converter
Paste an HSL value and get the exact HEX equivalent instantly — plus every other color format, a gamut check and one-click copy.
Gamut: srgb
Common HSL → HEX values
| Vivid Indigo | hsl(238.7 83.5% 66.7%) | #6366f1 | Details |
| Vivid Red | hsl(0 84.2% 60.2%) | #ef4444 | Details |
| Orange | hsl(24.6 95% 53.1%) | #f97316 | Details |
| Light Yellow | hsl(45.4 93.4% 47.5%) | #eab308 | Details |
| Vivid Green | hsl(142.1 70.6% 45.3%) | #22c55e | Details |
| Teal | hsl(173.4 80.4% 40%) | #14b8a6 | Details |
| Sky Blue | hsl(198.6 88.7% 48.4%) | #0ea5e9 | Details |
| Blue | hsl(217.2 91.2% 59.8%) | #3b82f6 | Details |
| Vivid Violet | hsl(258.3 89.5% 66.3%) | #8b5cf6 | Details |
| Vivid Pink | hsl(330.4 81.2% 60.4%) | #ec4899 | Details |
| Medium Gray | hsl(25 5.3% 44.7%) | #78716c | Details |
| Black | hsl(0 0% 0%) | #000000 | Details |
The HSL to HEX formula
HSL is first converted to RGB. Chroma is C = (1 − |2L − 1|) × S. The hue picks which 60° sector you're in, which decides how C and the intermediate X = C × (1 − |(H / 60) mod 2 − 1|) map onto red, green and blue. Adding L − C / 2 to each and scaling by 255 gives RGB, which converts to HEX pair by pair.
Accepted input
Paste hsl(239 84% 67%), the comma form hsl(239, 84%, 67%) or hsla() with alpha. A translucent input gives an eight-digit HEX.
Going further
Once you have the HEX value, the color scale generator turns it into a full 50–950 ramp and the contrast checker tells you which text colors pass WCAG on it.
Frequently asked questions
- How do you convert HSL to HEX?
- Convert HSL to RGB first: chroma C = (1 − |2L − 1|) × S, then place C and a secondary value X on the channels chosen by the hue sector, and add m = L − C / 2 to each. Multiply by 255 and write each channel as two hex digits.
- Does HSL to HEX lose information?
- Slightly. HEX has 256 steps per channel, so HSL values with decimals round to the nearest HEX color. Converting back may give a value a fraction of a percent different.
- Can I use HSL directly in CSS?
- Yes. hsl() works in every browser, so you only need HEX for tools, design specs or code that expects it.