Converter
HEX to HSL Converter
HSL describes a colour the way a person would: which colour it is, how vivid, how light. That makes it far easier to edit by hand than 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 #
Convert the hex to RGB first, then normalise and find the largest and smallest of the three channels. Everything else follows from those two numbers and the gap between them.
The three hue cases place the colour in one third of the wheel, then the fraction inside decides where within that third. The + 2 and + 4 are simply 120° and 240° expressed in units of 60.
A worked example #
#1E90FF again, which is rgb(30, 144, 255).
- Divide each channel by 255, giving r = 0.118, g = 0.565, b = 1.0.
- mx = 1.0 (blue), mn = 0.118, so d = 0.882.
- L = (1.0 + 0.118) / 2 = 0.559, which is 56%.
- S = 0.882 / (1 − |2(0.559) − 1|) = 0.882 / 0.882 = 1.0, so 100%.
- Blue is the largest channel, so H = 60 × ((0.118 − 0.565) / 0.882 + 4) = 60 × 3.493.
- H = 210°. The result is hsl(210, 100%, 56%).
Hold the hue and saturation and vary only the lightness, and you get a coherent family from one colour: 210, 100%, 90% for a pale background tint, 56% for the base, 30% for a hover state. Check each step against a contrast checker rather than assuming even numbers give even perceived steps.
Common hex to HSL values #
| Colour | HEX | HSL | RGB |
|---|---|---|---|
| Black | #000000 | 0°, 0%, 0% | 0, 0, 0 |
| White | #FFFFFF | 0°, 0%, 100% | 255, 255, 255 |
| Red | #FF0000 | 0°, 100%, 50% | 255, 0, 0 |
| Lime | #00FF00 | 120°, 100%, 50% | 0, 255, 0 |
| Blue | #0000FF | 240°, 100%, 50% | 0, 0, 255 |
| Yellow | #FFFF00 | 60°, 100%, 50% | 255, 255, 0 |
| Cyan | #00FFFF | 180°, 100%, 50% | 0, 255, 255 |
| Magenta | #FF00FF | 300°, 100%, 50% | 255, 0, 255 |
| Dodger blue | #1E90FF | 210°, 100%, 56% | 30, 144, 255 |
| Navy | #000080 | 240°, 100%, 25% | 0, 0, 128 |
| Teal | #008080 | 180°, 100%, 25% | 0, 128, 128 |
| Forest green | #228B22 | 120°, 61%, 34% | 34, 139, 34 |
| Olive | #808000 | 60°, 100%, 25% | 128, 128, 0 |
| Orange | #FFA500 | 39°, 100%, 50% | 255, 165, 0 |
| Crimson | #DC143C | 348°, 83%, 47% | 220, 20, 60 |
| Maroon | #800000 | 0°, 100%, 25% | 128, 0, 0 |
| Purple | #800080 | 300°, 100%, 25% | 128, 0, 128 |
| Hot pink | #FF69B4 | 330°, 100%, 71% | 255, 105, 180 |
| Silver | #C0C0C0 | 0°, 0%, 75% | 192, 192, 192 |
| Charcoal | #36454F | 204°, 19%, 26% | 54, 69, 79 |
Click any row to load that colour into the converter.
Questions #
Why use HSL when hex works fine?
Because HSL is editable by hand. To make a colour 10% darker in HSL you change one number. In hex you have to convert, adjust three channels, and convert back. For building a scale of tints and shades from one brand colour, HSL saves a great deal of guesswork.
Is HSL the same as HSB or HSV?
No, although they share a hue value. HSL's lightness runs from black through the pure colour to white, so 50% lightness is the vivid version. HSV's value runs from black to the pure colour and never reaches white. Adobe's picker uses HSB, which is HSV under a different name, so the numbers there will not match these.
What does saturation 0 mean?
Grey. With no saturation the hue is irrelevant and only lightness matters, so hsl(0, 0%, 50%) and hsl(210, 0%, 50%) are the same mid grey.
Do browsers support HSL directly?
Yes, and have for a long time. You can write color: hsl(210 100% 56%) in CSS without converting to hex at all.
Is HSL good for accessible colour scales?
Only up to a point. Equal steps in HSL lightness do not produce equal steps in perceived brightness, so a scale that looks evenly spaced numerically may not look evenly spaced to the eye. Always verify contrast ratios rather than trusting the lightness value alone.