HSL to HEX converter
Paste a HSL value and read the HEX 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.
- Hex
- #14a9ff
Text is processed by your own browser and never leaves your device: this page has no server to send it to.
Same colour as: RGB HEX to HSL
How it works
The value is parsed into red, green, blue and alpha channels, then rewritten in HEX. 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().
Hex is what design tools export and what CSS files are full of: six digits for the channels, eight when the last pair carries alpha.
Frequently asked questions
Is the HSL to HEX 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.