Material Design Farbpalette Durchsuchen Sie die vollständige Material-Design-Farbpalette mit allen Schattierungen und Akzentfarben.

🎨

Material Design Farben

Durchsuchen Sie die vollständige Material-Design-Farbpalette mit allen Schattierungen und Akzentfarben.

Farbfamilie auswählen

Wählen Sie eine Farbfamilie wie Rot, Blau oder Grün.

Schattierungen durchblättern

Sehen Sie alle Schattierungen von 50 (hellste) bis 900 (dunkelste) plus Akzentvarianten.

Farben kopieren

Kopieren Sie den HEX-Code einer beliebigen Schattierung mit einem Klick.

Loading tool...

What Is Material Design Farben?

Material Design Colors ist eine umfassende Referenz für Googles Material-Design-Farbsystem und bietet 19 Farbfamilien mit Schattierungen von 50 bis 900 sowie Akzentvarianten (A100-A700). Die Material-Design-Palette wurde sorgfältig von Google entwickelt, um ein ausgewogenes und umfassendes Set an Farben für die Benutzeroberflächengestaltung bereitzustellen. Jede Farbfamilie bietet eine Palette von sehr hell (50) bis sehr dunkel (900), wobei Akzentschattierungen lebendige, gesättigte Varianten für Hervorhebungselemente bieten. Die Palette wurde mit Barrierefreiheit im Blickwinkel entwickelt und weist einen klaren Kontrast zwischen benachbarten Schattierungen auf. Sie wird häufig in der Entwicklung von Android-Apps, Material UI (React), Angular Material, Flutter und Webanwendungen verwendet, die den Material-Design-Richtlinien folgen. Das Tool ermöglicht es Ihnen, nach Farbfamilie zu browsen, alle Schattierungen in einem visuellen Streifen anzuzeigen und den HEX-Code jeder Farbe zu kopieren.

Why Use Material Design Farben?

Vollständiges Material Design-Paletten mit allen 19 Farbfamilien
Schattierungen von 50 bis 900 plus Akzentvarianten (A100-A700)
Visueller Farbfamilien-Selektor mit schneller Navigation
Farbstreifen, der alle Varianten auf einen Blick zeigt
Ein-Klick-Kopie für jede Farbe

Common Use Cases

Android-Entwicklung

Wählen Sie Material-Farben für Android-Apps nach Googles Design-Richtlinien.

Material UI (React)

Finden Sie exakte Farbwerte für die Anpassung des MUI-Themas.

Flutter-Entwicklung

Wählen Sie Material-Farben für Flutter-Apps mit Sicherheit.

Webdesign

Erstellen Sie Webseiten im Material Design-Stil mit dem offiziellen Farbpaletten.

Technical Guide

Das Material-Design-Farbsystem verwendet eine strukturierte Namenskonvention: Familienname + Schattierungsnummer. Jede Familie hat 10 Standard-Schattierungen (50, 100, 200...900) und bis zu 4 Akzentschattierungen (A100, A200, A400, A700). Die Standard-Schattierungen reichen von sehr hell (50, geeignet für Hintergründe) bis sehr dunkel (900, geeignet für Text). Die Akzentschattierungen sind hochgesättigte Varianten, die für Floating-Action-Buttons, interaktive Elemente und Hervorhebungen konzipiert wurden. Nicht alle Familien haben Akzentvarianten - Braun, Grau und Blaugrau verfügen nicht über Akzentvarianten, da sie neutral sind. Die Farben wurden mithilfe des HCT-Farbraums (Hue, Chroma, Tone) in Material Design 3 (Material You) entwickelt, der gegenüber HSL einheitlichere Farbrampen bietet. Die Palette stellt sicher, dass die Kontraste zwischen der Schattierung 500 und weißem Text sowie zwischen helleren Schattierungen und dunklem Text den WCAG-AA-Richtlinien entsprechen.

Tips & Best Practices

1
Schattierung 500 ist die "primäre" Schattierung jeder Familie - verwenden Sie sie als Basis
2
Schattierungen von 50 bis 200 eignen sich gut für Hintergründe und Oberflächen
3
Schattierungen von 600 bis 900 eignen sich gut für Text auf hellen Hintergründen
4
Akzent-Schattierungen (A100-A700) sind für Betonungselemente wie FABs und Links gedacht
5
Material Design 3 führt dynamische Farben aus Benutzer-Hintergrundbildern ein - überprüfen Sie Material You auf Updates

Related Tools

HEX zu RGB Konverter

Konvertieren Sie HEX-Farbcodes in RGB-Werte sofort mit einer Live-Vorschau.

🎨 Color Tools

Farbpicker

Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.

🎨 Color Tools

Markenfarbpaletten

Durchstöbern Sie offizielle Farbpaletten von über 50 beliebten Marken und Technologieunternehmen.

🎨 Color Tools

Tailwind Farbfinder

Finden Sie die nächstliegende Tailwind CSS-Farbklassen für jeden HEX-Code.

🎨 Color Tools

iOS- und Android-Systemfarben

Durchstöbern Sie Systemfarben für iOS Human Interface und Android Material Design.

🎨 Color Tools

Frequently Asked Questions

Q Ist dies das neueste Material Design-Paletten?

Dies umfasst die Material Design 2-Palette. Material Design 3 (Material You) führt dynamische Farbthemen ein, die Paletten aus Benutzer-Hintergrundbildern generieren, aber die klassische Palette bleibt der Standard-Referenz.

Q Warum fehlen Braun, Grau und Blaugrau Akzent-Schattierungen?

Diese sind neutrale Farbfamilien. Akzente sind dafür gedacht, hoch gesättigt und lebendig zu sein, was der Natur neutraler Farben widerspricht.

Q Welche Schattierung sollte ich für primäre Buttons verwenden?

Schattierung 500 oder 600 ist typisch für primäre Buttons im hellen Modus. Im dunklen Modus sind Schattierungen von 200 oder 300 auf dunklen Oberflächen geeignet. Überprüfen Sie immer die Kontrastverhältnisse.

About This Tool

Material Design Farben is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.