Blog
Unit converters

HSL to HEX converter

Enter a hue (0–360°), saturation and lightness (0–100% each) and the converter assembles them into a HEX color code, showing a live swatch of the resulting color.

Your data never leaves this device

Result

HEX code

This page has no server side at all. The table you paste is parsed by JavaScript inside your own browser, the chart is drawn on a canvas element on your machine, and the export file is assembled locally. Nothing is uploaded, stored or written to any log. You can disconnect from the network after the page has loaded and everything will still work — which is the simplest way to verify the claim yourself.

Facts and limits of this method

Hue (H) Any number — wrapped modulo 360, negative values are handled cyclically
Saturation and lightness Clamped to the 0% to 100% range
Result format #RRGGBB — six hexadecimal digits, uppercase letters
Intermediate step HSL is first converted to RGB, then RGB to HEX

When it misleads you

How it is calculated

Hue is wrapped into the 0–360° range and converted to a fraction of 1 (divided by 360); saturation and lightness are converted from percentages to fractions from 0 to 1.

Using the standard HSL → RGB formula, two helper values are computed from lightness and saturation, then each of the three color channels (red, green, blue) samples a different point on the color wheel, offset by a third of a turn.

Each of the three resulting channels is converted from a fraction (0–1) back to the 0–255 range and rounded to a whole number.

The three channels are converted to hexadecimal the same way as in the RGB to HEX converter, and joined into the final code with a leading "#".

Questions and answers

What if I enter a hue above 360 or a negative one?

It's automatically wrapped modulo 360 — the color wheel is cyclical, so 400° and −320° give the same result as 40°.

Why is the result always gray at 0% saturation?

At zero saturation, hue has no mathematical effect on the color — you get a shade of gray determined only by lightness.

Will converting the result back from HEX to HSL match exactly?

Almost always, but rounding at the intermediate RGB step can cause a fraction-of-a-percent difference in saturation or lightness.

Is my data sent anywhere?

No, the whole calculation runs in your browser.

Related tools

All tools