HSL to HEX Converter

The HSL to HEX converter turns HSL values like hsl(217, 91%, 60%) into hexadecimal codes like #3B82F6. HSL is the friendliest model for designing a color by hue, saturation, and lightness — but most stylesheets, design tokens, and HTML still expect a HEX code, so this conversion bridges the two.

Workflow tip: dial in the exact color in HSL — easy to reason about — then convert to HEX for the value you actually ship in code.

When You Need It

From Design to Code

You built a palette in HSL and now need HEX codes for a theme file or brand guide.

Compact Sharing

A single HEX string is easier to copy and paste than three HSL numbers with percent signs.

Legacy Support

Some tools and older code paths still expect HEX rather than the hsl() function.

How to Convert HSL to HEX

Enter the HSL Values

Type your values as 217, 91%, 60% or as hsl(217, 91%, 60%). The degree symbol on the hue is optional, and the % signs are accepted but not required.

Read the HEX Output

The HEX code is generated instantly, and the live swatch updates so you can confirm the color is what you intended.

Or Pick a Color

Click the preview swatch to open the native color picker and choose visually — the HSL and HEX fields fill in for you.

Copy & Reuse

Copy the HEX code for your stylesheet. The panel below also lists RGB, HSL, HSV, and CMYK for the same color.

Features

Instant Conversion

HEX appears the moment you type, fully client-side with nothing sent to a server.

Flexible Input

Works with or without the % symbols, the degree mark, and the hsl() wrapper.

Preview & Picker

A live swatch verifies the color, and the built-in picker lets you choose one visually.

All Formats at Once

Every result also shows HEX, RGB, HSL, HSV, and CMYK.

Stay in range: hue must be 0–360 and both saturation and lightness 0–100. Values outside these bounds are flagged, since they have no valid color.

Frequently Asked Questions

What HSL values are valid?

Hue ranges from 0 to 360 (degrees), while Saturation and Lightness range from 0 to 100 percent. Values outside these ranges are not valid colors.

Do I need to include the % symbol?

No. The converter accepts saturation and lightness with or without the % sign — 91% and 91 are treated the same.

What happens if values are out of range?

The converter flags an error if any value falls outside its valid range, so you can correct the input rather than get a misleading color.

Can I paste a full hsl() string?

Yes. Both hsl(217, 91%, 60%) and the bare 217, 91%, 60% work — the wrapper and degree symbol are parsed and ignored as needed.

Is the HEX output uppercase?

Yes, HEX is returned in uppercase (e.g. #3B82F6), the usual convention. CSS treats uppercase and lowercase HEX identically.