HSL to HEX

Turn any HSL value into a clean HEX code instantly, no signup needed.

Step one — Paste your hsl() value

Also accepts bare numbers, like 243, 75, 59.

Step two — Your HEX color

Step three — The same color, every format

Converting HSL to HEX

You design in HSL because it is easy to adjust, then ship in HEX because that is what CSS and brand guides expect. This tool turns an hsl() value into a clean six-character hex code, ready to paste.

How to use it

Enter your HSL value, like hsl(210, 100%, 56%).
Read the hex result underneath and click to copy.
Need it back in HSL later? Use HEX to HSL.

Worked example: hsl(210, 100%, 56%) becomes #1E90FF.

When you need it

This is the final step after hand-tuning a color: lock the hue, saturation and lightness, then export hex for your stylesheet. To pick the color visually first, start at the HSL picker.

Is anything lost converting HSL to HEX?

Only rounding. Both describe the same sRGB colors, so the result matches the color you set.