Tools / Color Converter / HSL → RGB
HSL to RGB Converter.
HSL to RGB rebuilds the three 0-255 channels from a hue angle and two percentages. Browsers do this conversion internally every time you write hsl() in CSS — doing it yourself is useful for canvas drawing, data viz, and generating palettes programmatically.
Not a recognizable HSL color.
RGB
All formats
The HSL → RGB formula
C = (1 − |2L−1|)·S, X = C·(1 − |(H/60 mod 2) − 1|), m = L − C/2. The hue sector chooses which of (C,X,0) maps to R,G,B; add m and scale by 255.
Worked example
Convert hsl(140, 30%, 37%):
- C = (1 − |2·0.37 − 1|)·0.30 ≈ 0.22
- Hue 140° → sector 120-180 → (0, C, X)
- Add m, ×255 → rgb(66, 123, 84)
JavaScript
function hslToRgb(h,s,l){
s/=100; l/=100;
const c=(1-Math.abs(2*l-1))*s, x=c*(1-Math.abs((h/60)%2-1)), m=l-c/2;
const [r,g,b]=h<60?[c,x,0]:h<120?[x,c,0]:h<180?[0,c,x]:h<240?[0,x,c]:h<300?[x,0,c]:[c,0,x];
return [Math.round((r+m)*255),Math.round((g+m)*255),Math.round((b+m)*255)];
}FAQ
Does hue wrap around?
Yes — hue is an angle, so 360° equals 0° (both red). Negative or >360 values are taken modulo 360 before conversion.