HEX to HSL Converter
Hex in, hue and lightness out.
- Runs in your browser
- Free, no signup
Enter a HEX colour. Any supported format is accepted, and the result updates as you type.
This box works in both directions — change it and the HEX value follows.
All formats
-
HEX
— -
HEX8
— -
RGB
— -
RGBA
— -
HSL
— -
HSV
— -
CMYK
—
Every value shown comes from one conversion of the colour above, so the HEX, RGB, HSL and CMYK rows always agree with each other.
Your colours are converted in this browser. Nothing is uploaded and nothing is saved.
HSL describes a colour the way a person adjusts one: a hue angle on the wheel, a saturation, and a lightness. Converting a hex code to HSL is what makes it possible to reason about a colour — to build a tint that keeps the hue, or to find the value that is half as light.
Hex and HSL describe exactly the same set of colours, so the conversion is lossless in the direction that matters. This page keeps a decimal place on the hue and the percentages so that the hsl() value it prints converts back to the hex code you started with.
How to use this tool
- Paste a hex code into the top box.
- Read the hsl() value beside it: hue in degrees, saturation and lightness as percentages.
- Edit either box — the conversion runs in both directions.
- Copy the value you need; RGB, HSV and CMYK are listed below.
What the three numbers mean
Hue is an angle from 0° to 360° around the colour wheel. Saturation is how far the colour is from grey, as a percentage. Lightness is how far it is from black, with 50% being the most vivid a colour can be at a given saturation and 0% or 100% being black or white regardless of hue.
- hsl(0, 0%, 0%) — black, no lightness
- hsl(0, 0%, 50%) — mid grey, no saturation
- hsl(0, 100%, 50%) — pure red
- hsl(0, 100%, 100%) — white, however saturated
Why the hue has a decimal point
A single degree of hue can move a channel by about four steps out of 255 when the colour is fully saturated, so rounding to whole numbers changes the colour. hsl(144, 88%, 56%) gives #2CF27B, while the exact value hsl(144.5, 88.3%, 56.5%) gives #2EF27E. Printing the fraction is what keeps the conversion reversible, and CSS accepts it.
Building a scale from one colour
Once a colour is in HSL it is easy to keep the hue and vary the lightness, which is how a consistent set of button states is usually built: one hue, five lightness steps, rather than five hex codes picked by eye.
Frequently asked questions
Is HSL the same as HSV?
No, though they are related. HSL measures lightness — distance from black or white — while HSV measures value, with 100% being the pure hue. The same colour has different numbers in each.
Can CSS take a decimal hue?
Yes. hsl(144.5, 88.3%, 56.5%) is valid CSS, and browsers accept fractional degrees and percentages.
What is hsl(0, 0%, 50%)?
Mid grey, #808080. With no saturation the hue has no effect at all, which is why every grey has the same HSL appearance apart from its lightness.
How do I make a colour lighter?
Increase the lightness. Keeping the hue and saturation fixed and moving lightness from 50% to 70% gives a lighter version of the same colour rather than a different one.