HSL to HEX

What is HSL?

HSL stands for Hue, Saturation, Lightness — a coordinate system that’s friendlier to humans than RGB or hex. Hue is an angle on the colour wheel from 0° to 360°: 0° is red, 120° is green, 240° is blue, and the wheel wraps back to red at 360°. Saturation is how colourful the result is, from 0% (a pure grey) to 100% (as vivid as the hue allows). Lightness runs from 0% (black) through 50% (the most saturated version of the hue) up to 100% (white). Once you know the wheel, hsl(210, 80%, 45%) reads as a punchy mid-blue at a glance — no decoder ring needed.

What is a HEX colour?

A hex colour is a six-digit base-16 number written with a leading # that packs three 8-bit sRGB channels into a compact string. The first pair of digits is red, the middle pair is green, the last pair is blue — each from 00 (none) to FF (255, full). So #FF0000 is pure red, #1AB0FF is the kind of vivid sky-blue you get from hsl(199, 100%, 55%). Hex is the dominant format in design files and CSS because it’s compact and unambiguous, and it’s what every design tool emits by default.

The conversion math

HSL converts to RGB first, then RGB packs into hex. Normalise saturation and lightness to the 0–1 range. Compute a chroma value C = (1 - |2L - 1|) × S. Compute X = C × (1 - |((H/60) mod 2) - 1|) and a match value m = L - C/2. Six cases based on which sextant of the colour wheel the hue lands in pick which of (C, X, 0) permutations becomes the (R, G, B) triplet, then add m to each. Multiply by 255, round to an integer, and pack each channel as two hex digits with zero-padding. The result is a #RRGGBB string ready to paste.

Use cases

Design systems. Many token pipelines store base colours in HSL because tints and shades can be derived by adjusting lightness alone. When the build step needs to emit the final stylesheet, the HSL values get converted to hex.

Figma and design-tool round-trips. Figma shows hex by default; if you’ve been working in HSL to build a colour scale, you need a hex value to paste into the file. This converter is the bridge.

Embedded systems. LEDs, e-ink and microcontroller displays typically take a packed integer like 0xRRGGBB. HSL is rare in firmware code, so the conversion happens upstream and the hex (or the integer) lands in the C file.

HTML email and CMS templates. Hex is universally accepted by email clients and content systems; HSL is not. If you’ve prototyped a colour scheme in HSL, you’ll need to ship it as hex.

Pitfalls

• % is required on saturation and lightness. hsl(210, 80, 45) is invalid CSS — every browser rejects it, and so does this converter, with a friendly inline note explaining what’s missing.
• HSL is not HSV. Photoshop and many design tools use HSV (the third channel is “value” / brightness, not “lightness”). The numbers look similar but mean different things. Don’t paste HSV values into this converter expecting the same colour.
• Quantisation drift. Round-tripping HSL → hex → HSL can shift values by a degree or a percent due to the 8-bit quantisation of hex. The colours are visually identical; the numbers aren’t.
• HSL lightness is not perceptual. A lightness: 50% red is perceptually brighter than a lightness: 50% blue. For perceptually-uniform scales use OKLCH or HSLuv, both outside the scope of this landing.

How to use this HSL to HEX converter

1. Paste your HSL value into the input. The parens, commas and deg unit are all optional; 210, 80%, 45% and hsl(210deg 80% 45%) both work.
2. The #RRGGBB output and the colour swatch update live — no Convert button.
3. If the % symbols are missing or a value is out of range, a friendly inline note explains what to fix.
4. Tap Copy to put the hex string on your clipboard.

Privacy

The conversion is a small JavaScript function running in your browser tab. No server call, no logging, no analytics on your colour values. The page caches its bundle on first load and works fully offline thereafter.

Compatibility notes

The output uses standard six-digit hex (#RRGGBB) supported by every browser since the format was added to HTML in the mid-90s. Uppercase is emitted by default because that’s the convention used by Figma, Sketch and Photoshop; CSS treats uppercase and lowercase hex identically. The three-digit shortcut form is available in the Color Converter for colours that fit it (#FF00AA → #F0A); this landing always emits the full six-digit form so round-tripping is unambiguous.