HSL to HEX Converter

Move three sliders for hue, saturation and lightness and read the hex code and rgb() value, plus eight lighter and darker versions of the same hue.

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

Colour

#5048e5

Conversions

HEX: #5048e5
RGB: rgb(80, 72, 229)
HSL: hsl(243, 75%, 59%)
CSS variable: --colour: #5048e5;
Readable text on this: White; Contrast 6.18:1

Lightness scale at this hue

90%

80%

70%

60%

50%

40%

30%

20%

Quick answers

How do I convert HSL to hex?: Convert HSL to RGB first, then write each RGB channel as a two-digit base-16 number. hsl(210, 100%, 50%) works out to rgb(0, 128, 255), and 0, 128 and 255 in hex are 00, 80 and ff, so the code is #0080ff.
What is hsl(0, 100%, 50%) in hex?: hsl(0, 100%, 50%) is #ff0000, pure red, the same as rgb(255, 0, 0). A hue of 360 gives the same color, because the hue scale is a circle that ends where it starts.
What do hue, saturation and lightness mean?: Hue is the angle on the color wheel in degrees, which picks the color itself. Saturation is how vivid it is, from 0% gray to 100% full color. Lightness is how light it is: 0% is black, 50% is the pure hue and 100% is white.
Is HSL the same as HSV or HSB?: No. They share hue, but the other two numbers are measured differently. In HSL a fully saturated color at 100% lightness is white. In HSV, also called HSB, a fully saturated color at 100% value is the pure hue. Values copied from an HSB picker give the wrong hex if entered as HSL.
What hex code is hsl(0, 0%, 50%)?: #808080, a mid gray, which is rgb(128, 128, 128). With saturation at 0% the hue has no effect, so every hue from 0 to 360 gives the same gray at a given lightness.
Can every hex color be written as HSL?: Yes, if decimals are allowed. With whole numbers only, HSL has 360 x 101 x 101 = 3,672,360 combinations against 16,777,216 hex codes, so many codes cannot be reached exactly. #4f46e5 rounds to hsl(243, 75%, 59%), and converting that back gives #5048e5.

How HSL to HEX Converter works

Set a hue from 0 to 360 degrees and a saturation and lightness from 0 to 100%, and this HSL to HEX converter returns the six-digit code as you drag. hsl(0, 100%, 50%) is #ff0000, hsl(120, 100%, 50%) is #00ff00 and hsl(240, 100%, 50%) is #0000ff. The same color is shown as rgb(), and the tool suggests white or black text to put on it, with the contrast ratio of that pairing. Below the result is a row of eight swatches at 90% down to 20% lightness, all at your hue and saturation. Each is labelled with its lightness and has a copy button that gives its hex code. That row is a quick source of hover, border and background shades that belong to one family.

HSL to hex chart: the color wheel every 30 degrees

The result for each hue at 100% saturation and 50% lightness, with the text color and contrast ratio the tool reports for it.

Hue	Color	HSL	Hex code	RGB	Readable text
0	Red	hsl(0, 100%, 50%)	#ff0000	rgb(255, 0, 0)	White, 4:1
30	Orange	hsl(30, 100%, 50%)	#ff8000	rgb(255, 128, 0)	White, 2.52:1
60	Yellow	hsl(60, 100%, 50%)	#ffff00	rgb(255, 255, 0)	Black, 16.53:1
90	Yellow-green	hsl(90, 100%, 50%)	#80ff00	rgb(128, 255, 0)	Black, 13.71:1
120	Green	hsl(120, 100%, 50%)	#00ff00	rgb(0, 255, 0)	Black, 12.93:1
150	Spring green	hsl(150, 100%, 50%)	#00ff80	rgb(0, 255, 128)	Black, 13.2:1
180	Cyan	hsl(180, 100%, 50%)	#00ffff	rgb(0, 255, 255)	Black, 14.15:1
210	Azure blue	hsl(210, 100%, 50%)	#0080ff	rgb(0, 128, 255)	White, 3.8:1
240	Blue	hsl(240, 100%, 50%)	#0000ff	rgb(0, 0, 255)	White, 8.59:1
270	Violet	hsl(270, 100%, 50%)	#8000ff	rgb(128, 0, 255)	White, 6.25:1
300	Magenta	hsl(300, 100%, 50%)	#ff00ff	rgb(255, 0, 255)	White, 3.14:1
330	Rose	hsl(330, 100%, 50%)	#ff0080	rgb(255, 0, 128)	White, 3.77:1

All twelve colors have the same lightness of 50%, yet the contrast figures range from 2.52:1 to 16.53:1. HSL lightness is arithmetic, not a measure of how bright a color looks.

How lightness and saturation change the hex code

One hue, 210 degrees. The first six rows change only lightness at 100% saturation; the last four change only saturation at 50% lightness.

HSL	Hex code	RGB	What changed
hsl(210, 100%, 10%)	#001a33	rgb(0, 26, 51)	Lightness 10%
hsl(210, 100%, 30%)	#004d99	rgb(0, 77, 153)	Lightness 30%
hsl(210, 100%, 50%)	#0080ff	rgb(0, 128, 255)	Lightness 50%, the pure hue
hsl(210, 100%, 70%)	#66b3ff	rgb(102, 179, 255)	Lightness 70%
hsl(210, 100%, 90%)	#cce6ff	rgb(204, 230, 255)	Lightness 90%
hsl(210, 100%, 100%)	#ffffff	rgb(255, 255, 255)	Lightness 100%, always white
hsl(210, 75%, 50%)	#2080df	rgb(32, 128, 223)	Saturation 75%
hsl(210, 50%, 50%)	#4080bf	rgb(64, 128, 191)	Saturation 50%
hsl(210, 25%, 50%)	#60809f	rgb(96, 128, 159)	Saturation 25%
hsl(210, 0%, 50%)	#808080	rgb(128, 128, 128)	Saturation 0%, always gray

The green channel stays at 128 through every saturation change. Lowering saturation pulls the highest and lowest channels toward the middle one.

HSL to hex formula

With S and L as fractions from 0 to 1: C = (1 - |2L - 1|) x S. X = C x (1 - |(H / 60) mod 2 - 1|). m = L - C / 2. Pick (R1, G1, B1) by hue: 0 to 60 is (C, X, 0); 60 to 120 is (X, C, 0); 120 to 180 is (0, C, X); 180 to 240 is (0, X, C); 240 to 300 is (X, 0, C); 300 to 360 is (C, 0, X). Then R = (R1 + m) x 255, G = (G1 + m) x 255, B = (B1 + m) x 255, each rounded and written as two hex digits.

C is the chroma, the gap between the strongest and weakest channel. X is the value of the middle channel, and m is added to all three to reach the right lightness. For hsl(210, 100%, 50%): C = (1 - |1 - 1|) x 1 = 1. H / 60 = 3.5, and 3.5 mod 2 = 1.5, so X = 1 x (1 - 0.5) = 0.5. m = 0.5 - 0.5 = 0. A hue of 210 falls in the 180 to 240 band, giving (0, 0.5, 1). Multiplying by 255 gives 0, 127.5 and 255, which round to 0, 128 and 255. In hex those are 00, 80 and ff: #0080ff.

Worked HSL to hex examples

The starting values

Hue 243, Saturation 75%, Lightness 59%

HEX #5048e5. RGB rgb(80, 72, 229). Readable text on this: White, contrast 6.18:1. CSS variable --colour: #5048e5;

A color with an exact whole-number HSL form

Hue 270, Saturation 50%, Lightness 40%

HEX #663399. RGB rgb(102, 51, 153). Readable text on this: White, contrast 8.41:1.

This is the CSS named color rebeccapurple, one of the codes that survives the round trip exactly.

A dark editor-style background

Hue 220, Saturation 13%, Lightness 18%

HEX #282c34. RGB rgb(40, 44, 52). Readable text on this: White, contrast 14:1.

A light tint for a callout box

Hue 210, Saturation 100%, Lightness 90%

HEX #cce6ff. RGB rgb(204, 230, 255). Readable text on this: Black, contrast 13.8:1.

The lightness scale for a red

Hue 0, Saturation 100%, Lightness 50%

HEX #ff0000. Scale: 90% #ffcccc, 80% #ff9999, 70% #ff6666, 60% #ff3333, 50% #ff0000, 40% #cc0000, 30% #990000, 20% #660000.

The swatches are labelled 90% to 20%; the hex codes listed are what each swatch's copy button gives. The scale depends only on hue and saturation, so moving the Lightness slider changes the main result and leaves these eight swatches as they are.

Why a named color's HSL value can give a slightly different hex

Hex codes hold 256 levels per channel. HSL written in whole degrees and whole percentages is a coarser grid, so an HSL value quoted for a color is often a rounded description of it. Convert the rounded value back and you can land one or two steps away.

CSS orange is #ffa500, usually quoted as hsl(39, 100%, 50%). Enter those numbers here and the result is #ffa600. Gold, #ffd700, is quoted as hsl(51, 100%, 50%), which converts to #ffd900. Pink, #ffc0cb, is quoted as hsl(350, 100%, 88%), which converts to #ffc2cc. Tomato, hsl(9, 100%, 64%), comes back as exactly #ff6347.

The differences are too small to see, but they matter when a code has to match a brand guide or a design token character for character. In that case keep the original hex as the reference and treat the HSL numbers as a working description. The sliders here move in whole steps, so decimal values such as 38.8 degrees cannot be entered.

How to read the Readable text on this result

The tool picks Black when the WCAG relative luminance of your color is above 0.45 and White otherwise, then shows the contrast ratio for that pairing. Black here means the near-black #101828, which is why a white background reports 17.75:1 and not the 21:1 of pure black on white.

Read the ratio, not only the word. Normal-size body text needs at least 4.5:1 to meet WCAG AA, and large text needs 3:1. The single cutoff also means the suggestion is not always the stronger of the two options for vivid mid-tones. hsl(30, 100%, 50%), #ff8000, is given White at 2.52:1, although #101828 on it reaches 7.05:1. hsl(210, 100%, 70%), #66b3ff, is given White at 2.22:1, although #101828 reaches 7.99:1. When the ratio shown is low, try the other text color in a contrast checker, or darken the background by a step or two on the lightness scale and check again.

Using HSL to HEX Converter

1
Drag the Hue slider to a position on the color wheel: 0 is red, 120 is green, 240 is blue, and 360 is red again.
2
Set Saturation, from 0% (gray) to 100% (the most vivid form of the hue).
3
Set Lightness, from 0% (black) through 50% (the pure hue) to 100% (white).
4
Read HEX and RGB in the Conversions panel. The CSS variable line gives the code as a ready-made custom property.
5
Check Readable text on this for White or Black and the contrast ratio shown under it.
6
Use the copy button on any swatch in Lightness scale at this hue if you need the hex code of a lighter or darker shade of the same color.

Common questions

Can I type or paste an hsl() value instead of using the sliders?

No. The three inputs are sliders, so set Hue, Saturation and Lightness separately. Each moves in whole numbers, and the HSL line in the results confirms the exact value being converted.

Does the tool support hsla() or transparency?

No. It converts opaque colors and returns a six-digit hex code. To add transparency yourself, append a two-digit alpha pair to the code: 80 is about 50% opacity, so #0080ff at half strength is #0080ff80.

Why does 100% lightness give white instead of a bright color?

In HSL the pure hue sits at 50% lightness. Above that the color is mixed toward white and below it toward black, so 100% is white and 0% is black for every hue and saturation. If you want the strongest version of a hue, use 100% saturation and 50% lightness.

Why does the hue not matter when saturation is 0%?

Zero saturation means no color at all, only a gray whose shade is set by lightness. hsl(0, 0%, 75%) and hsl(210, 0%, 75%) are both #bfbfbf. The lightness scale swatches also turn into a run of grays, from #e6e6e6 down to #333333.

Can I use HSL directly in CSS without converting?

Yes. hsl(210, 100%, 50%) is valid wherever a hex code is, in all current browsers. Converting to hex is useful when a tool, a brand document or an older system only accepts hex, or when you want one canonical value to search for in a codebase.

How do I make a darker hover color from an HSL value?

Keep hue and saturation the same and lower lightness by about 10 points. For hsl(210, 100%, 50%), #0080ff, the 40% step is #0066cc and the 30% step is #004d99. Both are in the lightness scale as the swatches labelled 40% and 30%, so you can copy them without moving a slider.

Is the lightness scale the same as a 50 to 950 design system scale?

No. It is eight evenly spaced lightness steps, from 90% to 20%, at your hue and saturation. For a named 50 to 950 scale with CSS variables, use the Colour Shades Generator on this site.