Theme Colors

Description

By default the theme uses the triadic color scheme (secondary colors angle set to 120deg) with the primary color hue angle set to 240deg.

:root {
  /* Using default values */
  --color-primary-hue: 240deg;
  --colors-secondary-hue-angle: 120deg;
}

Baseline color scheme

RoleSystem tokenLight scheme colored cellDark scheme colored cell
Primary
Primary--color-primary
On primary--color-on-primary
Primary container--color-primary-container
On primary container--color-on-primary-container
Inverse primary--color-inverse-primary
On inverse primary--color-on-inverse-primary
Secondary
Secondary--color-secondary
On secondary--color-on-secondary
Secondary container--color-secondary-container
On secondary container--color-on-secondary-container
Inverse secondary--color-inverse-secondary
On inverse secondary--color-on-inverse-secondary
Tertiary
Tertiary--color-tertiary
On tertiary--color-on-tertiary
Tertiary container--color-tertiary-container
On tertiary container--color-on-tertiary-container
Inverse tertiary--color-inverse-tertiary
On inverse tertiary--color-on-inverse-tertiary
Surface
Surface--color-surface
On surface--color-on-surface
Surface dim--color-surface-dim
Surface bright--color-surface-bright
Surface container lowest--color-surface-container-lowest
Surface container low--color-surface-container-low
Surface container--color-surface-container
Surface container high--color-surface-container-high
Surface container highest--color-surface-container-highest
Surface variant--color-surface-variant
On surface variant--color-on-surface-variant
Inverse surface--color-inverse-surface
Inverse on surface--color-inverse-on-surface
Success
Success--color-success
On success--color-on-success
Success container--color-success-container
On success container--color-on-success-container
Inverse success--color-inverse-success
On inverse success--color-on-inverse-success
Warning
Warning--color-warning
On warning--color-on-warning
Warning container--color-warning-container
On warning container--color-on-warning-container
Inverse warning--color-inverse-warning
On inverse warning--color-on-inverse-warning
Error
Error--color-error
On error--color-on-error
Error container--color-error-container
On error container--color-on-error-container
Inverse error--color-inverse-error
On inverse error--color-on-inverse-error
Extra
Background--color-background
On background--color-on-background
Outline--color-outline
Outline variant--color-outline-variant
Light--color-light
Shadow--color-shadow
Surface tint--color-surface-tint-color
Scrim--color-scrim