HSL is the friendly way to choose a color, RGB is what screens, canvas APIs and image code actually consume. This converter turns any hue, saturation and lightness triple into exact 0–255 channels.
How HSL to RGB conversion works
- Convert S and L to fractions and compute the chroma C = (1 − |2L − 1|) × S.
- Divide the hue by 60 to find its segment on the color wheel and compute the intermediate value X = C × (1 − |(H/60 mod 2) − 1|).
- Assign C, X and 0 to the R, G and B slots according to that segment.
- Add the lightness offset L − C/2 to all three channels and multiply by 255.
Worked example
The result is exact up to the final rounding to whole channels. Fractional hue or saturation values are supported and simply land on the nearest RGB triple.
HSL and RGB explained
What is HSL?
HSL splits a color into hue (0–360° on the color wheel), saturation (how colorful, 0–100%) and lightness (how bright, 0–100%). Because each part matches the way people describe color, HSL is the easiest format for building tints, shades and consistent palettes, by hand or in code.
- Syntax:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Best for:
- palettes, tints and shades, theming
What is RGB?
RGB describes a color as three channels of light (red, green and blue), each from 0 to 255. It mirrors how screens actually work: all three at 255 give white, all at 0 give black. RGB is the right choice whenever you need to calculate with a color, and rgba() adds transparency on top.
- Syntax:
- rgb(R, G, B)
- Range:
- 0–255 per channel
- Best for:
- code, canvas, transparency with rgba()
HSL to RGB reference table
The most common CSS colors, converted from HSL to RGB.
| Color | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |