Colors

There are about six ways to write the same colour in CSS. Here’s what each is good for.

Named colours

red, hotpink, rebeccapurple ~ 148 of them. Great for quick tests, too limited for real design work.

(rebeccapurple was added to the spec in memory of a web developer’s daughter. It’s the only colour in CSS with a story.)

Hex

#663399 ~ red, green and blue, two hex digits each. If each pair is a doubled character you can shorten it: #663399 becomes #639. Add a fourth pair for transparency: #66339980 is 50% transparent.

This is what design tools give you, so it’s what most CSS is written in.

rgb

rgb(102 51 153) ~ the same three channels, in plain numbers. Add / 50% for transparency.

hsl ~ my favourite

hsl(270 50% 40%) is hue (a position on the colour wheel, 0–360), saturation and lightness.

The reason I like it: you can adjust a colour by hand and predict what’ll happen. Want it lighter? Raise the third number. Want a matching accent? Change only the hue. Doing either of those to a hex code means opening a colour picker.

Custom properties

:root {
	--brand: hsl(270 50% 40%);
}

Then color: var(--brand) anywhere. Define your palette once at the top of your stylesheet and the whole site can be re-themed in one edit. Every serious stylesheet I write starts this way.