HSL to HEX Converter

How to use the hsl to hex converter

1. Enter the hue as a degree from 0 to 360 (red is 0, green is 120, blue is 240).
2. Set the saturation percentage from 0 (gray) to 100 (full color).
3. Set the lightness percentage from 0 (black) to 100 (white).
4. Read the resulting hex code, RGB integers and CSS rgb() string below.

How HSL maps to hex mathematically

The HSL model describes color using three axes: hue (an angle on the color wheel), saturation (intensity of the color) and lightness (how dark or bright it is). To convert HSL to hex, the browser first computes the RGB channels.

Given H in degrees, S and L as fractions between 0 and 1, calculate chroma C = (1 - |2L - 1|) * S. Then find an intermediate value X = C * (1 - |(H / 60) mod 2 - 1|) and a lightness offset m = L - C / 2. Depending on which 60-degree sector H falls into, assign C, X and 0 to the R, G and B channels, add m to each, multiply by 255 and round to the nearest integer. Finally, format each integer as a two-digit uppercase hexadecimal string and prepend a hash sign.

Worked example: converting HSL(210, 50%, 50%)

Take a steel-blue tone defined as hsl(210, 50%, 50%). First, normalize saturation and lightness: S = 0.5, L = 0.5. Chroma is C = (1 - |2(0.5) - 1|) * 0.5 = 0.5. The hue 210 falls in the fourth sector (180 to 240), so H' = 210 / 60 = 3.5. Compute X = 0.5 * (1 - |3.5 mod 2 - 1|) = 0.5 * (1 - |1.5 - 1|) = 0.5 * 0.5 = 0.25. The offset is m = 0.5 - 0.25 = 0.25.

In the fourth sector, the unmapped channels are (R, G, B) = (0, X, C) = (0, 0.25, 0.5). Adding m gives (0.25, 0.5, 0.75). Multiply by 255 and round: R = 64, G = 128, B = 191. In hex that is 40, 80 and BF, producing #4080BF.

Common HSL colors and their hex equivalents

This table lists frequently used colors expressed in both models. Use it as a quick reference when you need to convert HSL to hex without opening the calculator.

When to use HSL versus hex in CSS

Hex codes like #4080BF are compact and widely supported, making them ideal for design tokens, configuration files and situations where a static color is needed. However, they are not intuitive to adjust by eye. Changing brightness or shifting a palette requires converting back to another model first.

HSL is often preferred directly in stylesheets because its components map to how humans think about color. To create a hover state, you can simply lower the lightness value while keeping hue and saturation fixed. If you need to hand off a final value to a system that only accepts hex, this HSL to hex converter bridges the gap. For print workflows, you might also need to go further and use tools like hex to CMYK or CMYK to hex to match ink profiles.

Edge cases and rounding behavior

A hue of exactly 360 degrees wraps around to 0, representing the same red point on the color wheel. Saturation at 0% always produces a shade of gray regardless of the hue value, because chroma becomes zero. Lightness at 0% is always black and 100% is always white, again overriding hue and saturation.

Because the conversion involves multiplying by 255 and rounding, some HSL values do not have a perfectly reversible hex equivalent. A color converted from HSL to hex and then back via a reverse lookup may differ by one degree of hue or one percent of saturation due to the limited precision of eight bits per channel. This is normal and expected in all 24-bit sRGB color spaces.

Worked examples