About the HEX to HSL Converter
This HEX to HSL converter breaks a colour into the three properties designers actually reason about: hue as an angle on the colour wheel, saturation as a percentage of colourfulness, and lightness as a percentage from black to white. A lightness shift slider moves the value up or down by as much as 40 points so you can generate a hover state or a disabled variant without leaving the page, and a ramp of four swatches at 20, 40, 60 and 80 percent lightness shows how the hue behaves across the whole range.
How to use the HEX to HSL Converter
- 1
Enter a code in the HEX colour field, in three or six digits.
- 2
Read the Values panel for the hue angle in degrees, the saturation and the lightness.
- 3
Drag the Lightness shift slider between -40 and +40 to lighten or darken while keeping hue and saturation fixed.
- 4
Use the lightness ramp swatches to see the same hue at 20, 40, 60 and 80 percent lightness.
What people use it for
Deriving hover and active states
Dropping lightness by 8 to 10 points gives a hover shade that unmistakably belongs to the same colour, which hand-picking a darker hex rarely achieves.
Building a theme from one colour
Fixing the hue and varying only lightness and saturation produces borders, backgrounds and text colours that all read as one family.
Finding a colour's true hue
A hex code tells you nothing about whether a blue leans purple or green. The hue angle answers it in one number and makes two similar colours directly comparable.
Fixing a colour that looks off
When a colour feels muddy, the saturation reading usually explains it — anything under about 30 percent will read as grey at small sizes regardless of the hue.
How HSL maps onto the colour wheel
HSL arranges colour as a cylinder. Hue is the angle around it, running the full spectrum in 360 degrees: 0 is red, 60 yellow, 120 green, 180 cyan, 240 blue and 300 magenta, wrapping back to red. Because it is an angle, arithmetic on it is modular — adding 180 gives the complementary hue, adding and subtracting 30 gives the analogous neighbours, and 240 plus 180 wraps to 60 rather than running off the end at 420. Saturation is the radial distance from the central axis: 0 percent puts you on the axis, where every hue collapses to the same grey, and 100 percent puts you on the outer surface at the most vivid version of that hue. Lightness is the vertical position: 0 percent is black at the bottom point, 100 percent is white at the top, and 50 percent is the horizontal slice through the middle where the pure, fully saturated hues live. This is why the tool's ramp keeps hue and saturation fixed and moves only vertically — it stays within one colour family by construction.
Where HSL misleads, and what replaced it
HSL is a straightforward mathematical transform of RGB, not a model of perception, and its lightness axis is simply the midpoint between the largest and smallest channel. That makes it perceptually uneven in ways that matter. Pure yellow at hsl(60, 100%, 50%) and pure blue at hsl(240, 100%, 50%) claim identical lightness, yet the yellow is dazzling and the blue is nearly as dark as black — their relative luminances differ by more than a factor of ten. Lightening in HSL also drains apparent saturation, which is why a mid-tone generated by raising lightness often looks washed out next to a hand-picked one. The modern answer is OKLCH, now supported in every current browser, which keeps the same intuitive three-part structure but places lightness on a perceptually uniform axis derived from the Oklab space. Two OKLCH colours at the same lightness genuinely look equally bright, which makes automated palette generation and contrast reasoning far more reliable.
Tips
- Vary lightness rather than picking a new hex when you need a lighter or darker version of a colour.
- The modern space-separated syntax hsl(243 75% 59% / 0.5) works everywhere and needs no separate hsla() function.
- Never judge contrast from HSL lightness — use a contrast checker, which measures relative luminance instead.