Color

Material Design 3 uses a dynamic color system. Colors are derived from a source color and organized into tonal palettes.

Color roles

M3 assigns colors to roles: primary, secondary, tertiary, error, surface, and their on-color counterparts. Each role has a semantic purpose.

Primary

On Primary

Primary Container

On Primary Container

Secondary

On Secondary

Secondary Container

On Secondary Container

Tertiary

On Tertiary

Tertiary Container

On Tertiary Container

Surface

Surface Container

Surface Container Highest

Surface Variant

100

100

100

100

These tokens map tonal palette values to semantic roles used by components.

Reference system color tokens through CSS custom properties:

.my-button {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-full);
}

Override the reference palette variables to create custom themes:

:root {
  --md-ref-palette-primary40: #6750a4;
  --md-ref-palette-primary80: #d0bcff;
  /* ... all other palette values */
}