Color ​

tag: 'docType:howTo'

Color creates meaning and communicates hierarchy, state, and brand.

Color scheme ​

A color scheme is the group of key color tones assigned to specific roles that get mapped to components.

Tip: use the Material theme builder Figma plugin to generate a color scheme.

Alternatively, use the material-color-utilities library to generate color schemes at runtime.

Tokens ​

A color scheme can be set using CSS custom properties. Tokens follow the naming convention --md-sys-color-<token>.

All tokens have a corresponding --md-sys-color-on-<token> for content color with accessible contrast.

* all surface tokens use --md-sys-on-surface or --md-sys-color-on-surface-variant for their content.

• All tokens

:root {
  /* Generated from Material Theme Builder Figma plugin
     or `material-color-utilities`. */
  --md-sys-color-primary: #006A6A;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #6FF7F6;
  --md-sys-color-on-primary-container: #002020;
  /* ... */
}

/* Usage in custom components */
.primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}