About HSL to HEX
HSL to HEX converts a hue, saturation and lightness triple into a hexadecimal color. Give it hsl(243, 76%, 59%) and it returns #4F46E5 — the form required by a design token, a favicon background or anywhere that insists on a hex string.
Internally the tool maps the cylindrical HSL description onto the red, green and blue cube: saturation and lightness become the chroma and the minimum channel value, and the hue decides how that chroma is distributed across the three channels. The result is rounded to whole 8-bit values and printed in uppercase.
Because HSL is an easier space to reason about, a common workflow is to design a palette in HSL — nudging hue for related colors and lightness for shades — then convert each entry to hex for the final stylesheet. One caveat carries over from any conversion of this kind: the printed hex is rounded, so converting it straight back to HSL may not reproduce your exact input numbers.
How to use HSL to HEX
- 1 Enter the color as hsl() or hsla(), for example hsl(243, 76%, 59%).
- 2 The uppercase hex value appears immediately and is recalculated on each change.
- 3 Paste #RRGGBB into your stylesheet or design token file.
Frequently asked questions
What range does each part of the HSL value take?
Hue is 0 to 360 degrees, and saturation and lightness are percentages from 0 to 100. The parser divides the percentages by 100 before converting, matching the CSS convention.
What if I enter a hue above 360?
It wraps. The color wheel is a circle, so 380 degrees is treated the same as 20 degrees rather than being rejected.
Can I pass an rgba() or a named color instead?
Yes. Any notation the shared parser understands — hex, rgb(), hsl() or a standard color name — yields a hex result. The title reflects the most common input rather than a limitation.
Why does converting back give slightly different numbers?
Hex stores three 8-bit channels, so it cannot express every HSL triple exactly. Rounding to those 256 steps is what causes the small drift when you round-trip.
Free, online, and private
Free to use
HSL to HEX is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How HSL to HEX behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Output | uppercase 6-digit #RRGGBB |
| Accepted input | hsl() or hsla() with commas, spaces or slashes as separators and with or without the percent signs, plus anything else the shared parser understands |
| Hue wrapping | the hue is normalised and taken modulo 360, so a negative angle such as -90 behaves like 270 |
| Alpha | a fourth value is parsed as alpha, but the output is an opaque hex triple |
| Update mode | live |
Compiled from the implementation of this tool and checked against it by itoolnet.
What HSL to HEX does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- Saturation and lightness are divided by 100 and used as they come, with no clamping to a sensible span, so hsl(200, 180%, 50%) is accepted and quietly yields an out-of-gamut channel that is then clamped per channel during the hex conversion.
- The alpha slot is read and thrown away. An hsla() value at 40 percent opacity converts to exactly the same six-digit hex as the fully opaque version, with no 8-digit output and no warning that transparency was dropped.
- This is one direction at one precision: no decimal places, no shorthand output and no CSS variable form, and the reverse direction lives on a separate page.
Tested and documented by itoolnet, the team that builds and maintains this site.