CSS Colors

CSS lets you set colour on text, backgrounds, borders, and more. The two most common properties are color (text colour) and background-color.

h1 {
  color: white;
  background-color: #1a1a2e;
}

Named colours

There are 140 built-in colour names you can use directly. They are case-insensitive.

p {
  color: tomato;
  background-color: lightyellow;
  border-color: steelblue;
}

Named colours are convenient for quick prototypes but limited in range. For precise colours, use one of the formats below.

Hex colours

A hex colour starts with # followed by six characters (digits 0-9 or letters a-f), representing red, green, and blue channels.

h2 {
  color: #ff0000;        /* red */
  background-color: #ffffff; /* white */
  border-color: #1a1a2e; /* dark navy */
}

You can also use the three-character shorthand when each channel has repeated digits:

p {
  color: #f00; /* same as #ff0000 */
  background-color: #fff; /* same as #ffffff */
}

rgb() and rgba()

rgb() sets red, green, and blue channels as numbers from 0 to 255.

p {
  color: rgb(255, 0, 0);    /* red */
  background-color: rgb(26, 26, 46); /* dark navy */
}

rgba() adds a fourth value for opacity, from 0 (fully transparent) to 1 (fully opaque).

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* black at 50% opacity */
}

hsl() and hsla()

hsl() describes a colour by hue, saturation, and lightness. Many designers prefer this format because adjusting lightness or saturation is intuitive.

Hue: a degree on the colour wheel from 0 to 360 (0 = red, 120 = green, 240 = blue)
Saturation: 0% is grey, 100% is fully vivid
Lightness: 0% is black, 100% is white, 50% is the pure colour

p {
  color: hsl(0, 100%, 50%);    /* red */
  background-color: hsl(240, 60%, 20%); /* dark blue */
}

hsla() adds the same opacity channel as rgba():

.highlight {
  background-color: hsla(60, 100%, 50%, 0.3); /* semi-transparent yellow */
}

oklch() (modern)

oklch() is the recommended modern colour format. It takes lightness (0 to 1), chroma (colour intensity), and hue (0 to 360).

p {
  color: oklch(0.7 0.15 250); /* a medium blue */
  background-color: oklch(0.97 0.01 250); /* very light blue-grey */
}

The advantage of oklch over hsl is perceptual uniformity: two colours with the same lightness value actually look equally bright to human eyes. This makes it much easier to build accessible, harmonious colour systems. All modern browsers support oklch.

CSS custom properties for colour

Rather than repeating colour values throughout your stylesheet, define them once as CSS custom properties (variables) on :root and reference them with var().

:root {
  --color-primary: #3b82f6;
  --color-text: #1f2937;
  --color-background: #ffffff;
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
}

button {
  background-color: var(--color-primary);
  color: white;
}

This makes it easy to change your entire colour scheme by updating a handful of variables. See the Custom Properties page for the full pattern.

Accessibility and contrast

Text must have enough contrast against its background to be readable. The WCAG AA standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Use the WebAIM Contrast Checker to verify your colour combinations before publishing.