HSL to HEX Converter
Convert hsl(217, 91%, 60%) back to a HEX code for design tools, brand documents and codebases that only accept HEX. Live swatch included.
Live Preview
rgb(37, 99, 235)
hsl(221, 83%, 53%)
Popular color conversions
About HSL to HEX Converter
HSL to HEX conversion turns human-friendly hue/saturation/lightness values into a compact hexadecimal color code for CSS variables, design tokens, and brand assets.
Set H (0–360), S%, and L%, or use the color picker. Copy the resulting HEX value for stylesheets and design tools.
hsl(217, 91%, 60%) → #2563EB
Keep saturation and lightness as integers for cleaner design tokens. Round-trips through RGB remain accurate for standard sRGB colors.
Need all formats at once? Open the full Color Converter, or read the HEX to RGB CSS guide.
Frequently Asked Questions
How do I get a darker/lighter shade of my brand color?
Convert your brand HEX to HSL once, then lower or raise the L (lightness) value by 10–15 points and convert that back to HEX — the hue and saturation stay identical, so the shade still reads as the same brand color.
Why use whole-number H, S, L instead of decimals?
Most CSS tooling and design systems round HSL to whole degrees and whole percents for readability. This tool accepts integers for that reason; decimal precision isn't needed for visually distinguishable colors.
Will HSL to HEX give me back the exact original HEX?
If the HSL values came from rounded display numbers rather than the original exact HEX, the result can differ by ±1 in a channel — for pixel-perfect round-trips, convert directly between HEX and RGB instead.
Are my values uploaded to a server?
No. Conversion happens locally in your browser only.