HSL to RGB Color Converter
Convert HSL (hue, saturation, lightness) color values to RGB instantly.
How to use this tool
- Enter the hue (0–360°), saturation (0–100%), and lightness (0–100%).
- The tool outputs the equivalent red, green, and blue values (0–255).
- Copy the rgb() string into CSS or read the individual R, G, B numbers.
Convert HSL (Hue, Saturation, Lightness) values back to RGB for use in images, Canvas, or anywhere RGB is required.
Formula
Given H (0–360°), S (0–100%), L (0–100%), normalize: h = H/360, s = S/100, l = L/100.
If s = 0, then R = G = B = round(l × 255) (achromatic).
Otherwise compute chroma anchors:q = l < 0.5 ? l(1+s) : l + s − l×sp = 2l − q
Then use the piecewise hue-to-RGB helper for each channel:R = hue2rgb(p, q, h + 1/3)G = hue2rgb(p, q, h)B = hue2rgb(p, q, h − 1/3)
where hue2rgb(p,q,t) maps t into the interval [0,1] and interpolates between p and q.
How it works
Converting HSL back to RGB requires reconstructing the three color channel values from the hue angle and the two amplitude parameters (saturation and lightness). The algorithm computes two chroma boundary values — a lower bound p and an upper bound q — then shifts the hue angle by ±120° to derive each of the three channels independently using a piecewise linear interpolation function.
A frequent mistake is supplying hue in degrees (0–360) without dividing by 360 first, and supplying saturation or lightness as percentages (0–100) without dividing by 100 — the math requires all three inputs in the 0–1 range or the output channels will be grossly incorrect.
Worked example
HSL (0°, 0%, 0%) — pure black — to RGB
- Normalize: h = 0/360 = 0, s = 0/100 = 0, l = 0/100 = 0.
- Because s = 0 (achromatic), set r = g = b = l = 0.
- Scale to 0–255: R = round(0×255) = 0, G = 0, B = 0.
rgb(0, 0, 0)
Common mistakes to avoid
- Entering saturation and lightness as decimals (0 to 1) instead of percentages (0 to 100), causing the output RGB values to all cluster near 0.
- Confusing HSL with HSB/HSV -- hue is shared, but S=100% L=50% (HSL) and S=100% V=100% (HSV) both give a fully saturated color, while other combinations diverge.
- Setting lightness to 100% expecting pure white with the chosen hue -- any L=100% produces white (#ffffff) regardless of hue or saturation.
Key terms
- HSL
- A cylindrical color model with axes for Hue (0°–360°), Saturation (0–100%), and Lightness (0–100%), designed to be more intuitive than raw RGB.
- RGB
- The additive color model used by screens, representing colors as mixtures of Red, Green, and Blue channels each ranging from 0 to 255.
- Chroma
- The colorfulness or vividness of a hue; in HSL-to-RGB conversion it is the amplitude of the sinusoidal component that separates the three channels.
- Piecewise linear interpolation
- A method that divides an interval into segments and applies a different linear formula within each segment; used here to map a hue angle to a channel intensity.
Frequently asked questions
- How does HSL to RGB conversion work?
- The algorithm converts saturation/lightness to intermediate values, then maps the hue angle to separate R, G, B channels using a piecewise function.
- What is hsl(120, 100%, 50%)?
- That is pure green: rgb(0, 255, 0).