HSL Conversion Calculator

Work out hsl conversion instantly with clear inputs, formula shown and shareable results.

About HSL Conversion Calculator

Lightness is the midpoint of the largest and smallest channels, saturation is their spread divided by one minus the absolute value of twice lightness minus one, and hue comes from which channel is largest. HSL separates colour identity from brightness, which is why generating a tint or shade of a brand colour is a one-number change in HSL but a three-number puzzle in RGB.

Formulas

Lightness

L = (max channel + min channel) / 2

Saturation

S = (max - min) / (1 - |2L - 1|)

Worked example

With the default values below, HSL Conversion Calculator returns HSL value of hsl(217.2, 91.2%, 59.8%). Change any input above and every figure here is recalculated in your browser.

Inputs used

Redaccepts 0–255: 59
Greenaccepts 0–255: 130
Blueaccepts 0–255: 246

Results

HSL value: hsl(217.2, 91.2%, 59.8%)
Hue: 217.22 deg
Saturation: 91.22%
Lightness: 59.80%

Step by step

1Values used
2Lightness
3Saturation
4HSL value= hsl(217.2, 91.2%, 59.8%)
5Hue= 217.22 deg
6Saturation= 91.22
7Lightness= 59.80

Assumptions and limits

The result is derived only from the 3 inputs listed above. Anything not among them is not part of the calculation.
In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
Figures are rounded for display to 2 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is the HSL Conversion figure worked out?

L = (max channel + min channel) / 2. Lightness is the midpoint of the largest and smallest channels, saturation is their spread divided by one minus the absolute value of twice lightness minus one, and hue comes from which channel is largest.

Why does this matter?

HSL separates colour identity from brightness, which is why generating a tint or shade of a brand colour is a one-number change in HSL but a three-number puzzle in RGB.

What do I need to enter?

Enter red, green, blue. The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.