HSL to HEX Converter

Convert hue, saturation and lightness into the six-digit hex code that HTML, design tools and brand guides ask for.

Example conversion

hsl(348, 83%, 47%) converts to #dc143c

About HSL to HEX conversion

HSL is a great place to decide on a color and a poor place to store one. Once you have dialled in the hue, saturation and lightness, most of the world wants the six-digit code: brand guides, design tools, HTML email, theme configuration files, icon libraries and any colleague who asks "what is the hex?". This conversion turns hsl(216, 98%, 52%) into #0d6efd.

Under the hood it is two steps - HSL becomes red, green and blue channels, and those channels are written in base 16 - but the result is a single portable string. Hex travels well: no separators to mangle, no percent signs to lose, and it is understood by essentially every tool that handles color.

When should you use HSL to HEX?

Documenting a finished palette - brand guides and design specs are written in hex.
Handing colors to a design tool - Figma, Canva and Illustrator all take hex without complaint.
Writing HTML email - older email clients are far happier with hex than with hsl().
Filling in configuration files - theme files, manifests and CI badges usually expect a hex string.
Sharing a color quickly - one token to paste into a chat message beats three numbers and two percent signs.

How the conversion works

First HSL becomes RGB. Chroma is C = (1 - |2L - 1|) x S, the hue angle selects one of six 60-degree sectors that decides the channel order, and a match value m = L - C / 2 lifts all three channels to the correct lightness. Each result is scaled to 0-255.

Then each channel is written as two hexadecimal digits, padded with a leading zero when needed, and joined behind a hash. From hsl(216, 98%, 52%) the channels come out as 13, 110 and 253, which encode as 0d, 6e and fd - giving #0d6efd. Saturation 0 always produces a grey where all three pairs are identical, and lightness 0% and 100% give #000000 and #ffffff whatever the hue.

HSL vs HEX

Role - HSL is a working format for designing and adjusting; hex is a storage and interchange format.
Self-describing - HSL numbers explain the color; a hex code has to be converted before it means anything.
Portability - hex is accepted virtually everywhere, including places that have never heard of HSL.
Compactness - seven characters against a function call with three arguments.
Rounding - going HSL to hex is exact; coming back the other way rounds to whole degrees and percents.

Named CSS colors in HSL and HEX

The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.

Frequently asked questions

Do I lose anything converting HSL to hex?

No. Both describe colors in the same sRGB space, and the hex result is the exact color your HSL values specify. Converting back can round a number by one, because HSL is reported in whole degrees and percents for readability.

Why do two different HSL values give the same hex code?

Rounding. HSL has more addressable combinations than there are 24-bit colors, so several nearby HSL triples land on the same channel values. It also happens by definition at the extremes: any hue at 0% lightness is #000000.

Can I keep using hsl() in CSS instead?

Absolutely - hsl() has universal browser support and is often the better choice inside a stylesheet. Convert to hex when something outside CSS needs the value, such as a design tool, an email template or a config file.

How do I get a shorthand three-digit hex code?

Only colors where both digits of every pair match can be shortened, like #ffcc00 to #fc0. Most HSL values will not land on one of those 4,096 colors, so you usually get the full six digits.

What if my hue is above 360 or my percentages exceed 100?

Hue wraps around the wheel, so 380 is treated as 20. Saturation and lightness are clamped to the 0-100% range, since there is nothing beyond fully saturated or fully white.

Menu