RGB to HSL converter
Paste a RGB value and read the HSL 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.
- HSL
- hsl(201, 100%, 53%)
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 HSL to RGB
How it works
The value is parsed into red, green, blue and alpha channels, then rewritten in HSL. 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().
hsl() is the one to edit by hand: keep the hue, move the lightness, and you get a consistent tint or shade of the same colour instead of guessing new channel values.
Frequently asked questions
Is the RGB to HSL conversion lossless?
For any colour you can write in RGB, 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.