Converter
HSL to HEX Converter
Dial in a hue, saturation and lightness and get the hex code back. Useful when a design system is defined in HSL but the handover document wants hex.
These values are mathematical approximations. Ink, paper, press calibration and colour profile all change the printed result — always approve colour from a physical proof. Full disclaimer.
How the conversion works #
The hue wheel is divided into six 60° sectors. Which sector you land in decides which channel is at maximum, which is climbing, and which is at zero.
A worked example #
hsl(210, 100%, 56%).
- C = (1 − |2(0.56) − 1|) × 1.0 = 0.88.
- H / 60 = 3.5, so 3.5 mod 2 = 1.5, and X = 0.88 × (1 − 0.5) = 0.44.
- m = 0.56 − 0.44 = 0.12.
- 210° falls in the 180–240 sector, giving (0, X, C) = (0, 0.44, 0.88).
- Add m: (0.12, 0.56, 1.0). Multiply by 255: (31, 143, 255).
- To hex:
#1F8FFF.
Common HSL to hex values #
| Colour | HSL | HEX | RGB |
|---|---|---|---|
| Black | 0°, 0%, 0% | #000000 | 0, 0, 0 |
| White | 0°, 0%, 100% | #FFFFFF | 255, 255, 255 |
| Red | 0°, 100%, 50% | #FF0000 | 255, 0, 0 |
| Lime | 120°, 100%, 50% | #00FF00 | 0, 255, 0 |
| Blue | 240°, 100%, 50% | #0000FF | 0, 0, 255 |
| Yellow | 60°, 100%, 50% | #FFFF00 | 255, 255, 0 |
| Cyan | 180°, 100%, 50% | #00FFFF | 0, 255, 255 |
| Magenta | 300°, 100%, 50% | #FF00FF | 255, 0, 255 |
| Dodger blue | 210°, 100%, 56% | #1E90FF | 30, 144, 255 |
| Navy | 240°, 100%, 25% | #000080 | 0, 0, 128 |
| Teal | 180°, 100%, 25% | #008080 | 0, 128, 128 |
| Forest green | 120°, 61%, 34% | #228B22 | 34, 139, 34 |
| Olive | 60°, 100%, 25% | #808000 | 128, 128, 0 |
| Orange | 39°, 100%, 50% | #FFA500 | 255, 165, 0 |
| Crimson | 348°, 83%, 47% | #DC143C | 220, 20, 60 |
| Maroon | 0°, 100%, 25% | #800000 | 128, 0, 0 |
| Purple | 300°, 100%, 25% | #800080 | 128, 0, 128 |
| Hot pink | 330°, 100%, 71% | #FF69B4 | 255, 105, 180 |
| Silver | 0°, 0%, 75% | #C0C0C0 | 192, 192, 192 |
| Charcoal | 204°, 19%, 26% | #36454F | 54, 69, 79 |
Questions #
What is chroma in this formula?
The distance between the brightest and darkest channel — effectively how much colour the result contains before lightness is applied. It is calculated first because the rest of the conversion is built on it.
Why does hue wrap at 360?
Because it is an angle on a colour wheel. 0° and 360° are both red, 380° is the same as 20°. The converter normalises anything outside the range rather than rejecting it.
Does lightness 50% always give the most vivid version?
Numerically yes: at 50% lightness with full saturation you get the pure hue. Perceptually no — a yellow at 50% lightness looks much brighter than a blue at 50% lightness, because the eye is far more sensitive to yellow-green wavelengths.
Can I skip hex and write HSL in my CSS?
Yes. Browsers accept HSL natively, and keeping colours in HSL in your stylesheet makes light and dark variants much easier to maintain. Convert to hex only when a tool or handover document demands it.