What hex format is used?

Uppercase #RRGGBB without alpha unless you include alpha in HSL.

Yes. Negative hue normalizes by wrapping modulo 360°.

No. Pure TypeScript math in the browser.

Why does my hex not match a design token file?

Design tokens may store OKLCH, LAB, or rounded HSL intermediates. This tool converts your pasted hsl() directly — small differences can appear at extreme saturation.

Can I paste hsl without the hsl() wrapper?

Comma-separated hue, saturation, and lightness values work when entered in the tool's input fields. Full hsl(210, 50%, 40%) syntax is also accepted.

HSL to HEX Converter

Translate CSS hsl() into a hex color code for design tools and stylesheets that prefer #RRGGBB.

HSL color

Result

Hex output

Enter HSL values to get a hex code.

How to convert HSL to HEX

Paste hsl() or comma-separated H, S%, L%.
Hex output updates live.
Copy #RRGGBB.
Negative hue wraps modulo 360°.

FAQ

: Uppercase #RRGGBB without alpha unless you include alpha in HSL.
: Yes. Negative hue normalizes by wrapping modulo 360°.
: No. Pure TypeScript math in the browser.
: Design tokens may store OKLCH, LAB, or rounded HSL intermediates. This tool converts your pasted hsl() directly — small differences can appear at extreme saturation.
: Comma-separated hue, saturation, and lightness values work when entered in the tool's input fields. Full hsl(210, 50%, 40%) syntax is also accepted.

Related tools

HEX to HSLGo from hex to hsl() in one step.
HSL to RGBTurn HSL into RGB for tools that expect channel integers.
Color PickerPick a color visually or type any format.