HSL to Hex Converter
Convert HSL (hue, saturation, lightness) color values to a HEX code. Free, instant, and private.
Independently verified for accuracy
Calculator by Toolsloft ↗- Hex
- #3366cc
Convert an HSL color to a HEX code you can drop into CSS, design files, or markup. Enter hue in degrees and saturation and lightness in percent, then copy the hex value. It is the reverse of picking a color by hue and tuning its lightness.
How this is calculated
HSL is first converted to RGB with the standard CSS Color formula, then each channel is written as a two-digit hexadecimal byte to form the #rrggbb code.
How to use
- Enter hue (0 to 360), saturation (0 to 100), and lightness (0 to 100).
- The hex code appears below as you type.
- Copy the #rrggbb result into your stylesheet.
Examples
- 220, 60, 50:
#3366cc - 210, 100, 50:
#0080ff
FAQ
- Why convert HSL to hex?
- Many color pickers and design systems work in HSL, but stylesheets, brand guides, and image editors often want a hex code. This converter bridges the two.
- Is the output always six digits?
- Yes. Each channel is written as a two-digit byte, so the result is a standard six-digit hex code with a leading hash.
- Can a round trip change the value?
- Slightly. Converting HSL to hex and back can shift a channel by one unit because both steps round to whole numbers. The color you see is unchanged.