HSL to Hex Converter
Convert HSL hue, saturation, and lightness values into a 6-digit hex color code, ready to paste into CSS, design tools, or a style guide.
How HSL to Hex Conversion Works
HSL (hue, saturation, lightness) first converts to RGB using a piecewise formula based on which 60° segment of the color wheel the hue falls into, adjusted by saturation and lightness. Once the red, green, and blue channels are known (0-255 each), each converts to a 2-digit hex pair and the three pairs concatenate into a standard 6-digit hex code.
HSL to Hex Example, Step by Step
hsl(0, 100%, 50%) = #FF0000
hsl(0, 100%, 50%) = #FF0000
Hue = 0 (falls in the 0-60 segment) Saturation = 100%, Lightness = 50% Chroma = (1 - |2(0.5) - 1|) x 1.0 = 1.0 X = 0 (since hue = 0) m = L - C/2 = 0 RGB (0-1) = (1.0, 0, 0) Scale to 0-255: R=255, G=0, B=0 255 (decimal) = FF (hex) -> Red 0 (decimal) = 00 (hex) -> Green/Blue
| Step | Description | Result |
|---|---|---|
| Find the hue segment | hue 0 falls in the 0-60° segment | red-dominant |
| Compute chroma | (1 - |2L - 1|) x S = 1.0 | C = 1.0 |
| Derive RGB (0-1 range) | based on chroma and hue position | R=1.0, G=0, B=0 |
| Scale to hex | 255 (decimal) = FF (hex) | #FF0000 |
This example round-trips exactly with no rounding drift. Some HSL values — like hsl(221, 83%, 53%) — can land 1 unit off from their original hex source because HSL is stored as rounded whole numbers.
Common Mistakes With HSL to Hex
- Entering saturation or lightness as a raw decimal (0.83) instead of a percentage (83).
- Expecting a byte-perfect round trip from hex to HSL and back — rounded HSL values can shift the hex result by 1 unit.
- Mixing up HSL's lightness with HSV/HSB's value (brightness), which use a different formula and produce different RGB results at the same numbers.
Frequently Asked Questions
How do you convert HSL to hex?
First convert hue, saturation, and lightness into RGB channels using the standard HSL-to-RGB formula, then convert each RGB channel (0-255) to a 2-digit hex pair, same as any RGB-to-hex conversion.
What format does this tool accept for HSL input?
Either plain comma-separated numbers (221, 83%, 53%) or a full hsl() function string (hsl(221, 83%, 53%)) — both work the same.
What's the hex value of hsl(0, 100%, 50%)?
#FF0000 (pure red) — 0° hue with full saturation and 50% lightness sits exactly at the reddest point on the color wheel.
Can converting HSL to hex and back give a different result?
Occasionally by 1 unit. HSL values from a hex-to-HSL conversion are already rounded to whole numbers, and re-converting rounded HSL back to RGB can land 1 value off due to floating-point rounding — for example, hsl(221, 83%, 53%) rounds to #2563EA instead of #2563EB.
What are valid ranges for hue, saturation, and lightness?
Hue is 0-360 (degrees), while saturation and lightness are both 0-100 (percent). Values outside these ranges will return an error.