Design systems generate colors; production code consumes them. In between sits a conversion that runs thousands of times a day. HSL is the friendly, human way to describe color, but tokens files, email templates, native apps, and older tooling still demand six hex characters. This piece covers turning values like hsl(152, 60%, 40%) into codes you can ship, and the rounding behavior that surprises people the first time.
The workflow this conversion lives in.
Picture a design system where the green scale is defined by rule: hue 152, saturation 60 percent, lightness stepping from 90 down to 20. That's elegant right up until the deliverable is a tokens JSON consumed by an iOS app and a transactional email system, neither of which speaks hsl(). Every step in the scale has to be frozen into a hex code.
The same handoff happens in reverse of the usual designer-developer flow, too: a developer who did theme math in HSL hands hex values back to a designer's Figma library, because that's the format the library imports cleanly.
Email is the strictest consumer of all. Rendering engines in older mail clients ignore hsl() outright, and a button color they can't parse degrades to default blue links or invisible text. Teams that send transactional email freeze their palette to hex for templates, whatever format the design system uses internally.
Real numbers, verifiable in the tool.
The algorithm resolves hue and saturation into RGB channels scaled by lightness. For hsl(152, 60%, 40%), the machinery lands on red 41, green 163, blue 106. Writing each channel as a hex pair, 41 is 29, 163 is A3, and 106 is 6A, so the token becomes #29A36A, a medium sea-toned green.
Need the pressed-state variant? Drop lightness to 32 percent and convert again: hsl(152, 60%, 32%) gives #218355. Both codes came from the same two rule numbers, hue 152 and saturation 60, which is exactly the property that makes HSL-defined scales worth the conversion step.
In the HSL to HEX Converter you can type the value in whatever form you have: classic hsl(152, 60%, 40%), modern hsl(152 60% 40%), a hue with deg units, or just 152, 60, 40. The H, S and L sliders and number fields let you step lightness and watch the hex change. An hsla() value with alpha returns an 8-digit hex so the transparency isn't lost.
The reasoning behind the workflow.
Tweaking lightness programmatically is the core trick of modern palette generation. A build script can emit fifty tokens from a handful of hue and saturation constants, and changing the brand hue regenerates every shade consistently. Many popular palettes are built on this idea, even when their internals use fancier color spaces.
In a design system, HSL is generative, not final. HSL is where colors are decided; hex is where they're delivered. Teams that blur that line end up hand-editing generated hex files, which defeats the system.
Know these before you file a bug.
A few behaviors catch nearly everyone once.
Two habits from teams that do this at scale.
Snapshot your generated hex values in version control and diff them whenever the palette rules change. Because rounding happens at the hex boundary, an innocent-looking half-percent saturation tweak can flip dozens of tokens by one digit, and the diff tells you exactly which downstream themes need visual review.
Keep lightness steps at least 6 to 8 points apart in the middle of the range. Steps closer than that can collapse into identical or near-identical hex codes after rounding, and you'll ship two tokens that look the same while claiming to be different.
It also helps to name tokens after their rule inputs rather than their outputs, so green-152-40 instead of jade-mid. When a bug report cites a hex code, you can trace it straight back to the hue and lightness that produced it without maintaining a separate lookup table.
Neighbors worth knowing.
This converter assumes you already have final HSL values. If you're still deciding the values, the HEX to HSL Converter gets existing brand colors into editable form first. Once tokens are frozen, run foreground and background pairs through the Color Contrast Checker, since programmatic lightness steps make no accessibility promises on their own. And for a quick visual read on any single value, the Color Picker renders it with every notation in one panel.
Try it now
The tool is one click away. No sign up, no upload, no payment.
Open HSL to HEX Converter