Zum Inhalt springen

Material-Design-Farben: komplette Palette mit Akzenten

Die klassische Material-Design-Palette von Google: 19 Farben mit Abstufungen von 50 bis 900 und den Akzenten A100 bis A700. Kopiere jede Farbe in HEX, RGB, HSL, OKLCH oder mit ihrem MUI-Namen.

UI-Farben ansehen
Kopieren als

Werte jeder Farbe

Wähle eine Farbe, um alle Abstufungen mit MUI-Namen, HEX, RGB, OKLCH und der am besten kontrastierenden Textfarbe zu sehen.

Blue

AbstufungMUIHEXRGBOKLCHText
50Aa18.4:1
100Aa15.0:1
200Aa12.0:1
300Aa9.5:1
400Aa7.9:1
500Aa6.7:1
600Aa5.7:1
700Aa4.6:1
800Aa5.7:1
900Aa8.6:1
A100Aa9.7:1
A200Aa6.3:1
A400Aa5.3:1
A700Aa4.9:1

Was ist Material Design und wie ist seine Palette aufgebaut

Material Design ist das Designsystem, das Google 2014 vorgestellt hat, um seine Produkte und Android zu vereinheitlichen. Die Palette umfasst 19 Farben mit jeweils zehn Abstufungen von 50 (am hellsten) bis 900 (am dunkelsten).

Der Unterschied zu anderen Skalen sind die Akzente: A100, A200, A400 und A700, gesättigtere Versionen jeder Farbe für Buttons, Schalter und andere Elemente, die hervorstechen sollen. Brown, Grey und Blue Grey haben keine Akzente.

Hauptfarbe und Akzent kombinieren

Die ursprünglichen Material-Richtlinien empfehlen, eine Hauptfarbe zu wählen und ihre Abstufung 500 für die sichtbarsten Flächen wie die obere Leiste zu nutzen und 700 für die Statusleiste. Die hellen Abstufungen (50–200) dienen für Hintergründe und sekundäre Elemente.

Für den Akzent wählt man eine andere Familie und eine ihrer A-Abstufungen, meist A200: So hebt sich der Haupt-Aktionsbutton vom Rest ab. Die klassische Kombination ist Indigo mit einem Pink-Akzent.

Material Design 2 und Material 3: zwei Farbsysteme

Diese Tabelle zeigt die klassische Material-Design-Palette (Versionen 1 und 2). Material 3, auch Material You genannt, nutzt ein anderes System.

Material Design 2 (diese Palette)

  • 19 feste Farben mit Abstufungen 50–900 und Akzenten A100–A700.
  • Die Werte sind immer gleich, deshalb lassen sie sich aus einer Tabelle kopieren.
  • Diese Palette enthält MUI (@mui/material/colors) und viele Vorlagen.

Material 3 (Material You)

  • Paletten werden aus einer Grundfarbe erzeugt, mit 13 Tönen von 0 (Schwarz) bis 100 (Weiß).
  • Unter Android 12 und neuer kann die Grundfarbe aus dem Hintergrundbild stammen (dynamische Farbe).
  • Das Theme ist in Rollen gegliedert: primary, secondary, tertiary, neutral und neutral variant.

So nutzt du Material-Farben in deinem Projekt

Arbeitest du mit MUI (React), sind die Farben enthalten und werden pro Familie importiert. In jedem anderen Projekt kopierst du den HEX-Wert aus der Tabelle und speicherst ihn als CSS-Variable.

MUI (React)

import { createTheme } from '@mui/material/styles';
import { indigo, pink } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: pink.A200 },
  },
});

CSS

:root {
  /* indigo 500, indigo 700 and pink A200 */
  --primary: #3F51B5;
  --primary-dark: #303F9F;
  --accent: #FF4081;
}

Häufige Fragen

Gesättigtere Varianten jeder Farbe für Elemente, die hervorstechen sollen, wie Buttons, Links oder aktive Icons – im Gegensatz zu den Hauptabstufungen (50 bis 900) für Hintergründe und Flächen.

Die ursprünglichen Richtlinien empfehlen 500 für die Hauptflächen wie die obere Leiste, 700 für die Statusleiste und einen Akzent aus einer anderen Familie (meist A200) für den Haupt-Aktionsbutton.

Beide nutzen eine nummerierte Skala von hell bis dunkel, aber Material Design ergänzt die Akzentabstufungen (A100 bis A700), die Tailwind nicht hat. Außerdem unterscheiden sich Namen und exakte Werte jeder Farbfamilie zwischen beiden Systemen.

Dies ist die klassische Material-Design-Palette. Neuere Versionen des Systems (Material You) führen dynamische Paletten ein, die aus einer Grundfarbe erzeugt werden, aber diese Skala ist weiterhin weit verbreitet und kompatibel mit Projekten, die direkt auf sie verweisen.

MUI enthält genau diese Palette. Importiere die Familie aus @mui/material/colors und nutze die Abstufung als Index: indigo[500] oder pink.A200. Wähle „MUI“ unter „Kopieren als“, um diesen Namen direkt zu kopieren.

Die offizielle Palette definiert keine. Es sind neutrale oder gedämpfte Farben für Hintergründe, Text und sekundäre Elemente, nicht zum Hervorheben. Brauchst du einen Akzent, kombiniere sie mit einer anderen Familie.

Ja. Unter „Kopieren als“ kannst du HEX, RGB, HSL, OKLCH oder den MUI-Namen wählen, und die Tabelle jeder Farbe zeigt alle Formate gleichzeitig.