HSL to RGB converter
Paste a HSL value and read the RGB equivalent, with a swatch so you can see what you are converting and the remaining notation alongside it. Use the pickers to switch direction or target. Everything runs in your browser.
- RGB
- rgb(20, 169, 255)
Text is processed by your own browser and never leaves your device: this page has no server to send it to.
Same colour as: HEX RGB to HSL
How it works
The value is parsed into red, green, blue and alpha channels, then rewritten in RGB. The conversion is exact in both directions for opaque colours, and alpha is carried through when the input has it, so an eight-digit hex stays translucent as rgba() or hsla().
rgb() is the notation to reach for when a value comes from code, because the three channels map straight to the numbers most graphics APIs already hold.
Frequently asked questions
Is the HSL to RGB conversion lossless?
For any colour you can write in HSL, yes: both notations describe the same sRGB point, so converting there and back returns the value you started with. Rounding shows up only in the display, where hsl() percentages are rounded to whole numbers for readability.
What happens to transparency?
It survives. An eight-digit hex like #ff000080 comes out as rgba() or hsla() with the alpha as a decimal, and an alpha of exactly 1 is dropped so you get the shorter opaque form rather than a pointless trailing 1.
Why does my colour look different in the browser than in my design tool?
Almost always a colour profile, not a conversion error. Design tools may work in Display P3 or a document profile, while plain CSS values are interpreted as sRGB. The numbers here are exact within sRGB; if a wide-gamut export looks duller on the page, the profile is what moved, not the maths.