Material Design Colors

Free online material design colors. Generate Material 3 color palettes. Perfect for designers and developers.

#6750a4
LightDark
Primary
#6750a4
--md-sys-color-primary
On Primary
#f0eef6
--md-sys-color-on-primary
Primary Container
#e1dced
--md-sys-color-primary-container
On Primary Container
#483873
--md-sys-color-on-primary-container
Secondary
#744edb
--md-sys-color-secondary
On Secondary
#f1edfb
--md-sys-color-on-secondary
Secondary Container
#e3dcf8
--md-sys-color-secondary-container
On Secondary Container
#513799
--md-sys-color-on-secondary-container
Tertiary
#3488a5
--md-sys-color-tertiary
On Tertiary
#ebf3f6
--md-sys-color-on-tertiary
Tertiary Container
#d6e7ed
--md-sys-color-tertiary-container
On Tertiary Container
#245f73
--md-sys-color-on-tertiary-container
Error
#b3261e
--md-sys-color-error
On Error
#ffffff
--md-sys-color-on-error
Error Container
#f9dedc
--md-sys-color-error-container
On Error Container
#410e0b
--md-sys-color-on-error-container
Background
#fffbfe
--md-sys-color-background
On Background
#1c1b1f
--md-sys-color-on-background
Surface
#fffbfe
--md-sys-color-surface
On Surface
#1c1b1f
--md-sys-color-on-surface
CSS Custom Properties (Light Theme)
:root {
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #f0eef6;
  --md-sys-color-primary-container: #e1dced;
  --md-sys-color-on-primary-container: #483873;
  --md-sys-color-secondary: #744edb;
  --md-sys-color-on-secondary: #f1edfb;
  --md-sys-color-secondary-container: #e3dcf8;
  --md-sys-color-on-secondary-container: #513799;
  --md-sys-color-tertiary: #3488a5;
  --md-sys-color-on-tertiary: #ebf3f6;
  --md-sys-color-tertiary-container: #d6e7ed;
  --md-sys-color-on-tertiary-container: #245f73;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;
  --md-sys-color-background: #fffbfe;
  --md-sys-color-on-background: #1c1b1f;
  --md-sys-color-surface: #fffbfe;
  --md-sys-color-on-surface: #1c1b1f;
}