HEX to HSL Converter
Type a HEX value and get HSL straight away. Everything runs in your browser — nothing is sent to a server.
HOW
How the conversion works
The HEX is first converted to RGB, then to hue (0–360°), saturation and lightness. The gap between the largest and smallest channel sets saturation; their average sets lightness.
EXAMPLES
HEX to HSL examples
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 |
hsl(0, 100%, 50%) |
| Tomato | #FF6347 |
hsl(9, 100%, 64%) |
| Orange | #FFA500 |
hsl(39, 100%, 50%) |
| Gold | #FFD700 |
hsl(51, 100%, 50%) |
| Limegreen | #32CD32 |
hsl(120, 61%, 50%) |
| Teal | #008080 |
hsl(180, 100%, 25%) |
| Dodgerblue | #1E90FF |
hsl(210, 100%, 56%) |
| Royalblue | #4169E1 |
hsl(225, 73%, 57%) |
| Blueviolet | #8A2BE2 |
hsl(271, 76%, 53%) |
| Hotpink | #FF69B4 |
hsl(330, 100%, 71%) |
MORE