Material Design Color Palette

All 19 color families with HEX codes, CSS variables and contrast checking. Click any color to copy.

Download CSS

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
White text {{ whiteContrast.toFixed(1) }}:1
Black text {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

What Is the Material Design Color System?

Google's Material Design color system includes 19 color families, each with 10 primary shades (50, 100–900) and up to 4 accent shades (A100–A700). It provides a consistent color language for websites and apps. Each color is carefully tuned to work harmoniously in combination and provide sufficient contrast for accessibility.

How to Use Material Design Colors in CSS?

Download the CSS file with all variables and include it in your project. Then use the colors via CSS Custom Properties like var(--color-md-teal-500). You can also use the HEX codes directly, e.g. color: #009688;. CSS variables have the advantage that you can change colors centrally.

Color Selection Tips

  • Choose a primary color (e.g. Teal 500) and an accent color from a different family.
  • Use lighter shades (50–200) for backgrounds and darker ones (700–900) for text.
  • Ensure sufficient contrast (at least 4.5:1) between text and background for accessibility.
  • The 500 shade is the standard representation of each color family and ideal as a primary color.