Color & Design

HEX to HSL Converter

Convert a HEX color into hue, saturation and lightness — the easiest format for building lighter and darker variants.

Color & design

HEX to HSL

Local only

HEX colorOr pick

hsl(221, 83.2%, 53.3%)#2563EB

HSLhsl(221, 83.2%, 53.3%)

HSL values221, 83.2%, 53.3%

HSLA (80% opacity)hsla(221, 83.2%, 53.3%, 0.8)

RGBrgb(37, 99, 235)

Same hue, different lightness

Private by design

The maths happens in your browser; no color data is sent to a server.

Reading an HSL value

Hue is an angle from 0 to 360 on the color wheel — 0 is red, 120 green, 240 blue. Saturation runs from grey at 0% to fully vivid at 100%. Lightness goes from black at 0% through the pure hue at 50% to white at 100%.

Why designers like HSL

Keeping hue and saturation fixed while changing lightness gives you a consistent tonal scale — exactly what design systems need for hover, active and disabled states.

Good to know

Frequently asked questions

Why do saturation and lightness show one decimal?

Rounding to whole percentages can shift the color slightly. One decimal keeps the round trip back to HEX accurate.

Does grey have a hue?

Mathematically its saturation is 0%, so the hue value is arbitrary and is reported as 0.

Is HSL supported in CSS?

Yes, every modern browser supports hsl() and hsla(), and you can mix them freely with HEX and RGB.

How do I make a hover state?

Keep the hue and saturation and drop the lightness by roughly 8–10 percentage points.

HEX to HSL

Same hue, different lightness

Reading an HSL value

Why designers like HSL

Frequently asked questions

Related tools

Color Converter

Color Picker

HEX to RGB Converter