HEX to HSL Converter

Enter a hex color code to get its hue, saturation and lightness as an hsl() value. A slider lightens or darkens the color while the hue stays put.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Colour

#5048e5

Values

HEX: #5048e5
HSL: hsl(243, 75%, 59%)
Hue: 243deg
Saturation: 75%
Lightness: 59%
RGB: rgb(80, 72, 229)

Lightness ramp

20%

40%

60%

80%

Quick answers

How do I convert a hex color to HSL?: Split the hex code into red, green and blue, divide each by 255, then work out lightness as the average of the largest and smallest value, saturation from their difference, and hue from which channel is largest. Or enter the code above: #3b82f6 gives hsl(217, 91%, 60%).
What do hue, saturation and lightness mean?: Hue is the position on the color wheel in degrees: 0 is red, 120 is green and 240 is blue. Saturation is how vivid the color is, from 0% gray to 100% full color. Lightness runs from 0% black through 50% for the pure color to 100% white.
How do I get HSLA from a hex code?: Convert the 6-digit code to HSL, then add the opacity as a fourth value: #4f46e5 at half opacity is hsla(243, 75%, 59%, 0.5). In current CSS, hsl(243 75% 59% / 0.5) does the same. This tool converts the color only and does not read 8-digit codes with an alpha pair.
Is HSL the same as HSB or HSV?: No. Hue is the same angle in all of them, but HSB (also called HSV) uses brightness, where 100% is the pure color, while HSL uses lightness, where 100% is white. Pure red is hsl(0, 100%, 50%) but hsb(0, 100%, 100%). This tool outputs HSL only.
What is Hue, Sat, Lum in a color dialog?: It is the HSL model under another name, sometimes written HLS. Some desktop color dialogs show the three values on a scale such as 0 to 240 or 0 to 255 instead of degrees and percentages, so the numbers look different from CSS values for the same color.
What is the hue of a hex color?: The hue is the angle of the color on the color wheel, found from the balance of its red, green and blue values. The Hue row shows it in degrees. Orange #ffa500 has a hue of 39, gold #ffd700 is 51 and turquoise #40e0d0 is 174.

How HEX to HSL Converter works

This HEX to HSL converter turns a 3-digit or 6-digit hex code into the three numbers of the HSL model: hue as an angle from 0 to 360 degrees, saturation from 0% to 100% and lightness from 0% to 100%. The default #4f46e5 converts to hsl(243, 75%, 59%), and pure red #ff0000 is hsl(0, 100%, 50%). Values are rounded to whole numbers, which is how they are normally written in CSS. A Lightness shift slider adds or subtracts up to 40 points of lightness so you can derive a lighter or darker variant, and a four swatch ramp shows the same hue and saturation at 20%, 40%, 60% and 80% lightness.

Hex to HSL chart for common colors

HSL values as returned by the tool, rounded to whole numbers.

Color	Hex	HSL	Hue	Saturation	Lightness
Black	#000000	hsl(0, 0%, 0%)	0	0%	0%
White	#ffffff	hsl(0, 0%, 100%)	0	0%	100%
Gray	#808080	hsl(0, 0%, 50%)	0	0%	50%
Silver	#c0c0c0	hsl(0, 0%, 75%)	0	0%	75%
Red	#ff0000	hsl(0, 100%, 50%)	0	100%	50%
Maroon	#800000	hsl(0, 100%, 25%)	0	100%	25%
Brown	#a52a2a	hsl(0, 59%, 41%)	0	59%	41%
Tomato	#ff6347	hsl(9, 100%, 64%)	9	100%	64%
Orange	#ffa500	hsl(39, 100%, 50%)	39	100%	50%
Gold	#ffd700	hsl(51, 100%, 50%)	51	100%	50%
Yellow	#ffff00	hsl(60, 100%, 50%)	60	100%	50%
Olive	#808000	hsl(60, 100%, 25%)	60	100%	25%
Beige	#f5f5dc	hsl(60, 56%, 91%)	60	56%	91%
Lime	#00ff00	hsl(120, 100%, 50%)	120	100%	50%
Green	#008000	hsl(120, 100%, 25%)	120	100%	25%
Turquoise	#40e0d0	hsl(174, 72%, 56%)	174	72%	56%
Cyan	#00ffff	hsl(180, 100%, 50%)	180	100%	50%
Teal	#008080	hsl(180, 100%, 25%)	180	100%	25%
Dodger blue	#1e90ff	hsl(210, 100%, 56%)	210	100%	56%
Blue	#0000ff	hsl(240, 100%, 50%)	240	100%	50%
Navy	#000080	hsl(240, 100%, 25%)	240	100%	25%
Rebecca purple	#663399	hsl(270, 50%, 40%)	270	50%	40%
Magenta	#ff00ff	hsl(300, 100%, 50%)	300	100%	50%
Purple	#800080	hsl(300, 100%, 25%)	300	100%	25%
Pink	#ffc0cb	hsl(350, 100%, 88%)	350	100%	88%

Black, white and grays have no hue. Their hue is reported as 0 and their saturation as 0%.

The hex to HSL formula

L = (max + min) / 2; S = (max - min) / (1 - |2L - 1|); H = 60 x ((G - B) / (max - min)) if red is largest, 60 x ((B - R) / (max - min) + 2) if green is largest, 60 x ((R - G) / (max - min) + 4) if blue is largest

R, G and B are the three hex pairs converted to decimal and divided by 255, and max and min are the largest and smallest of them. If max equals min the color is a gray, with saturation 0 and hue 0. A negative hue has 360 added. Worked example for #3b82f6: the pairs 3b, 82 and f6 are 59, 130 and 246, or 0.231, 0.510 and 0.965. Max is 0.965 and min is 0.231, so L = 0.598, which rounds to 60%. S = 0.734 / (1 - 0.196) = 0.913, or 91%. Blue is largest, so H = 60 x ((0.231 - 0.510) / 0.734 + 4) = 217 degrees. Result: hsl(217, 91%, 60%).

Lightening and darkening with the Lightness shift slider

The shift is added to the lightness value. Hue and saturation do not change.

A darker hover state

HEX colour #4f46e5, Lightness shift -10%

hsl(243, 75%, 49%), HEX #291fdb

A lighter variant

HEX colour #4f46e5, Lightness shift +10%

hsl(243, 75%, 69%), HEX #7b75eb

Red to light red

HEX colour #ff0000, Lightness shift +25%

hsl(0, 100%, 75%), HEX #ff8080

Maximum shift

HEX colour #4f46e5, Lightness shift +40% and then -40%

hsl(243, 75%, 99%), HEX #fbfbfe and hsl(243, 75%, 19%), HEX #100c55

Lightness is capped at 0% and 100%, so shifting white upward leaves it at hsl(0, 0%, 100%).

The ramp for one hue

HEX colour #ff0000

Lightness ramp: 20% #660000, 40% #cc0000, 60% #ff3333, 80% #ff9999

Hue angles on the color wheel

Hue	Color at 100% saturation, 50% lightness	Hex
0 (and 360)	Red	#ff0000
30	Orange	#ff8000
60	Yellow	#ffff00
120	Green (lime)	#00ff00
180	Cyan	#00ffff
240	Blue	#0000ff
300	Magenta	#ff00ff

Adding 180 to a hue gives the complementary color. Hues wrap around, so 240 + 180 is 60.

Rounding: why the HEX row can differ from the code you typed

The converter rounds hue to a whole degree and saturation and lightness to a whole percent. There are more than 16.7 million hex colors but only about 3.6 million whole number HSL combinations, so several neighboring hex codes share one HSL value.

The HEX and RGB rows in the Values panel show the color rebuilt from those rounded HSL numbers, including any Lightness shift. With no shift they are usually identical to your input or a step or two off in a channel. Entering #4f46e5 gives hsl(243, 75%, 59%), and that HSL value written back as hex is #5048e5, rgb(80, 72, 229), where the original is rgb(79, 70, 229). The difference is invisible on screen, but if you need the exact original code, keep the one you typed. Colors whose HSL values are whole numbers to begin with, such as #ff0000, #663399 or #808080, come back unchanged.

When HSL is the better format to work in

Hover, active and disabled states: keep hue and saturation, change lightness by 5 to 10 points.
Comparing two colors: the hue shows at once whether a blue leans toward green (below 240) or toward purple (above 240).
Diagnosing a dull color: the Saturation row shows how far it is from gray, where 0% is a pure gray and 100% is the most vivid color at that lightness.
Theming with CSS variables: store the hue once and build surfaces, borders and text from it with different lightness values.
Not for judging contrast: yellow and blue at the same HSL lightness differ hugely in perceived brightness, so check text pairs with a contrast checker.

Using HEX to HSL Converter

1
Type or paste a code into HEX colour, for example #3b82f6 or the short form #f00. The # sign is optional.
2
Read the HSL row in the Values panel for the full hsl() value, and the Hue, Saturation and Lightness rows for each number on its own.
3
Leave Lightness shift at 0% for a straight conversion, or drag it between -40% and +40% to darken or lighten the color.
4
Use the Lightness ramp swatches to see the hue at 20%, 40%, 60% and 80% lightness.

Questions people ask

Can I convert HSL back to hex?

This page converts in one direction, from hex. The HEX row does show the hex code of the HSL value after any Lightness shift, which is useful for variants. To start from hue, saturation and lightness numbers, use an HSL to HEX converter.

Does it accept 3-digit, 8-digit or uppercase hex codes?

It accepts 3-digit and 6-digit codes in upper or lower case, with or without the # sign. #f00 is read as #ff0000. An 8-digit code with an alpha pair, such as #3b82f680, is rejected as not a valid hex color, and so are color names such as blue.

How do I write an HSL color in CSS?

Either hsl(217, 91%, 60%) with commas, which is what this tool outputs, or the newer space separated form hsl(217 91% 60%). Both work in all current browsers. The hue may also carry a unit, as in 217deg.

Why is the hue 0 for gray, black and white?

A gray has equal red, green and blue values, so there is no dominant channel to define a hue and saturation is 0%. The hue is reported as 0 by convention. Any hue with 0% saturation produces the same gray.

Why do some converters show decimals for the same color?

They keep more precision. #4f46e5 is closer to hsl(243.4, 75.4%, 58.6%) before rounding. This tool rounds to whole numbers, which is the usual way HSL is written by hand and typically lands within a step or two of the original in each RGB channel.

Does it convert to HCL, LCH or OKLCH?

No. Those are perceptual color spaces with different mathematics, and their lightness and hue values are not interchangeable with HSL. This tool outputs HSL and the matching RGB only.

How do I make a color lighter in HSL?

Raise the third number. hsl(217, 91%, 60%) becomes lighter at hsl(217, 91%, 75%) and darker at hsl(217, 91%, 45%), with the same hue. The Lightness shift slider does this for you: #3b82f6 at -10% becomes hsl(217, 91%, 50%), which is #0b64f4.

Is the conversion done in my browser?

Yes. The calculation runs on the page itself, and the color codes you enter are not uploaded or saved.