Most people first meet color on the web as a HEX code — six characters like #3B82F6 that feel more like a serial number than a color. The trouble is that HEX tells you almost nothing useful when you want to adjust a color. To make a blue slightly lighter, which of those six characters do you change, and by how much? HSL answers that question directly.

The three properties

Every color can be described by three independent properties:

  • Hue — the position on the color wheel, from 0 to 360 degrees. Red sits near 0, green near 120, blue near 240.
  • Saturation — how vivid the color is, from a flat gray at 0% to fully intense at 100%.
  • Lightness — how close the color is to black (0%) or white (100%), with the pure hue at 50%.

Because these three move independently, editing becomes obvious. Want a darker shade? Lower the lightness. Want a calmer version? Lower the saturation. The hue stays put, so the color still reads as “the same blue,” just adjusted.

Compare that with doing the same job in HEX. To darken #3B82F6 you would have to reduce all three channel pairs by proportional amounts, and if the proportions are even slightly off the hue drifts — your blue quietly becomes a slightly purple blue, or a slightly green one. HSL removes the guesswork because the thing you want to change has its own number.

Where each property does its work

In practice the three properties have quite different jobs in an interface.

Hue is the identity of a color, and you change it least often. A product usually has one or two hues effectively fixed by the brand. Hue is what harmony schemes manipulate — complementary, analogous and triadic are all rules for picking additional hue angles, covered in our color harmony guide.

Lightness is what you adjust constantly, and it does most of the structural work. Hierarchy, depth, hover states, disabled states, borders, dark mode — nearly all of it is lightness. It is also what determines whether text is readable, because contrast is driven overwhelmingly by lightness rather than hue.

Saturation is the tone control, and the one people underuse. Dropping saturation makes a color usable across a large area without changing what color it is. It is also how you build neutrals that belong to your palette rather than looking like generic gray — a brand hue at 4% saturation gives a gray scale with a faint cast that quietly ties an interface together.

The one place HSL misleads you

There is an important catch worth learning early, because it causes real bugs.

HSL lightness is not perceived brightness. Consider hsl(60 100% 50%) and hsl(240 100% 50%). Both claim 50% lightness. The first is a searing yellow; the second a deep, dark blue. Your eye is not confused — they genuinely differ enormously in how bright they appear.

The reason is that human vision is far more sensitive to green and red wavelengths than to blue. The luminance formula used for contrast weights green at roughly 71%, red at 21% and blue at 7%. HSL weights nothing; it is a geometric transformation of RGB, not a perceptual model.

The practical consequence: never estimate whether text will be readable from an L value. Two colors with identical lightness can have wildly different contrast against the same background. Check the actual ratio in the contrast checker.

Tints, shades and tones

Three terms get used loosely and are worth pinning down, because each is a specific operation on one HSL property:

  • A tint mixes a color toward white — raise lightness. Tints become page backgrounds, hover fills, table stripes.
  • A shade mixes toward black — lower lightness. Shades become borders, pressed states, dark-mode surfaces.
  • A tone mixes toward gray — lower saturation. Tones calm a color that is too loud for a large area.

Each has a dedicated generator here — tint, shade and tone — and between them they turn a single brand color into the full set of variants a real interface needs. That is usually the first job after being handed one HEX code.

Why this matters for palettes

Harmonies are simply rotations of hue. A complementary color is 180 degrees away; a triad splits the wheel into three. Once you think in degrees, generating a balanced palette is arithmetic rather than guesswork — which is exactly what the palette generator does under the hood.

But hue arithmetic only picks candidates. It does not tell you how vivid or how light each color should be, and those decisions determine whether a palette looks considered or chaotic. A common failure is taking two harmonically-correct hues, leaving both at full saturation and placing them side by side — the edge shimmers and neither color feels dominant. The fix is hierarchy: one color leads at large scale and moderate saturation, one supports, one accents loudly but sparingly.

HSV, and why your color picker feels different

You will also meet HSV, which shares hue and saturation with HSL but replaces lightness with value, meaning brightness. The difference shows at the top of the scale: in HSL, lightness at 100% is always white; in HSV, value at 100% is the most vivid version of the hue, and you reach white only by also dropping saturation to zero.

That is why the square-and-slider picker in almost every design tool feels different from writing HSL by hand — the square is saturation against value. Our color wheel is HSV-based for the same reason. A reasonable habit is to pick in HSV, because it matches the tools, and to adjust systematically in HSL, because that is where the relationships are legible. Our color models guide covers the full set, including CMYK and LAB.

Try it

Open the color wheel, pick a hue, then nudge saturation and lightness. Watching the HEX value change as you move tells you far more about color than memorizing codes ever will.

Then take a color you actually have to work with — a brand HEX, or one lifted from an image with the color detector — and run it through the RGB to HSL converter. Seeing a familiar color expressed as three meaningful numbers is usually the moment it clicks.