Material-Design-Farbpalette erzeugen
Wählen Sie eine Grundfarbe und erhalten Sie sofort ihre zehn Abstufungen, von der hellsten (50) bis zur dunkelsten (900), im Stil der durch Material Design bekannt gewordenen Tonpaletten. Die Berechnung erfolgt vollständig in Ihrem Browser.
So funktioniert es
Das Tool behandelt Ihre Grundfarbe als Abstufung 500. Die helleren Abstufungen (50 bis 400) entstehen, indem die Farbe schrittweise mit Weiß gemischt wird, die dunkleren (600 bis 900) durch Mischen mit Schwarz – mit wachsenden Anteilen, je weiter man sich von 500 entfernt. Das Ergebnis ist eine stimmige Tonpalette, die Sie direkt in ein Designsystem oder eine Komponentenbibliothek übernehmen können.
Ist das genau der offizielle Material-Design-Algorithmus?
Nein, Google berechnet seine offiziellen Paletten mit einem proprietären, komplexeren Algorithmus auf Basis des HCT-Farbraums. Dieses Tool bietet eine Annäherung durch lineares Mischen mit Weiß und Schwarz, die optisch nah dran und direkt verwendbar ist, ohne den Anspruch, die offiziellen Material-Paletten pixelgenau nachzubilden.
Wie verwende ich diese Palette in meinem Projekt?
Klicken Sie auf eine Abstufung, um ihren HEX-Code zu kopieren, und verwenden Sie ihn als CSS-Variable oder Design-Token (zum Beispiel --primary-500): Die hellen Abstufungen dienen oft für Hintergründe und deaktivierte Zustände, die Abstufung 500 für die Hauptfarbe und die dunklen Abstufungen für Text oder aktive Zustände mit hohem Kontrast.
Alle Farbberechnungen finden direkt in Ihrem Browser statt, ganz ohne Aufruf eines externen Servers.