What is the HSL to RGB Converter?
HSL stands for Hue, Saturation, and Lightness — an intuitive way to describe color where hue is an angle on the color wheel (0-360°), saturation is the intensity (0-100%), and lightness is how light or dark the color is (0-100%). RGB describes the same color as three channels — Red, Green, and Blue — each ranging from 0 to 255, the format used by screens, CSS, and image files. This converter translates an HSL color into its exact RGB equivalent.
How to use it
Enter the hue in degrees, the saturation as a percentage, and the lightness as a percentage. The calculator instantly returns the matching rgb(r, g, b) triple and shows a live preview swatch so you can confirm the color visually.
The formula explained
First convert S and L to fractions (0-1). Chroma is the colorfulness: \(C = (1 - |2L - 1|)\cdot S\). The intermediate component is \(X = C\cdot (1 - |(H/60 \bmod 2) - 1|)\), and the match value \(m = L - C/2\) shifts everything to the correct lightness. The hue is divided into six 60° sextants; each sextant assigns C, X, and 0 to the R, G, B slots in a specific order. Finally, add m to each component and multiply by 255 (rounding to the nearest integer).
$$(R,G,B) = \big( (R_1+m)\cdot 255,\; (G_1+m)\cdot 255,\; (B_1+m)\cdot 255 \big)$$where
$$\left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\,(1 - |(H/60 \bmod 2) - 1|) \\ m &= L - \tfrac{C}{2} \\ S &= \frac{\text{Saturation }(\%)}{100},\quad L = \frac{\text{Lightness }(\%)}{100} \\ H &= \text{Hue }(^{\circ}) \end{aligned} \right.$$Worked example
For HSL(210°, 50%, 60%): \(S = 0.5\), \(L = 0.6\).
$$C = (1 - |1.2 - 1|) \times 0.5 = (1 - 0.2) \times 0.5 = 0.4$$\(H/60 = 3.5\), so
$$X = 0.4 \times (1 - |3.5 \bmod 2 - 1|) = 0.4 \times (1 - 0.5) = 0.2$$$$m = 0.6 - 0.2 = 0.4$$Sextant 3 (\(\leq H/60 < 4\)) gives \((R',G',B') = (0, X, C) = (0, 0.2, 0.4)\). Add m:
$$(0.4, 0.6, 0.8) \times 255 = \textbf{(102, 153, 204)}$$
FAQ
Why are my RGB numbers rounded? RGB channels are integers from 0 to 255, so the scaled values are rounded to the nearest whole number.
What does saturation 0% give? A fully desaturated color is a gray whose value depends only on lightness — all three RGB channels are equal.
Is hue wrapped if I enter over 360? Yes. Hue is taken modulo 360, so 370° behaves like 10°.
