HSL to RGB Converter
Convert HSL (Hue, Saturation, Lightness) color values to RGB instantly, with sliders and a live color preview.
Hue (H)
207°
Saturation (S)
90%
Lightness (L)
54%
RGB Result:
Red
32
Green
148
Blue
243
Hex: #2094F3
How to Use the HSL to RGB Converter
Adjust the Hue (0-360°), Saturation (%), and Lightness (%) sliders and the equivalent RGB values (0-255 each) appear instantly, along with a live color swatch and hex code. This is the reverse direction of converting RGB to HSL: instead of starting from red/green/blue channels, you start from HSL's more intuitive hue-angle-plus-intensity model and get back the raw RGB numbers CSS and most image formats ultimately store.
C = (1 − |2L−1|) × S | X = C × (1 − |(H/60 mod 2) − 1|) | m = L − C/2
Example
hsl(207, 90%, 54%) — a common material-design blue — converts to approximately rgb(32, 148, 243), the same color expressed in raw red, green, and blue channel values.
Common Use Cases
- Converting an HSL color from a design spec into RGB for tools or code that only accept RGB.
- Checking exactly what RGB values a hue/saturation/lightness adjustment actually produces.
- Building a color palette in HSL (for easy lightness/saturation tweaks) and exporting the final RGB values.
FAQs
- Why convert from HSL to RGB instead of just using HSL directly? Most image formats, canvas APIs, and many older tools store and expect colors as RGB channels rather than HSL, so once you've dialed in a color's hue, saturation, and lightness, you often need the equivalent RGB values to plug into that system.
- Is the conversion exact, or does it round? RGB channels are whole numbers from 0-255, while HSL is continuous, so converting HSL to RGB (and back) can introduce very small rounding differences. For typical design work these differences are imperceptible.
- Can I get the hex code too? Yes — the resulting RGB values are also shown as a hex color code alongside a live preview swatch, so you can copy whichever format you need.