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.
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.
Paid links below. As an Amazon Associate we earn from qualifying purchases.
Library
Colour references for your next project
Compare the original references behind this archive. Check the contents, edition and format before choosing a book.
Book links are Amazon Associates affiliate links. Your price is unchanged; a small commission supports the archive. As an Amazon Associate we earn from qualifying purchases.
Torn between the two Wada dictionaries? Vol 1 vs Vol 2, compared plate by plate →
Book links are Amazon Associates affiliate links. Your price is unchanged; a small commission supports the archive. As an Amazon Associate we earn from qualifying purchases.