HSL to HEX Converter
Designers often choose colors in HSL because hue, saturation, and lightness are intuitive to tweak, but stylesheets and assets frequently expect a HEX code. This converter turns any HSL triple into the matching #rrggbb value.
Enter a hue in degrees plus saturation and lightness percentages below, and the HEX code updates live with a preview swatch. The conversion goes through RGB and rounds to the nearest byte, all locally in your browser.
#6b72ff| Hue | Saturation | Lightness | HEX |
|---|---|---|---|
0° | 100% | 50% | #ff0000 |
120° | 100% | 50% | #00ff00 |
240° | 100% | 50% | #0000ff |
237° | 100% | 71% | #6b72ff |
0° | 0% | 50% | #808080 |
hsl(237, 100%, 71%)→#6b72ffHSL is converted to RGB, then each channel is written as two hex digits.
Frequently asked questions
How is HSL converted to HEX?
The HSL value is first converted to RGB using the standard hue-to-RGB formula, then each red/green/blue channel is rounded and written as a two-digit hexadecimal number to form #RRGGBB.
Why does my HEX differ by one from another tool?
HSL maps to RGB through floating-point math, and different rounding choices can shift a channel by one step. The colors are visually identical; the off-by-one is just rounding.
What units does each HSL component use?
Hue is in degrees from 0 to 360, while saturation and lightness are percentages from 0 to 100. This tool clamps out-of-range values to keep the output valid.
Can I paste a full hsl() string?
Enter the hue, saturation, and lightness in the fields provided. For richer input parsing along with HSV and alpha, use the full Color Picker linked below.