Was ist Material-Design-Farbwähler?

Der Material Design Color Picker bietet die vollständige Material-Design-Farbpalette mit allen Primärfarben und deren Abstufungen (50 bis 900). Klicken Sie auf ein Farbfeld, um den Wert in HEX, RGB oder HSL zu kopieren, und prüfen Sie die Barrierefreiheit mit dem integrierten WCAG-Kontrastwerkzeug.

Die Palette umfasst alle 19 Grundtöne (Red bis Brown) mit den Abstufungen 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 sowie den Akzenten A100, A200, A400, A700, sofern Google sie definiert. Jedes Feld zeigt den exakten HEX-Wert, und im Panel mit ausgewählten Farben lässt sich eine Projektpalette zusammenstellen, kopieren oder herunterladen.

Anleitung

1. Durchsuchen Sie das Farbraster mit allen Material-Design-Primärfarben — Rot, Pink, Lila, Tiefviolett, Indigo, Blau und weitere.
2. Klicken Sie auf eine Primärfarbe, um deren Abstufungen von der hellsten (50) bis zur dunkelsten (900) aufzuklappen, einschließlich Akzentfarben (A100–A700).
3. Klicken Sie auf eine Abstufung, um ihren Wert im gewählten Format (HEX, RGB oder HSL) zu kopieren, fügen Sie Abstufungen zum Panel Ausgewählte Farben hinzu und laden Sie die Palette als CSS, SCSS, Tailwind-Konfiguration oder JSON für Ihr Projekt herunter.

Wann verwenden

• Eine Hauptfarbe, eine hellere Container-Variante und einen dunkleren Hover-Wert aus derselben Familie wählen.
• Eine Android- oder Flutter-Oberfläche an Googles offizielle Palette anpassen, ohne HEX-Werte zu raten.
• Eine stimmige Palette für eine Präsentation oder ein Marketing-Asset zusammenstellen.

Ergebnis

Sie entwickeln ein Dashboard und benötigen das exakte Material-Design-'Indigo 500' (#3F51B5) für Ihre primäre Schaltflächenfarbe und 'Indigo 50' (#E8EAF6) für den Hover-Hintergrund.

Häufige Fragen

Was unterscheidet die Hauptabstufungen von den Akzenten (A)?

Die Abstufungen 50 bis 900 sind Helligkeitsvarianten desselben Tons und passen zu Hintergründen, Flächen und Text. A100 bis A700 sind stärker gesättigt, Google sieht sie für Aktionselemente wie Buttons oder Badges vor.

Warum haben einige Farben keine Akzente?

Brown und Grey sind absichtlich entsättigt, deshalb hat Google für sie nie A-Varianten veröffentlicht. Das Werkzeug folgt der Originalspezifikation und erfindet keine Werte, die nie Teil des Systems waren.

Welche Abstufung passt zum Fließtext?

Material empfiehlt Grey 900 auf hellem Hintergrund und Grey 50 oder Weiß auf dunklem. Mittlere Werte (500 bis 600) eignen sich für sekundären Text oder Icons mit niedrigerem Kontrast.

Sind das dieselben Farben wie in Material 3 (Material You)?

Nein. Diese Palette stammt aus dem ursprünglichen Material-Design-System, das Google 2014 veröffentlicht hat. Material 3 nutzt einen anderen Algorithmus, der dynamische Tonleitern aus einer einzigen Quellfarbe berechnet.

Wie prüfe ich den Kontrast zwischen zwei Abstufungen?

Fügen Sie beide Abstufungen zum Panel Ausgewählte Farben hinzu und scrollen Sie zum Kontrast-Prüfer. Wählen Sie eine als Vordergrund, die andere als Hintergrund: das Panel zeigt das WCAG-Verhältnis mit Bestanden/Fehlt-Plaketten für AA und AAA bei normalem und großem Text.

Ähnliche Tools