Material Design Farbreferenz
Durchsuchbare Referenz aller Material Design 3 (Material You) Farb-Tokens - 37 Farbrollen mit Werten für helles und dunkles Theme, 6 Tonpaletten mit je 13 Tonstufen und CSS-Variablennamen für jedes Token. Klicken Sie auf ein beliebiges Feld oder einen HEX-Wert, um ihn zu kopieren. Ohne Registrierung.
Searchable reference of all Material Design 3 (Material You) color tokens - dynamic color roles, tonal palettes, and CSS variable names. Click any swatch or HEX value to copy it. Toggle between light and dark theme values.
| Swatch | Token | HEX |
|---|---|---|
Primary High-emphasis elements, key actions, and active states. | ||
On Primary Text and icons on top of Primary. | ||
Primary Container Filled tonal button backgrounds and selected states. | ||
On Primary Container Text and icons on top of Primary Container. | ||
Inverse Primary Primary color in inverse surfaces (e.g. snackbars). | ||
Secondary Less prominent components and alternative actions. | ||
On Secondary Text and icons on top of Secondary. | ||
Secondary Container Tonal button backgrounds for secondary actions. | ||
On Secondary Container Text and icons on top of Secondary Container. | ||
Tertiary Contrasting accents to balance primary and secondary. | ||
On Tertiary Text and icons on top of Tertiary. | ||
Tertiary Container Tonal button backgrounds for tertiary actions. | ||
On Tertiary Container Text and icons on top of Tertiary Container. | ||
Error Error states, destructive actions, and validation failures. | ||
On Error Text and icons on top of Error. | ||
Error Container Background for error banners and input error states. | ||
On Error Container Text and icons on top of Error Container. | ||
Background The app background behind all other surfaces. | ||
On Background Text and icons on top of Background. | ||
Surface Card, sheet, and dialog backgrounds. | ||
On Surface Text and icons on top of Surface. | ||
Surface Variant Alternative surface for chips, input fields, and cards. | ||
On Surface Variant Text and icons on top of Surface Variant. | ||
Surface Tint Tint color applied to elevated surfaces (same as Primary). | ||
Inverse Surface Inverse surface for snackbars and tooltips. | ||
Inverse On Surface Text and icons on top of Inverse Surface. | ||
Surface Dim Dimmed surface for scrim overlays and disabled states. | ||
Surface Bright Brightest surface variant for elevated containers. | ||
Surface Container Lowest Lowest elevation surface container. | ||
Surface Container Low Low elevation surface container. | ||
Surface Container Default surface container. | ||
Surface Container High High elevation surface container. | ||
Surface Container Highest Highest elevation surface container. | ||
Outline Borders for text fields, dividers, and focus rings. | ||
Outline Variant Subtle borders for cards and decorative dividers. | ||
Shadow Drop shadow color for elevated components. | ||
Scrim Overlay color for modal backdrops and drawers. |
Color values shown are the Material Design 3 baseline (default) palette. Dynamic color (Material You) generates custom palettes from user wallpapers at runtime - these baseline values are the fallback when dynamic color is not available. Click any swatch or HEX value to copy it to your clipboard.
Warum unsere Material Design Farbreferenz verwenden?
- Vollständige Material Design 3 Token-Referenz: alle Material Design 3 Farbrollen - primary, secondary, tertiary, error, surface, background, outline, shadow und scrim - mit Werten für helles und dunkles Theme. Enthält alle 6 Tonpaletten mit je 13 Tonstufen.
- Sofortige Suche & Rollenfilterung: Suchen Sie nach Token-Namen, CSS-Variablennamen, HEX-Wert oder Beschreibung. Filtern Sie nach Farbrolle, um sich auf die benötigten Tokens zu konzentrieren. Ergebnisse aktualisieren sich sofort bei jedem Tastendruck.
- Werte für helles & dunkles Theme: Wechseln Sie mit einem Klick zwischen den Werten für helles und dunkles Theme. Jede Farbrolle zeigt den korrekten Token-Wert für beide Themes - unerlässlich für adaptive Material You Oberflächen.
- 100 % kostenlos - ohne Registrierung: völlig kostenlos, ohne Konto, ohne Premium-Stufe, ohne Nutzungslimits und ohne Werbung, die die Oberfläche blockiert. Konsultieren Sie die Material Design 3 Farben so oft Sie möchten.
Häufige Anwendungsfälle für die Material Design Farbreferenz
- Android-App-Entwicklung: Android-Entwickler nutzen die Material Design Farbreferenz, um die korrekten Farbrollen in Jetpack Compose und XML-Layouts zu implementieren. Die Referenz zeigt Werte für helles und dunkles Theme für jedes Token und erspart das Nachschlagen in der offiziellen Dokumentation.
- Flutter & plattformübergreifende Entwicklung: Flutter-Entwickler nutzen die Material Design Farbreferenz, um ColorScheme in ihrer ThemeData zu konfigurieren. Die Tonpalettenwerte entsprechen direkt Flutters Material 3 Farbsystem und erleichtern die Implementierung benutzerdefinierter Markenfarben.
- Web-Implementierung von Material Design: Webentwickler, die Material Design 3 mit Material Web Components implementieren, nutzen die CSS-Variablennamen aus dieser Referenz, um die Standard-Theme-Tokens zu überschreiben und benutzerdefinierte Markenfarben anzuwenden.
- Figma Designsystem-Einrichtung: Designer, die Material Design 3 in Figma einrichten, nutzen die Farbreferenz, um ihre Farbstile und -variablen zu befüllen. Die Tonpalettenwerte liefern den vollständigen Satz an Feldern, der für ein Material You Designsystem benötigt wird.
- Material You dynamische Farbe: Entwickler, die Material You dynamische Farbe implementieren, nutzen die Basis-Token-Werte als Fallback, wenn die aus dem Hintergrundbild des Nutzers generierte Palette nicht verfügbar ist. Diese Referenz bietet alle Basiswerte für helle und dunkle Themes.
- Barrierefreiheit & Kontrastprüfung: Barrierefreiheits-Ingenieure nutzen die Material Design Farbreferenz, um zu prüfen, ob Farbrollenpaare (z. B. Primary + On Primary) die WCAG-Kontrastanforderungen erfüllen. Die On-Color-Rollen sind speziell darauf ausgelegt, lesbaren Kontrast zu gewährleisten.
Was ist Material Design 3 (Material You)?
Material Design 3 (auch Material You genannt) ist Googles neuestes Designsystem, eingeführt 2021 mit Android 12. Sein Farbsystem basiert auf dynamischer Farbe - der Fähigkeit, zur Laufzeit eine vollständige Farbpalette aus dem Hintergrundbild des Nutzers zu generieren. Das System definiert eine Reihe von Farbrollen (semantische Tokens wie „Primary“, „On Primary“, „Surface“), die auf bestimmte Töne einer Tonpalette verweisen. Diese Trennung von Rollen und Werten ermöglicht es der gesamten Oberfläche, sich an jede Marke oder nutzergenerierte Farbe anzupassen, während konsistenter Kontrast und Barrierefreiheit erhalten bleiben. Unsere Material Design Farbreferenz bietet alle Basis-Token-Werte für helle und dunkle Themes.
So funktioniert das Material Design 3 Farbsystem
- Tonpaletten: Material Design 3 generiert sechs Tonpaletten aus einer Ausgangsfarbe - Primary, Secondary, Tertiary, Error, Neutral und Neutral Variant. Jede Palette enthält 13 Töne von 0 (Schwarz) bis 100 (Weiß) und bietet damit eine vollständige Bandbreite an Helligkeitswerten.
- Farbrollen: Farbrollen sind semantische Tokens, die auf bestimmte Töne der Tonpaletten verweisen. Zum Beispiel entspricht „Primary“ Ton 40 im hellen Theme und Ton 80 im dunklen Theme. „On Primary“ entspricht Ton 100 im hellen und Ton 20 im dunklen Theme.
- Dynamische Farbe: Ab Android 12+ generiert Material You benutzerdefinierte Tonpaletten aus dem Hintergrundbild des Nutzers. Die Farbrollen verweisen dann auf dieselben Tonpositionen in der benutzerdefinierten Palette und erzeugen eine vollständig personalisierte Oberfläche. Die Basiswerte in dieser Referenz sind der Fallback, wenn dynamische Farbe nicht verfügbar ist.
Wichtige Farbrollengruppen
- Primary / On Primary / Primary Container: die Hauptmarkenfarbe und ihre Varianten. Primary wird für Schlüsselaktionen und Elemente mit hoher Betonung verwendet. Primary Container wird für gefüllte tonale Schaltflächen und ausgewählte Zustände verwendet.
- Secondary & Tertiary: unterstützende Farben für weniger prominente Komponenten und kontrastierende Akzente. Secondary wird für Chips und alternative Aktionen verwendet; Tertiary liefert einen dritten Akzent für visuelles Gleichgewicht.
- Surface & Background: die neutralen Farben für Kartenhintergründe, Sheets, Dialoge und den App-Hintergrund. Material Design 3 führt mehrere Surface-Container-Ebenen (lowest, low, default, high, highest) für höhenbasierte Tönung ein.
- Outline & Outline Variant: Randfarben für Textfelder, Trennlinien und Fokusringe. Outline wird für prominente Ränder verwendet; Outline Variant für dezente dekorative Trennlinien.
Verwendung von CSS-Variablen
Material Web Components (die offizielle Web-Implementierung von Material Design 3) verwendet CSS-Custom-Properties mit dem Präfix --md-sys-color- für alle Farb-Tokens. Sie können jedes Token überschreiben, indem Sie die CSS-Variable in Ihrem Stylesheet setzen: :root { --md-sys-color-primary: #ihre-farbe; }. Diese Referenz bietet den exakten CSS-Variablennamen für jedes Token, was das Kopieren und Einfügen in Ihre Implementierung erleichtert.
Häufig gestellte Fragen
Material Design 3 ist Googles neuestes Designsystem mit dynamischer Farbe, das Paletten aus den Hintergrundbildern der Nutzer generiert. Diese Referenz bietet alle Basis-Token-Werte für helle und dunkle Themes.
Eine Tonpalette sind 13 Farbtöne (0–100) aus einer Ausgangsfarbe. Eine Farbrolle ist ein semantisches Token, das auf einen bestimmten Ton verweist - z. B. entspricht „Primary“ Ton 40 im hellen und Ton 80 im dunklen Theme.
Material Web Components verwendet das Präfix --md-sys-color-. Beispiel: Primary ist --md-sys-color-primary. Diese Referenz zeigt den exakten CSS-Variablennamen für jedes Token.
Verwenden Sie ColorScheme.fromSeed() oder geben Sie jede Rolle manuell in ColorScheme() an. Konvertieren Sie HEX in eine Flutter Color mit Color(0xFF + hex ohne #).
Verwenden Sie dynamicColorScheme() für Material You oder erstellen Sie ein benutzerdefiniertes ColorScheme mit den Token-Werten. Konvertieren Sie HEX in eine Compose Color mit Color(0xFF6750A4).
Jede Rolle verwendet je Theme unterschiedliche Tonwerte - Primary ist Ton 40 im hellen und Ton 80 im dunklen Theme. Wechseln Sie in dieser Referenz zwischen den Themes, um die korrekten Werte zu sehen.
Dynamische Farbe generiert ab Android 12+ eine benutzerdefinierte Palette aus dem Hintergrundbild des Nutzers. Die Basiswerte hier sind der Fallback, wenn dynamische Farbe nicht verfügbar ist.
Ja. Dies sind die offiziellen Material Design 3 Basis-Palettenwerte von m3.material.io unter Verwendung der Standard-Ausgangsfarbe Violett (#6750A4).
Ja. 100 % kostenlos ohne Registrierung, ohne Premium-Stufe, ohne Nutzungskontingente und ohne Werbung, die die Oberfläche blockiert.