HSL to HEX Converter
Paste any hsl() value, any hue unit, legacy or modern syntax, alpha or not, and get the hex code instantly, plus RGB, HWB and OKLCH. Local, strict parsing, one-click copy.
Advanced spaces & developer export
Contrast checker
WCAG contrast applies to the final rendered colors. Transparent foregrounds and backgrounds are composited over the backdrop below, exactly like a browser renders them, before the ratio is calculated.
AA needs 4.5:1 for normal text, 3:1 for large (24px, or 18.5px bold). AAA needs 7:1 and 4.5:1.
Tints, shades & harmonies
Generated in OKLCH (perceptually even lightness steps, constant hue) and gamut-mapped to sRGB. Click any swatch to copy its hex.
HSL for thinking, HEX for shipping, OKLCH for systems
A sensible modern division of labor: reason about color in HSL because hue, saturation and lightness match how people describe color; ship HEX because everything accepts it; and build design-system scales in OKLCH because it is the space where "20% lighter" actually looks 20% lighter for every hue. This page is built around that workflow: HSL sliders on the left of the picker, hex a click away in the formats, OKLCH in both the advanced formats and the palette generator underneath.
HSL to HEX FAQ
How does HSL to HEX conversion work?
HSL describes a color as a hue angle on the color wheel (0-360), saturation and lightness percentages. The conversion first computes the RGB channels from those three values, then encodes each channel as a hex pair. hsl(217, 91%, 60%) works out to #3B82F6. The tool above does it live and also shows the intermediate rgb() value.
Which HSL syntaxes are accepted?
All CSS Color 4 forms: legacy hsl(217, 91%, 60%) and hsla(217, 91%, 60%, 0.5), modern hsl(217 91% 60% / 50%), and hue in any CSS angle unit: degrees, radians, gradians or turns, so hsl(0.6turn 91% 60%) parses fine. Percentages are required where the grammar requires them; a bare hsl(217 91 60) errors with an explanation instead of guessing.
Why do designers like HSL, and where does it mislead?
HSL is wonderfully intuitive: lower lightness for shades, raise it for tints, rotate hue for harmonies. Its weakness is that it is not perceptually uniform: yellow at 50% lightness looks far brighter than blue at 50%, and rotating hue changes apparent brightness. That is why this tool computes its tints, shades and harmonies in OKLCH, the uniform space, while happily converting your HSL in and out.
Does HSL to HEX lose any color information?
Only rounding: both encode the same sRGB space, so any HSL color has an exact-to-8-bit hex twin. Alpha carries over into 8-digit hex. The one thing hex cannot hold is a wide-gamut color, which HSL cannot express either, so this pair converts losslessly for practical purposes.
More free tools: Color Converter · HEX to RGB · RGB to HEX · OKLCH Picker · Contrast Checker