HSL to RGB Converter (Live Color Codes & CSS Generator)
Convert cylindrical hsl() and hsla() color coordinates into decimal Red, Green, Blue (0–255) light channels. Easily parse raw HSL strings, fine-tune values with synchronized sliders, and generate modern CSS Level 4 tokens and WebGL normalized vectors in real time.
To convert HSL to RGB, compute the color chroma ($C = (1 - |2L - 1|) \times S$) from Saturation and Lightness fractions. Use the Hue angle ($0^\circ\text{–}360^\circ$) to determine intermediate channel values ($X$) and the lightness offset ($m = L - C/2$). Multiply each resulting channel by 255 to yield base-10 decimal RGB integers from 0 to 255 (e.g., hsl(221, 83%, 53%) becomes rgb(37, 99, 235)).
The Mathematics of HSL to RGB Conversion
Translating cylindrical HSL coordinates into discrete 8-bit additive RGB integers requires calculating color chroma ($C$), intermediate linear coordinates ($X$), and applying the lightness offset ($m$):
- Normalize Saturation and Lightness to Unit Fractions [0, 1]:
S = Saturation / 100,L = Lightness / 100 - Calculate Color Chroma ($C$):
C = (1 - Math.abs(2L - 1)) × S - Calculate Intermediate Hue Coordinate ($X$):
X = C × (1 - Math.abs(((Hue / 60) % 2) - 1)) - Calculate Lightness Offset ($m$):
m = L - (C / 2) - Calculate Base-10 Decimal Channels (0–255):
Depending on the $60^\circ$ Hue sector, add $m$ to $(R', G', B')$ and multiply by 255:R = Math.round((R' + m) * 255)G = Math.round((G' + m) * 255)B = Math.round((B' + m) * 255)
JavaScript HSL to RGB Algorithm (Zero Dependencies)
To automate HSL to RGB conversion inside your frontend applications or build tools:
// Pure JavaScript HSL to RGB converter
function hslToRgb(h, s, l) {
s /= 100;
l /= 100;
const k = n => (n + h / 30) % 12;
const a = s * Math.min(l, 1 - l);
const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
return {
r: Math.round(255 * f(0)),
g: Math.round(255 * f(8)),
b: Math.round(255 * f(4))
};
}
console.log(hslToRgb(221, 83, 53)); // { r: 37, g: 99, b: 235 }
The 360° Color Wheel Reference Anchors
| Hue Angle | Spectral Color | Dominant Channel | Pure RGB (100% Sat / 50% Light) | Visual Swatch |
|---|---|---|---|---|
| 0° / 360° | Pure Red | Red | rgb(255, 0, 0) | |
| 60° | Yellow | Red + Green | rgb(255, 255, 0) | |
| 120° | Pure Green | Green | rgb(0, 255, 0) | |
| 180° | Cyan | Green + Blue | rgb(0, 255, 255) | |
| 240° | Pure Blue | Blue | rgb(0, 0, 255) | |
| 300° | Magenta | Red + Blue | rgb(255, 0, 255) |
Related Two-Way Color Converters:
- RGB to HSL Converter — Reverse mapping: convert decimal RGB values into HSL coordinates for CSS tokens.
- HEX to RGB Converter — Translate hex strings into legacy and modern CSS rgb() formats.
- RGB to HEX Converter — Convert decimal RGB integers and opacity to 6-digit and 8-digit hex values.
- HEX to HSL Converter — Convert hex strings to Hue, Saturation, and Lightness coordinates.
- HSL to HEX Converter — Convert HSL coordinates into 6-digit and 8-digit hex codes.
- Full Color Converter Hub — Simultaneous conversion between HEX, RGB, and HSL palettes.
Frequently Asked Questions
What is the mathematical formula for converting HSL to RGB?
To convert HSL to RGB, calculate the color chroma (C = (1 - |2L - 1|) * S) from Saturation and Lightness percentages. Calculate intermediate values (X) using the Hue angle, add the lightness offset (m = L - C/2), and multiply each resulting channel by 255 to yield integer values from 0 to 255.
What is modern space-separated RGB syntax in CSS?
Under CSS Color Module Level 4, comma-separated syntax is replaced with space-separated values: rgb(37 99 235). When an opacity alpha channel is included, it is separated by a forward slash: rgb(37 99 235 / 80%).
Can I paste raw CSS HSL strings into this tool?
Yes. You can paste strings like hsl(221, 83%, 53%), hsla(221, 83%, 53%, 0.8), or modern hsl(221deg 83% 53% / 80%) into the input helper to populate the sliders and RGB outputs automatically.
Why do HTML5 Canvas and WebGL require RGB instead of HSL?
HTML5 Canvas ImageData buffers and GPU graphics shaders process pixels as raw 8-bit memory bytes (Red, Green, Blue, Alpha from 0 to 255). Converting HSL to RGB is required to write pixel data into canvas arrays.
How do achromatic colors (black, gray, white) convert from HSL to RGB?
When Saturation is 0%, chroma is zero and Hue has no effect. The Red, Green, and Blue channels equal each other, determined entirely by Lightness: 0% Lightness produces rgb(0, 0, 0), 50% produces rgb(128, 128, 128), and 100% produces rgb(255, 255, 255).