HSL to Hex Converter

What is an HSL to hex conversion?

HSL describes a color as hue (a position on the color wheel, 0 to 360 degrees), saturation (how far it sits from grey), and lightness (how far it sits from black or white) — the way most people naturally think and talk about color. Hex describes the same color as three bytes, one each for red, green, and blue, written in base 16. An HSL to hex conversion takes a value like hsl(212, 76%, 58%) and produces the six-digit code that means exactly that color.

The reason you need this direction specifically is that plenty of tools and specs speak HSL, but plenty of others only accept hex. A design brief might specify a color by hue and feel; a CSS custom property, an old codebase, or an image editor's color field might only take a hex string. This conversion bridges the two without you doing the trigonometry yourself.

Enter an hsl() value, or set the hue, saturation, and lightness directly, and this page returns the matching hex code along with a swatch to confirm it visually.

How to convert HSL to hex

1. Enter the HSL value. Type it into the text field as hsl(212, 76%, 58%) or as bare numbers like 212, 76%, 58% — or set the Hue, Saturation, and Lightness number fields underneath directly. Both drive the same result live, with nothing to submit.
2. Read the hex code. The swatch and the hex value update instantly. Click the hex value to copy it to your clipboard.
3. Check the other formats. The Other formats row shows the same color as rgb() and as hsl(), also click-to-copy, and there is a nearest-named-color link plus a link to the full color picker.

Turning a chosen hue into a usable code

This direction is for when the color starts as an idea about hue and feel rather than as a code. You might be picking a color by describing it — a soft blue around hue 210, medium saturation, on the light side — or working from a design spec, a palette generator, or a color-theory tool that outputs HSL because that is the format worth adjusting in. Once the hue, saturation, and lightness are right, you need the hex string to actually put it to work.

It also comes up when building a palette programmatically: spacing hues evenly around the wheel, say every 30 or 60 degrees, at a fixed saturation and lightness is a clean way to generate a set of colors that relate to each other, and HSL is the natural format for that math. The output still needs to land in a stylesheet, a design tool's swatch library, or a codebase as hex, which is what this page hands you.

It is also the quicker path any time you already have an HSL string — copied from a CSS file, a browser's dev tools color picker, or another tool's output — and just need the hex equivalent without recalculating it by hand.

How accurate is an HSL to hex conversion?

For the HSL value you actually enter, this conversion is exact: whatever hue, saturation, and lightness you type or dial in, the hex code returned is the correct one for those exact numbers, not an approximation. That math was checked against Python's colorsys module across more than 60,000 colors, including every grey and a sweep of pure hues, with no disagreement at all.

The thing worth knowing is where the HSL value came from. If it was typed by hand or read off a spec, there is nothing to worry about. But if it was itself read off a rounded HSL display — a hex color that some tool converted to hsl(212, 76%, 58%) and rounded to whole degrees and percents in the process — then converting that rounded value back to hex is not guaranteed to return the original color. Measured across all 16,777,216 sRGB colors, going hex to rounded HSL and back returns the exact original hex only 10.58% of the time; the other 89.42% land on a different, nearby hex — off by 1 in the largest channel for 54.38% of colors, by 2 for 32.06%, and rarely more. The worst measured case, #02E4E6, comes back as #02DFE3 after passing through hsl(181, 98%, 45%).

That is not a flaw in the conversion; it falls out of counting. Rounded HSL has only 3,672,360 distinct combinations — 360 whole hues × 101 whole saturations × 101 whole lightnesses — against 16,777,216 possible sRGB colors, so at least 78.11% of colors are mathematically guaranteed to share a rounded label with another color.

One related edge case: if saturation is 0 the color is a grey, and hue has no effect on the result. Any hue value produces the identical hex once saturation reaches zero, because hue only means something when there is some color for it to point at. Practically: treat this page as the authority for what hex a given HSL value means — that answer is exact. If instead your goal is recovering a hex code you had before it got rounded to HSL, keep the original hex rather than relying on the round trip.

Why is this free?

The conversion happens entirely in your browser — the HSL value you enter never reaches a server, there is nothing to upload, and there is no backend call to fund. That means no account, no watermark, and no usage cap on how many colors you convert.