Hex → hsl()
Hex to HSL Converter
Convert a hex color into hue, saturation and lightness — the notation that lets you reason about color rather than just record it.
What HSL describes
Hex and RGB tell you how much light each channel emits. HSL tells you what the color is. Same color, different question answered.
| Component | Range | Means |
|---|---|---|
| Hue | 0–360° | Position on the color wheel |
| Saturation | 0–100% | How vivid, versus grey |
| Lightness | 0–100% | How close to white or black |
The practical difference: to make a color darker in hex you must recompute all three channels and hope. In HSL you lower the lightness and everything else stays put.
The hue wheel
| Degrees | Hue |
|---|---|
| 0° / 360° | Red |
| 30° | Orange |
| 60° | Yellow |
| 120° | Green |
| 180° | Cyan |
| 210° | Azure — most link blues |
| 240° | Blue |
| 300° | Magenta |
Because hue is circular, opposites are 180° apart. The complement of a color is its hue plus 180, which makes complementary pairs a single subtraction rather than a guess.
How the conversion works
- Convert hex to RGB, then divide each channel by 255 so it runs 0 to 1.
- Find the largest and smallest of the three. Their average is the lightness.
- If they are equal the color is grey: saturation is 0 and hue is undefined.
- Otherwise saturation comes from their difference, scaled by how close lightness is to the middle.
- Hue comes from which channel is largest and how far the other two sit from it.
Worked example
#1A73E8 → rgb(26, 115, 232)
scaled r = 0.102 g = 0.451 b = 0.910
max = 0.910 (blue) min = 0.102 (red)
lightness = (0.910 + 0.102) / 2 = 0.506 → 51%
delta = 0.910 - 0.102 = 0.808
saturation = 0.808 / (2 - 0.910 - 0.102) = 0.818 → 82%
hue = blue is largest, so
((r - g) / delta + 4) × 60
= ((0.102 - 0.451) / 0.808 + 4) × 60 → 214°
hsl(214, 82%, 51%)
Where HSL earns its keep
- Hover and active states. Drop lightness by ten points. In hex you would be guessing at three separate values.
- Consistent palettes. Hold saturation and lightness, step the hue, and every color has the same visual weight.
- Tints and shades. One number moves, and the hue stays exactly where it was.
- Disabled states. Drop saturation towards zero to grey a color out without changing its identity.
HSL lightness is not perceived brightness. hsl(60, 100%, 50%) is yellow and hsl(240, 100%, 50%) is blue — identical lightness numbers, wildly different apparent brightness. For accessibility decisions use a contrast ratio, not the L value.
Landmarks
| Hex | HSL | Note |
|---|---|---|
| #FF0000 | hsl(0, 100%, 50%) | Pure red |
| #FFFF00 | hsl(60, 100%, 50%) | Pure yellow |
| #00FF00 | hsl(120, 100%, 50%) | Pure green |
| #0000FF | hsl(240, 100%, 50%) | Pure blue |
| #FFFFFF | hsl(0, 0%, 100%) | White — lightness at maximum |
| #000000 | hsl(0, 0%, 0%) | Black — lightness at zero |
| #808080 | hsl(0, 0%, 50%) | Grey — saturation at zero |
Notice that white, black and grey all report a hue of 0. With no saturation, hue carries no meaning — the value is arbitrary rather than red.
Frequently asked questions
What is HSL?
A way of writing color as hue in degrees, saturation as a percentage and lightness as a percentage. It describes what a color is rather than how much of each channel it uses.
How do I convert hex to HSL?
Convert to RGB first, scale the channels to 0-1, then derive lightness from the largest and smallest, saturation from their difference, and hue from which channel leads.
Is HSL better than hex?
For editing, usually. Changing a color's darkness means moving one number in HSL and recomputing three in hex. For simply stating a fixed color, hex is more compact.
What is #1A73E8 in HSL?
hsl(214, 82%, 51%).
Why is the hue 0 for grey?
Saturation is zero, so no hue is present. The value is a placeholder, not a claim that the color is red.
Does HSL lightness match perceived brightness?
No. Yellow and blue at the same lightness look very different. Use a contrast ratio for accessibility decisions.