From HSL to RGB
HSL is the friendliest way to design a color — pick a hue on the wheel, decide how vivid it is, then how light or dark. But many places still need the RGB or HEX equivalent: design tools, image editors, canvas and WebGL code, Android and iOS color resources, or a CMS color field that only takes #rrggbb. This converter turns any hsl() or hsla() value into exact RGB and HEX as you move the sliders.
The slider tracks are drawn live from your current color, so the hue track always shows the full rainbow at your chosen saturation and lightness, the saturation track fades from grey to full color, and the lightness track runs from black through your hue to white. It is a quick way to explore variations without guessing.
Under the hood the conversion uses the chroma method from the CSS Color specification, and the tool prints every intermediate number for your color so you can check the arithmetic or implement it yourself.
How to use the HSL to RGB Converter
- Drag the Hue, Saturation and Lightness sliders, or type exact numbers in the boxes beside them.
- Or paste a value such as
hsl(217, 91%, 60%),hsla(217 91% 60% / 0.5)or just217 91% 60%— hue units likedegandturnare understood. - Lower the Alpha slider for a translucent color; RGBA and an 8-digit HEX code appear automatically.
- Copy the RGB, RGBA or HEX value you need.
Example
Converting hsl(217, 91%, 60%) with the chroma method:
C = (1 − |2 × 0.6 − 1|) × 0.91 = 0.728
X = C × (1 − |(217 ÷ 60) mod 2 − 1|) = 0.279
m = 0.6 − 0.728 ÷ 2 = 0.236
Hue 217° is in sector 3 → (0, X, C) = (0, 0.279, 0.728)
R = (0 + 0.236) × 255 = 60
G = (0.279 + 0.236) × 255 = 131
B = (0.728 + 0.236) × 255 = 246
hsl(217, 91%, 60%) = rgb(60, 131, 246) = #3c83f6Hue reference
0°/360°— red30°— orange60°— yellow120°— green180°— cyan240°— blue300°— magenta
Modern hsl() syntax
CSS Color Level 4 lets you drop the commas and the separate hsla() function: hsl(217 91% 60% / 0.5) is identical to hsla(217, 91%, 60%, 0.5). Both forms work in every current browser, and this tool reads either. For HEX, HWB and OKLCH at once, try the Color Converter; to go the other way, use RGB to HSL.
Frequently Asked Questions
Why do I get slightly different RGB values from other converters?
The exact math gives fractional channels, which must be rounded to whole numbers between 0 and 255. Tools that round intermediate steps, or that treat 59.5 differently, can differ by one. A difference of one step is invisible.
What happens with hue values above 360?
Hue is an angle, so it wraps around: 400° is the same as 40°, and −30° is 330°. Pasted values are normalised automatically.
Why does 100% lightness always give white?
In HSL, lightness 100% means fully mixed with white and 0% means fully mixed with black, whatever the hue and saturation. The purest version of a hue is at 50% lightness and 100% saturation.
Can I convert HSL directly to HEX?
Yes — the HEX value is shown alongside RGB. HSL always goes through RGB first, because HEX is just RGB written in base 16; the HEX to RGB Converter explains that step.