hsl() → hex
HSL to Hex Converter
Turn hue, saturation and lightness into a hexadecimal color code.
How to convert HSL to hex
- Work out the chroma: how far the color is from grey, from saturation and lightness together.
- Use the hue to decide which two channels carry that chroma and in what proportion.
- Add a constant to all three channels so the result lands at the right lightness.
- Scale each channel to 0–255 and round.
- Convert each to two hex digits and join them.
The rounding in step four is the reason a round trip can shift slightly. #1A73E8
converts to hsl(214, 82%, 51%), and converting that back gives #1C74E9
— visually identical, two units apart in each channel. Hex has 16.7 million points; HSL as usually written has fewer, so
the mapping is not perfectly reversible.
Worked example
hsl(214, 82%, 51%) chroma = (1 - |2(0.51) - 1|) × 0.82 = 0.804 sector = 214 ÷ 60 = 3.57 → blue-dominant sector second = 0.804 × (1 - |3.57 mod 2 - 1|) = 0.348 offset = 0.51 - 0.804/2 = 0.108 r = 0 + 0.108 = 0.108 → 28 → 1C g = 0.348 + 0.108 = 0.456 → 116 → 74 b = 0.804 + 0.108 = 0.912 → 233 → E9 result → #1C74E9
Building a palette in HSL, shipping it in hex
This is the workflow HSL is actually good for. Design in HSL where the arithmetic is meaningful, then convert to hex for the stylesheet.
base hsl(214, 82%, 51%) hover hsl(214, 82%, 44%) ← lightness −7 active hsl(214, 82%, 38%) ← lightness −13 disabled hsl(214, 20%, 51%) ← saturation dropped tint hsl(214, 82%, 92%) ← lightness raised
Five related colors from one, each a single number away from the base. Producing the same set directly in hex means computing fifteen channel values by hand and hoping they stay in family.
Value ranges
| Component | Range | Notes |
|---|---|---|
| Hue | 0–360 | Circular, so 370 is the same as 10. Grey ignores it entirely. |
| Saturation | 0–100% | 0 is grey, 100 is fully vivid |
| Lightness | 0–100% | 0 is always black, 100 is always white, whatever the hue |
Lightness 0 gives black and lightness 100 gives white regardless of the other two values. And saturation 0 gives grey regardless of hue. If a color comes out wrong, check those two before anything else.
Landmarks
| HSL | Hex | Color |
|---|---|---|
| hsl(0, 100%, 50%) | #FF0000 | Red |
| hsl(30, 100%, 50%) | #FF8000 | Orange |
| hsl(60, 100%, 50%) | #FFFF00 | Yellow |
| hsl(120, 100%, 50%) | #00FF00 | Green |
| hsl(180, 100%, 50%) | #00FFFF | Cyan |
| hsl(240, 100%, 50%) | #0000FF | Blue |
| hsl(300, 100%, 50%) | #FF00FF | Magenta |
| hsl(0, 0%, 50%) | #808080 | Mid grey |
Frequently asked questions
How do I convert HSL to hex?
Derive the three RGB channels from hue, saturation and lightness, scale each to 0-255, then write each as two hex digits.
What is hsl(0, 100%, 50%) in hex?
#FF0000, pure red.
Why does a round trip change my numbers slightly?
Hex has 16.7 million discrete points and HSL as normally written has fewer, so converting back can land a unit or two away in each channel. The colors are visually identical.
Can hue go above 360?
It wraps. 370 is the same hue as 10, because hue is a circle.
What happens at 0% saturation?
You get grey, and the hue value stops mattering entirely.
Should I write HSL or hex in my CSS?
Both work everywhere. HSL is easier to maintain when colors are related to each other; hex is more compact for fixed values.