HSL color: the friendliest way to write colours in CSS

An HSL color is written as three numbers: hue, saturation and lightness. In CSS, hsl(262 83% 58%) means a hue of 262 degrees (violet), 83% saturation (vivid) and 58% lightness (a little above the midpoint). It is the same violet as #7c3bed, but you can read it. Want it lighter? Raise the last number. Softer? Lower the middle one. That one property, one meaning per number, is why HSL is the friendliest way to write colours by hand.

What hue, saturation and lightness mean

Hue is a position on the colour wheel, given in degrees. Red sits at 0 and again at 360, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300. Moving the hue rotates the colour while keeping its strength.

Saturation is how much colour there is. At 0% every hue is the same grey; at 100% it is as vivid as the screen allows. Lightness runs from black at 0% to white at 100%, with the pure hue at 50%. The model is covered more broadly in hue, saturation and brightness, which also explains how HSB in design apps differs from HSL in CSS.

HSL syntax in CSS

There are two spellings. The modern one separates values with spaces and puts alpha after a slash. The older one uses commas and a separate hsla() function. Browsers accept both, and hsl() now takes alpha too, so hsla() is no longer needed. The MDN reference for hsl() lists every form.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Build a colour scale by changing lightness

This is where HSL earns its place. Keep hue and saturation fixed, step the lightness, and you have a family of tints and shades that obviously belong together. Here is one violet in seven steps, with the hex each one converts to.

Pair this with CSS custom properties and your whole theme hangs off two numbers. Store the hue and saturation once, then pick a lightness per role. Change the hue variable and the entire interface turns from violet to teal, which is the idea behind CSS variables for theming.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Relative colours

Newer browsers also support relative colour syntax, which reads the HSL parts of any colour and lets you adjust them. hsl(from var(--brand) h s calc(l + 15%)) gives a lighter version of whatever the brand colour is, even if it was defined in hex. Check current support on caniuse before relying on it, and keep a plain fallback. For mixing two colours rather than nudging one, color-mix() in CSS is the tool.

Where HSL lies to you

HSL is a rearrangement of RGB, not a model of human vision. Its lightness is a simple average of the brightest and dimmest channels, so it ignores the fact that our eyes see yellow and green as far brighter than blue. The result: two colours with identical HSL lightness can look nothing alike in brightness.

This matters in two places. First, a scale built by stepping HSL lightness will be uneven across hues: a yellow at 50% is far too light for text while a blue at 50% passes easily. Always test real pairs with a contrast checker. Second, gradients and generated palettes that rotate hue at fixed lightness will brighten and dim as they pass through yellow and blue.

OKLCH keeps the same friendly idea (lightness, colourfulness, hue) but measures lightness the way eyes do. If you are starting a new design system, it is the better default; if you are editing existing CSS or want a quick, readable tweak, HSL remains perfectly good.

Converting HSL to hex and back

You rarely need to do the maths, since every design tool and browser devtools panel converts for you: click a colour swatch in Chrome or Firefox devtools and shift through the formats. Under the hood, HSL converts to RGB first, and RGB to hex is simple pair arithmetic, explained in hex to RGB. Expect tiny rounding differences: hsl(262 83% 58%) lands on #7c3bed, one step away from the #7c3aed you may have started with, because whole percentages cannot hit every one of the 16.7 million hex values.

If you design in Gradiently, you seldom touch these numbers at all: a Mark carries its own palette, and on Pro the brand kit stores your colours so the Designer applies them for you.