Convert HSL to RGB (and back) instantly with live sliders
Current colour
hsl(210, 80%, 55%)
rgb(48, 140, 232)
#308CE8
HSL Sliders
Type or paste a value
Results
Channel breakdown
H (hue)
210°
0 – 360
S (saturation)
80%
0 – 100%
L (lightness)
55%
0 – 100%
R (red)
48
0 – 255
G (green)
140
0 – 255
B (blue)
232
0 – 255
The HSL to RGB Converter instantly transforms HSL (Hue, Saturation, Lightness) color values into RGB and HEX formats — and vice versa. Use the interactive sliders to explore any color in real time, or paste a CSS hsl() or rgb() string directly. Results are ready to copy for use in CSS, design tools, or anywhere color codes are needed.
Given H (0–360), S and L (0–100), compute chroma C = (1 − |2L − 1|) × S, then derive intermediate values X and m to get R, G, B in [0,1] range, and multiply by 255. This tool does all the math for you instantly.
Yes — paste an rgb(R, G, B) string into the RGB input field and the tool will convert it to HSL automatically, updating the sliders and all output fields.
HSL maps more closely to how humans perceive color. You can tweak brightness or vividness without changing the hue, making it far easier to create color palettes and adjust shades in CSS.
Yes. Every conversion simultaneously shows the HEX equivalent alongside HSL and RGB, so you can copy whichever format your project needs.