How to use the Hex to HSL Converter
Paste a hex colour code such as #3B82F6. You get the HSL values and the RGB equivalent.
From hex to HSL in two steps
The hex code is first split into red, green and blue values from 0 to 255. Those values are then turned into hue (the angle on the colour wheel), saturation and lightness, rounded to whole degrees and whole percentages.
Building a palette with HSL
Keep the hue and saturation, then change lightness to make a scale: hsl(217, 91%, 90%) for a pale background, 60% for the main colour and 30% for text. Every step stays in the same colour family.
How it works
Hex to RGB, then RGB to HSL.
Examples
- #3B82F6
hsl(217, 91%, 60%) rgb(59, 130, 246)
- #FF5733
hsl(11, 100%, 60%) rgb(255, 87, 51)
Common hex colours in HSL
| Hex | HSL |
|---|---|
| #000000 | hsl(0, 0%, 0%) |
| #FFFFFF | hsl(0, 0%, 100%) |
| #FF0000 | hsl(0, 100%, 50%) |
| #00FF00 | hsl(120, 100%, 50%) |
| #0000FF | hsl(240, 100%, 50%) |
| #FFFF00 | hsl(60, 100%, 50%) |
| #00FFFF | hsl(180, 100%, 50%) |
| #FF00FF | hsl(300, 100%, 50%) |
| #808080 | hsl(0, 0%, 50%) |
| #FFA500 | hsl(39, 100%, 50%) |
| #800080 | hsl(300, 100%, 25%) |
| #000080 | hsl(240, 100%, 25%) |
Limitations and assumptions
Runs entirely in your browser. Nothing you enter is uploaded.
Frequently asked questions
What is #FF0000 in HSL?
hsl(0, 100%, 50%): hue 0 is red, at full saturation and half lightness.
Can I use HSL in CSS?
Yes. hsl() works in every modern browser and accepts an optional alpha value for transparency.
How do I convert HSL back to hex?
Use the HSL to hex converter.