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;
}Embed this tool
Copy and paste the code below into your website to embed this tool for free. An attribution link to The Util Box is required.
<iframe src="https://www.theutilbox.org/embed/material-color-generator" width="600" height="500" frameborder="0" style="border: none; max-width: 100%;" title="Free material color generator tool from The Util Box"></iframe>