Color & Design·3 min read

The HSL Color Model Explained, Sliders to Hex

Design systems generate colors; production code consumes them. In between sits a conversion that runs thousands of times a day: you'll see the hsl color model explained in every CSS course as 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.

Open the tool All insights

From HSL palette math to a hex tokens file

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 at any volume freeze their entire palette to hex for templates, whatever format the design system uses internally.

Worked conversion: hsl(152, 60%, 40%) to #29A36A

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.

The HSL color model explained through design system scales

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. Tools from Tailwind's palette to Material's tonal system are built on this idea, even when their internals use fancier color spaces.

The role of hsl in design systems 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.

Rounding and other HSL to hex surprises

Know these before you file a bug.

A few behaviors catch nearly everyone once.

Round trips drift by a digit. hsl(239, 84%, 67%) converts to #6467F2, but that hex converts back to whole-number HSL that regenerates #6467F2, not necessarily your pre-rounding original. Pick one canonical format per token.
Extreme lightness erases hue. Anything at 0 percent lightness is #000000 and anything at 100 percent is #FFFFFF, no matter what hue and saturation say, so generated scales should stop short of the endpoints.
Percent signs aren't decoration. hsl(152, 60, 40) without them fails to parse in strict parsers and in this site's converter, a five-second fix that regularly eats fifteen minutes.
Hues past 360 wrap around silently. hsl(512, 60%, 40%) equals hsl(152, 60%, 40%), which can hide an arithmetic bug in a palette script since the output still looks plausible.

Practical guardrails for HSL-driven hex generation

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.

When HSL to HEX is the wrong tool for the moment

Neighbors worth knowing.

This converter assumes you already have final HSL values. If you're still deciding the values, HEX to HSL 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.