How HSL describes a colour
HSL takes the three machine-friendly RGB channels and rearranges them into three human-friendly dials. Hue is where the colour sits on a wheel, measured in degrees: 0 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue and 300 is magenta, wrapping back to red at 360. Saturation is how vivid it is, from 0% (pure grey) to 100% (as intense as the screen can show). Lightness is how close it sits to black or white: 0% is always black, 100% is always white, and 50% is the colour at full strength.
The conversion itself starts from the largest and smallest RGB channels, scaled to the 0 to 1 range:
Saturation measures how far apart max and min are, relative to how much room they have, and hue comes from which channel is largest and by how much. The tool above handles every step in both directions, live.
Worked examples
Making colour changes the easy way
The whole point of HSL is that useful edits become one-number edits. Need a hover state for a button? Keep hue and saturation, drop lightness by about 10 points, and you get a convincingly darker version of the same colour rather than a muddy stranger. Want a pastel background from a bold brand colour? Raise lightness into the 90s and pull saturation down, and the family resemblance survives. Want the complementary colour for an accent? Add 180 to the hue and wrap past 360, so 352 becomes 172, a teal that sits directly opposite that red on the wheel.
This is why design systems increasingly define palettes in HSL terms even when the final tokens ship as hex. A set of greys with one shared hue and saturation but stepped lightness values looks deliberate and calm. The same greys picked by eye in hex almost always drift warm or cool as they get darker, and nobody can say why the interface feels slightly off.
Two practical notes. Whole-degree and whole-percent rounding means a round trip from hex to HSL and back can land a point or two away in RGB terms, invisible on screen but worth knowing when you diff style files, so treat the hex code as the master record for exact brand colours. And do not confuse HSL with HSV, which some tools call HSB: in HSV the top of the lightness-like scale is the vivid colour itself rather than white, so the same three numbers describe different colours in the two systems. If you have RGB values rather than a hex code, run them through the RGB to hex converter first, then paste the result here.
Frequently asked questions
What do the three HSL numbers mean?
Hue is a position on the colour wheel from 0 to 360 degrees, where 0 is red, 120 is green and 240 is blue. Saturation runs from 0% (grey) to 100% (fully vivid). Lightness runs from 0% (black) through 50% (the pure colour) to 100% (white).
Why use HSL instead of hex or RGB?
Because it matches how people think about colour. To darken a colour you lower lightness and leave the hue alone, and to soften it you lower saturation. Doing the same in hex or RGB means juggling three numbers at once and usually drifting off hue.
Is HSL the same as HSV or HSB?
No, although they are related. HSV (also called HSB) uses value instead of lightness, and the scales behave differently at the top. In HSL, 100% lightness is always white. In HSV, 100% value is the fully bright version of the colour, not white.
Why does a grey colour show a hue of 0?
Greys, including black and white, have no hue at all because their red, green and blue channels are equal. When saturation is 0% the hue number makes no difference to the colour, so converters report it as 0 by convention.
Does converting between hex and HSL lose accuracy?
Slightly, because HSL values are usually rounded to whole degrees and whole percentages. Converting back can land a point or two away in RGB terms, which is invisible in practice. For exact brand colours, record the hex code as the master value.