Tool
What the HSL to HEX Converter does
HSL to HEX Converter: converts HEX from Hue, Saturation % and Lightness %. Example: hue 217, saturation % 83 and lightness % 53 gives HEX #2470eb.
The HSL to HEX Converter takes Hue, Saturation % and Lightness % and returns HEX. You can nudge a single number and watch the effect straight away.
Most people who open the HSL to HEX Converter are anyone checking a colour for legibility. Contrast failures are the most common accessibility problem on the web, and the easiest to fix.
There is no account, no upload and no server round trip, because the page does the work itself.
Further down the page: what each field expects, how the result is derived, and one example worked from the defaults.
What do the HSL to HEX Converter fields mean?
The HSL to HEX Converter uses 3 inputs. Pre-filled inputs double as documentation: each one shows what a reasonable value looks like.
| Field | What to enter | Default |
|---|---|---|
| Hue | accepts 0 to 360 | 217 |
| Saturation % | accepts 0 to 100 | 83 |
| Lightness % | accepts 0 to 100 | 53 |
How does the HSL to HEX Converter work?
Each output is derived from the inputs above in a single pass; there is no hidden state carried between runs, so the same inputs always give the same conversion.
Validation is deliberately strict: silently coercing a bad value is how wrong numbers get trusted.
Worked example
These are the values the HSL to HEX Converter loads by default, and the result it produces from them. This is the worked example the page starts from, reproduced here so you can check the arithmetic.
| Hue | 217 |
|---|---|
| Saturation % | 83 |
| Lightness % | 53 |
| HEX | #2470eb |
|---|
How to use it
- Put Hue (0 to 360).
- Key in Saturation % (0 to 100).
- Fill in Lightness % (0 to 100).
- The tool reacts immediately rather than waiting for you to finish the form.
- The results panel then shows HEX.
- Copy Link puts the current inputs in the URL, so bookmarking it brings the same numbers back.
What this tool does not do
- Conversions between colour spaces with different gamuts are approximate at the edges.
- Colours render differently across displays; the values are exact but the appearance is not guaranteed.
- Nothing is saved between visits, so keep your own record of anything you need again.
- Check that each figure is in the unit the label asks for; that is the most common source of a wrong result.
Frequently asked questions
Only Hue, Saturation % and Lightness %. Every box already holds a working value, which makes it easy to isolate the effect of a single variable.
Hue accepts 0 to 360. Values outside that range are rejected with a message naming the field, rather than producing something that looks valid but is not.
With the values loaded when the page opens, HEX comes out as #2470eb. The figure is derived from the inputs above, so it updates whenever they do.
No: there is no server involved. Close the tab and the values are gone.
No. There is no account, no usage cap and no trial period. The site is funded by advertising rather than by charging for the tools.
It matches what you would get working it out by hand, with fewer opportunities to slip.