CSS & Design Calculators

HEX to HSL Converter

Convert a hex colour to HSL, with a ready-made tint and shade scale.

Enter values

Result

HSL

hsl(221.2 83.2% 53.3%)

Hue: 221.2 °
Saturation: 83.2 %
Lightness: 53.3 %
Colour family: Blue

Tint and shade scale at this hue

Lightness	HSL
95%	hsl(221 83% 95%)
85%	hsl(221 83% 85%)
75%	hsl(221 83% 75%)
65%	hsl(221 83% 65%)
55%	hsl(221 83% 55%)
45%	hsl(221 83% 45%)
35%	hsl(221 83% 35%)
25%	hsl(221 83% 25%)
15%	hsl(221 83% 15%)

About the HEX to HSL Converter

Convert a hex colour to HSL, with a ready-made tint and shade scale.

Also known as: hex hsl converter, hex to hue saturation, color to hsl.

How to use this calculator

Enter hex colour.
The result updates instantly as you type — press Calculate (or Enter) at any time.
Review the breakdown shown under the main result.
Use Copy result or Share to save the answer or send a link with your inputs.

Formula

RGB is normalised, then hue, saturation and lightness are derived from the channel extremes

Worked example

Using the values pre-filled in the calculator above:

Hex colour: #2563EB

the calculator returns:

HSL: hsl(221.2 83.2% 53.3%)
Hue: 221.2 °
Saturation: 83.2 %
Lightness: 53.3 %