Color conversion
HSL to HEX Converter – HSL & HSLA to Hex Code
Convert HSL and HSLA colors to HEX, RGB and OKLCH. Adjust hue, saturation and lightness with sliders and copy the hex code for your CSS instantly.
hsl(217 91% 60%)How to use this tool
HSL describes a color by hue (0–360°), saturation and lightness, which makes it easy to reason about. Move the sliders or type exact numbers and the converter updates the HEX code, eight-digit HEX with alpha, RGB and OKLCH immediately.
- 1 Set hue, saturation and lightness.
- 2 Optionally lower alpha for transparency.
- 3 Copy the HEX, HEX8, RGB or OKLCH result.
Frequently asked questions
What do the HSL values mean?
Hue is the position on the color wheel in degrees, saturation is the intensity from gray (0%) to full color (100%), and lightness runs from black (0%) through the pure color (50%) to white (100%).
How do I convert HSLA to HEX?
Set alpha below 1 and the tool outputs an eight-digit HEX such as #3B82F680, where the last two digits store the alpha channel.
Why does HSL to HEX sometimes round?
HEX stores whole RGB numbers from 0 to 255, so HSL values are rounded to the nearest RGB color.
Is HSL perceptually uniform?
No. Yellow at 50% lightness looks much brighter than blue at 50%. For even scales use OKLCH, which the converter also outputs.