Material Design Colors
19 color families, 254 shades. Click any color to copy.
Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
Brown
Grey
Blue Grey
About Material Design Colors
Material Design's color system was created by Google to help designers and developers build visually cohesive products. The palette spans 19 primary color families — from Red and Pink to Blue Grey — each with 10 numbered shades (50 through 900) plus accent variants, giving you 254 hand-tuned colors that work harmoniously together.
Every shade is engineered for accessible contrast on light and dark surfaces. The 500 shade typically serves as the primary brand color, while lighter shades (50–200) work well for backgrounds and darker shades (700–900) suit text and icon tints. Accent shades (A100–A700) provide high-saturation options for call-to-action elements.
Click any swatch above to copy its hex, RGB, or HSL value. Use the Export button to download the entire set — or a single family — as CSS custom properties, Tailwind config, SCSS variables, or raw JSON for direct integration into your design system.
Frequently Asked Questions
Wie viele Farben gibt es in Material Design?▾
Material Design umfasst 19 Farbfamilien mit insgesamt 254 Abstufungen, jeweils von 50 (hellste) bis 900 (dunkelste), plus Akzentvarianten für ausgewählte Familien.
Wie nutze ich Material-Design-Farben in meinem Projekt?▾
Klicke auf eine Farbfläche, um ihren Hex-, RGB- oder HSL-Wert zu kopieren. Über den Button „Exportieren“ kannst du die gesamte Palette als CSS Custom Properties, Tailwind-Config, SCSS-Variablen oder JSON herunterladen.
Was ist der Unterschied zwischen Primär- und Akzentfarben in Material Design?▾
Primärfarben (Abstufungen 50–900) werden für zentrale UI-Elemente wie App-Bars und Buttons verwendet. Akzentfarben (A100–A700) sind kräftige Alternativen für Floating Action Buttons, Schalter und Hervorhebungen.