Build a Root Colour Palette

Name repeated colours once, then use those names throughout the page.

Define and read custom properties

:root { --color-brand: #176b73; } .button { background: var(--color-brand); }

A custom property name begins with two hyphens.
:root makes the palette available throughout the document.
var(--color-brand) reads the stored value.
Role-based names remain useful when the exact colour changes.

One palette, several roles

Brand

Used for prominent surfaces and actions.

Surface

Used behind readable content.

Accent

Used sparingly to draw attention.

Read the CSS Variables gauge

Important CSS

Declare roles on :root, then read them with var().

:root {
  --color-brand: #176b73;
  --color-surface: #ffffff;
  --color-text: #1f2933;
}
.button {
  background: var(--color-brand);
}