HSL to HEX Converter
Type a HSL value and get HEX straight away. Everything runs in your browser — nothing is sent to a server.
How the conversion works
Hue, saturation and lightness are converted back to RGB, and each channel is written as two hexadecimal digits. Saturation reads strongest at 50% lightness.
HSL
HSL rearranges the same color into axes people can actually steer: hue as an angle from 0 to 360°, saturation as a percentage, lightness as a percentage. Want a lighter version of the same color? Raise the lightness and leave the rest alone. The catch is that its lightness is arithmetic, not perceptual — yellow at 50% lightness looks far brighter than blue at 50%.
HEX
HEX is the same red-green-blue triplet as RGB, just written in base 16 so each channel fits in two characters. It survives everywhere — CSS, design tools, config files — because it is short and unambiguous. Case does not matter, and #abc is shorthand for #aabbcc. An eight-digit HEX adds alpha as a final pair, which is why #FF000080 is half-transparent red.
HSL to HEX, step by step
Worked through with #FF6347. Every number comes from the same engine the converter above uses.
-
HSL back to RGB
hsl(9.1 100% 63.9%) → rgb(255, 99, 71) -
Write each channel in base 16
R 255 = 15×16 + 15 → FF G 99 = 6×16 + 3 → 63 B 71 = 4×16 + 7 → 47 -
Join them up
# + FF + 63 + 47 = #FF6347
HSL to HEX examples
| Color | HSL | HEX |
|---|---|---|
| Red | hsl(0, 100%, 50%) |
#FF0000 |
| Tomato | hsl(9, 100%, 64%) |
#FF6347 |
| Orange | hsl(39, 100%, 50%) |
#FFA500 |
| Gold | hsl(51, 100%, 50%) |
#FFD700 |
| Limegreen | hsl(120, 61%, 50%) |
#32CD32 |
| Teal | hsl(180, 100%, 25%) |
#008080 |
| Dodgerblue | hsl(210, 100%, 56%) |
#1E90FF |
| Royalblue | hsl(225, 73%, 57%) |
#4169E1 |
| Blueviolet | hsl(271, 76%, 53%) |
#8A2BE2 |
| Hotpink | hsl(330, 100%, 71%) |
#FF69B4 |
Common questions
Why does my HEX not convert back to the exact same HSL?
HEX stores 256 steps per channel, so the result snaps to the nearest one. Fractional hue and saturation land between steps and come back slightly moved.
What happens if I enter a hue above 360?
It wraps around, because hue is an angle: 400° is 40°, and −20° is 340°. This is handy when you generate palettes by adding a fixed step to the hue in a loop.
Lightness 100% or 0% ignores my hue — is that a bug?
No. At 100% every channel is maxed to white and at 0% they are all zero, so hue and saturation have nothing left to affect. Stay between roughly 10% and 90% if you want the hue to stay visible.