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.

Material Design Farbsystem: Shades, Accents, Tonalität

Das Material Design Farbsystem von Google (eingeführt 2014, verfeinert in Material 2 und Material 3) ordnet jede Hue in eine 10-Stufen-Skala von 50 bis 900 plus optionalen Accent-Tönen A100, A200, A400, A700. Die Stufen sind perzeptuell abgestuft: 50 ist nahezu weiß, 500 die typische Marken-Sättigung, 900 fast schwarz. Diese Skala wurde so kalibriert, dass jede Stufe gegen die nächste lesbar ist und 500-er Töne Typische CTA-Buttons bilden. Im Vergleich zu Tailwind oder Bootstrap unterscheidet sich Material durch die hohe Sättigung im 500-Token — Tailwinds 500 ist häufig blasser.

Accent-Töne (A100–A700) sind stärker gesättigt und weniger perzeptuell uniform — sie wurden für Akzent-Elemente wie FABs (Floating Action Buttons), Selektionen und Markierungen entworfen. Wer eine Marke aufbaut, sollte 500 als Primary, 700 als Hover-State und 100 als helle Hintergrundvariante verwenden. Die Accents kommen zum Einsatz, wenn ein Element sich aktiv vom Layout abheben soll. Wichtig: Material 3 (eingeführt 2021) ersetzt das alte System schrittweise durch ein dynamisches Color-System mit Tonal Palettes (Primary, Secondary, Tertiary, Surface), das aus einer einzigen Seed-Farbe via HCT (Hue-Chroma-Tone) berechnet wird.

Die Material-Palette ist in sRGB definiert; alle hex-Werte sind exakt diejenigen, die Google in der Spec veröffentlicht. Beim CalcSI-Designsystem werden die Material-Farben als CSS-Variablen wie --color-md-teal-500 gespeichert und mit klassischen Variablen wie --color-primary verlinkt. So lässt sich die ganze Marke über eine Token-Änderung umfärben. WCAG-Konformität ist nicht automatisch garantiert: Mid-Range Shades (300, 400, 500) erreichen oft nur AA Large gegen Weiß. Für Body-Text auf Marken-Hintergrund 700 oder 800 nutzen, oder dunklen Text auf 50/100.

So nutzt du die Palette als Designsystem-Basis

Material-Farben sind kein fertiges Design, aber eine extrem solide Basis. Diese Schritte führen vom Lookup zur produktiven Token-Datei.

  1. Wähle eine Primary-Hue (z. B. Teal oder Blue) — das wird deine Marken-Identität. Klick auf das 500-Swatch, um Hex und CSS-Variable in die Zwischenablage zu kopieren.
  2. Wähle zusätzlich eine kontrastreiche Secondary für CTAs (z. B. Orange 700 oder Pink A400 zu einem teal Primary). Das Tool zeigt sofort den Kontrast gegen Weiß und Schwarz, sodass du die Lesbarkeit prüfen kannst.
  3. Definiere drei Surface-Tokens: Light --surface-base: #FAFAFA (Gray 50), Card --surface-card: #FFFFFF, Elevated --surface-elevated: #FFFFFF mit zusätzlichem Schatten. Im Dark Mode: Gray 900/800/700.
  4. Für States nimm dieselbe Hue in unterschiedlichen Shades: Primary 500 = Default, Primary 700 = Hover, Primary 800 = Active, Primary 100 = Disabled-Background. Konsistenz macht aus 500 Tokens eine fühlbare Marke.
  5. Lade das md-bs.css herunter, falls du das ganze System willst — alle Material-Variablen plus die CalcSI-Erweiterungen sind dort vorgesehen.

Konkrete Material-Token-Beispiele

So kombinierst du die Material-Skalen zu einem konsistenten Token-Set.

  • CalcSI-ähnliche Marke: --color-primary: var(--color-md-teal-500); --color-primary-hover: var(--color-md-teal-700); — sauberer Dunkler-Hover.
  • Body-Text auf Weiß: color: var(--color-md-gray-900); liefert 16,1:1 Kontrast — AAA mühelos bestanden.
  • Status-Farben: Erfolg --color-success: var(--color-md-green-700);, Warnung --color-warn: var(--color-md-amber-700);, Fehler --color-error: var(--color-md-red-700); — alle barrierefrei gegen Weiß.
  • Hintergrund-Akzent: background: linear-gradient(135deg, var(--color-md-teal-50), var(--color-md-blue-50)); — sehr dezenter Marken-Hauch.
  • Dark Mode: --surface-base: var(--color-md-gray-900); --color-text: var(--color-md-gray-100); — robuster Standard, mit dem 99 % aller Inhalte funktionieren.

Grenzen der Material-Palette

Die Material-Palette ist 2014 in sRGB definiert worden — Display-P3-Geräte zeigen die Werte etwas satter als auf älteren Monitoren. Das ist kein Bug, sondern Wunsch des Browsers, der zwischen Gamuts mappt. Wer maximale Genauigkeit über alle Geräte will, dokumentiert P3-Fallbacks separat. Farbenblind-Tauglichkeit ist nicht garantiert: Manche Hue-Paare (Red 500 vs. Green 500) sind für Deuteranopen kaum unterscheidbar — kombiniere immer mit Icons oder Text-Labels. Mid-Range Shades 300/400/500 erreichen oft nur AA Large gegen Weiß; Body-Text muss auf Shade 700+ wechseln oder dunklen Text auf 50/100 nutzen. Die Palette ist auch begrenzt: 19 Hues und 14 Shades = 266 Farben. Das deckt Standard-UI ab, aber wer komplexe Datenvisualisierungen baut (Heatmaps, Choropleth-Karten), braucht zusätzlich perzeptuell uniforme Paletten wie Viridis oder Cividis. Schließlich ist Material 2 ein älteres System — Material 3 nutzt dynamische HCT-Paletten, die aus einer Seed-Farbe generiert werden. Wer langfristig in Googles Ökosystem bleibt, sollte Material 3 statt 2 evaluieren.

Häufige Fragen zur Material-Palette

Welcher Shade ist der Marken-Default?
Shade 500 ist die referenzielle Marken-Farbe — von Google so kalibriert, dass sie auf weißem Hintergrund klar sichtbar bleibt. Für CTAs und Primary Buttons ist sie der Standard. Hover sollte dann auf 700 wechseln.
Was ist der Unterschied zwischen 500 und A400?
500 ist die normale, perzeptuell ausgewogene Marken-Variante. A400 ist ein Accent-Ton — stärker gesättigt, schreiender, gedacht für FABs und visuelle Highlights, nicht für Standard-CTAs.
Wie kombiniere ich zwei Material-Farben?
Wähle eine Primary und eine Secondary mit deutlichem Hue-Abstand (z. B. Teal + Orange = 165° Abstand). Beide auf Shade 500 oder 600 halten. Vermeide Komplementär-Knaller (Red + Cyan), wenn dein Brand seriös wirken soll.
Ist Material Design barrierefrei?
Die Palette selbst ist neutral — Barrierefreiheit hängt vom Token-Set ab, das du daraus baust. Für WCAG AA gilt: Body-Text auf 100er-Backgrounds = Shade 800/900 für Text; Marken-Buttons = Shade 700+ wegen 4,5:1.
Was ist mit Material 3?
Material 3 nutzt dynamisch generierte HCT-Paletten (Hue-Chroma-Tone), die aus einer Seed-Farbe alle Surface-Varianten ableiten. Für native Android-Apps und Flutter ist das die aktuelle Empfehlung; für reine Web-UIs ist Material 2 weiterhin praktischer.
Wie ändere ich die ganze Marke schnell?
Wenn alle Komponenten var(--color-primary) statt einer festen Hue verwenden, reicht ein Eintrag: :root { --color-primary: var(--color-md-blue-500); } tauscht die ganze Marke von Teal auf Blau in einer Zeile.

Verwandte Tools