What ranges do the HSL inputs use?

Hue is 0 to 360 degrees, while saturation and lightness are each 0 to 100 percent. Values outside those ranges are clamped automatically.

Can I get a hex code too?

Yes. Alongside the rgb() value the tool also shows the matching hex code, so you can use whichever format your project needs.

What do saturation and lightness do?

Saturation controls vividness: 0% is grey, 100% is the most vivid version of the hue. Lightness sets brightness: 0% is black, 100% is white, and 50% is the pure colour.

Why does lightness 50% give the purest colour?

In HSL the colour cone is widest at 50% lightness, where the hue is fully expressed. Above 50% it blends toward white and below 50% toward black, so the most saturated form sits at L = 50%.

Is HSL the same as HSV?

No. HSL uses lightness (50% = pure colour, 100% = white) while HSV/HSB uses value (100% = pure colour). They share the hue but compute the third axis differently, so the same numbers give different colours.

Is my colour data uploaded?

No. The conversion runs entirely in your browser using JavaScript — nothing is uploaded.

HSL to RGB Converter

HSL to RGB converter

Enter a colour as hue, saturation and lightness and get the equivalent RGB value — plus the matching hex code — instantly, with a live swatch. HSL makes it easy to dial in a colour by feel; this tool gives you the rgb() and #rrggbb forms you need for CSS and design software.

How it works

The converter applies the standard HSL-to-RGB algorithm. It normalises hue to 0–1 of the way round the wheel and saturation and lightness to 0–1, then computes a chroma value C = (1 − |2L − 1|) × S (how colourful the result is), an intermediate X based on the hue position, and a match value m = L − C/2 that lifts everything to the right lightness. Depending on which sixth of the colour wheel the hue falls in, C, X and 0 are assigned to red, green and blue, then each channel has m added and is multiplied by 255 and rounded to a 0–255 integer.

Example

For hsl(217, 91%, 60%):

The hue (217°) lands in the blue-cyan region, S = 0.91, L = 0.60
C ≈ 0.728, m ≈ 0.236
Result: roughly rgb(59, 130, 246) = #3b82f6

HSL	RGB	Hex
hsl(0, 100%, 50%)	rgb(255, 0, 0)	#ff0000
hsl(120, 100%, 50%)	rgb(0, 255, 0)	#00ff00
hsl(217, 91%, 60%)	rgb(59, 130, 246)	#3b82f6
hsl(0, 0%, 50%)	rgb(128, 128, 128)	#808080

Everything runs in your browser — nothing is uploaded.