Convert hsl() colors back to RGB channels. The tool walks the standard chroma/X/match algorithm for your exact hue segment, showing which of the six hue sectors your color falls into, then returns both modern space-separated and legacy comma rgb() syntax, ready to paste anywhere RGB is required.
Settings
Generated locally in your browser — your settings and results never leave this page.
The return path from cylinder to channels
Everything a browser paints eventually becomes RGB channels, so every hsl() declaration passes through this conversion inside the engine. Doing it in the open has practical value: canvas and WebGL code needs the channels, image libraries want integers, and seeing the sector logic demystifies why certain HSL edits behave as they do.
Worked example: hsl(348, 83.3%, 47.1%)
Crimson sits at hue 348° — sector five ends and sector six begins near magenta-to-red territory:
C = (1 − |2×0.47 − 1|) × 0.83 = 0.78 sector = H ÷ 60 = 5.8 → pattern (C, 0, X) m = 0.47 − C/2 rgb ≈ (220, 20, 60) = #dc143c
| Sector | 0–60° | 60–120° | 120–180° | 180–240° | 240–300° | 300–360° |
|---|---|---|---|---|---|---|
| Pattern (R,G,B) | (C,X,0) | (X,C,0) | (0,C,X) | (0,X,C) | (X,0,C) | (C,0,X) |
Why the sector table is worth memorizing
It explains HSL’s behavior at a glance: rotating hue within a sector only trades value between two channels; crossing a sector boundary hands the lead to a new channel — which is where naive HSL animations visibly “kink”. Interpolating in OKLCH avoids those kinks; knowing the table tells you when it matters.
Guarantees
The implementation is validated against the corner identities (every 60° boundary at full saturation yields a pure primary or secondary) and by round-tripping a full RGB grid — the conversion is exact, with rounding confined to the final 8-bit step.
Reference values, computed live
Sector arithmetic is easiest to trust after watching it succeed on known colors. Seven hsl() values and the exact channels they reconstruct:
| Color | HSL | RGB |
|---|---|---|
| indigo | hsl(274.6, 100%, 25.5%) | rgb(75, 0, 130) |
| gold | hsl(50.6, 100%, 50%) | rgb(255, 215, 0) |
| teal | hsl(180, 100%, 25.1%) | rgb(0, 128, 128) |
| slateblue | hsl(248.3, 53.5%, 57.8%) | rgb(106, 90, 205) |
| sienna | hsl(19.3, 56.1%, 40.2%) | rgb(160, 82, 45) |
| yellowgreen | hsl(79.7, 60.8%, 50%) | rgb(154, 205, 50) |
| dodgerblue | hsl(209.6, 100%, 55.9%) | rgb(30, 144, 255) |
Each row exercises a different hue sector, so together they cover the whole pattern table above: find each row’s hue in the sector ranges, note which channel got C, which got X and which stayed at the match term, and the reconstruction algorithm stops being abstract. This is also precisely the evidence that the round trip is lossless.
How to use the HSL to RGB Converter
- Type the hsl() color or its bare components.
- The result updates live as you type – no convert button needed.
- Read which hue sector your color fell into and how the channels were assembled.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
Frequently asked questions
How does the HSL to RGB algorithm work?
Three steps: chroma C = (1−|2L−1|)×S sets color intensity; the hue sector (each 60° slice) distributes C and its ramp value X across the three channels in a fixed pattern; the match term m = L−C/2 shifts everything to the right lightness. The tool shows your sector and numbers.
What are the six hue sectors?
0-60° red→yellow, 60-120° yellow→green, 120-180° green→cyan, 180-240° cyan→blue, 240-300° blue→magenta, 300-360° magenta→red. hsl(210°…) is in the cyan→blue sector, which is why its red channel is smallest.
Why does hsl(120, 100%, 50%) give exactly rgb(0, 255, 0)?
At 120° green is the sector peak: chroma is 1, the entire intensity lands on the green channel and the match term is 0 – the algebra collapses to pure green. Corner cases like this are how the algorithm is usually verified; this implementation round-trips a full RGB grid in its tests.
What RGB does 50% gray produce from HSL?
hsl(anything, 0%, 50%) → chroma 0, every channel equals the match term 0.5, so rgb(128, 128, 128) after scaling. Hue is irrelevant once saturation is zero.
Can lightness or saturation exceed 100%?
Not in valid HSL – the converter clamps to the defined 0-100% ranges and flags nonsense rather than extrapolating. If you are after more-vivid-than-sRGB colors, that is gamut territory: see the OKLCH tools.
Do I get the modern or legacy rgb() syntax?
Both at once: rgb(30 144 255) for modern stylesheets and rgb(30, 144, 255) for maximum compatibility, plus hex and every other notation in the all-formats output. Use whichever your codebase already standardizes on – the colors are identical.
Why do designers reach for HSL when picking programmatically?
Because varying one number does one understandable thing: rotating hue walks the rainbow, dropping lightness darkens. In RGB every such edit touches all three channels at once. Generate variants in HSL (or better, OKLCH), ship them as RGB/hex.
