Material Design Farbpalette

Alle 19 Farbfamilien mit HEX-Codes, CSS-Variablen und Kontrastprüfung. Klicke auf eine Farbe zum Kopieren.

CSS herunterladen

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
Weißer Text {{ whiteContrast.toFixed(1) }}:1
Schwarzer Text {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

Was ist das Material Design Farbsystem?

Das Material Design Farbsystem von Google umfasst 19 Farbfamilien mit jeweils 10 Hauptstufen (50, 100–900) und bis zu 4 Akzentstufen (A100–A700). Es bietet eine konsistente Farbsprache für Webseiten und Apps. Jede Farbe ist sorgfältig abgestimmt, um in Kombination harmonisch zu wirken und ausreichend Kontrast für Barrierefreiheit zu bieten.

Wie verwende ich Material Design Farben in CSS?

Lade die CSS-Datei mit allen Variablen herunter und binde sie in dein Projekt ein. Dann kannst du die Farben über CSS Custom Properties wie var(--color-md-teal-500) verwenden. Du kannst auch die HEX-Codes direkt nutzen, z.B. color: #009688;. CSS-Variablen haben den Vorteil, dass du Farben zentral ändern kannst.

Tipps zur Farbwahl

  • Wähle eine Primärfarbe (z.B. Teal 500) und eine Akzentfarbe aus einer anderen Familie.
  • Verwende hellere Stufen (50–200) für Hintergründe und dunklere (700–900) für Text.
  • Achte auf ausreichend Kontrast (mindestens 4.5:1) zwischen Text und Hintergrund für Barrierefreiheit.
  • Die 500er-Stufe ist die Standard-Repräsentation jeder Farbfamilie und ideal als Primärfarbe.