Material-Paletten-Generator
Erstelle tonale Paletten nach Material Design 3 aus einer Farbe, so wie Material You es macht: Primär, Sekundär, Tertiär, Neutral, neutrale Variante und Fehler, jede in 13 Tönen von 0 bis 100. Gebaut auf Googles eigenen material-color-utilities. Kopiere alles als CSS-Variablen. Kostenlos und online.
So erstellst du eine Material-3-Farbpalette
- 1Gib deine „Ausgangsfarbe“ ein oder wähle sie mit dem Farbwähler
- 2Sieh dir die sechs tonalen Paletten mit je 13 Tönen an
- 3Kopiere einen Ton oder klicke auf „Alles als CSS-Variablen kopieren“
- 78 Töne als HEX, fertig zum Einfügen als CSS-Variablen
Was du bekommst
- Googles eigener Code.material-color-utilities, die Bibliothek hinter Material You und Material 3
- Sechs Paletten, 13 Töne.Die Töne 0, 10 bis 90, 95, 99 und 100 für jede der sechs Grundfarben
- Jede Farbschreibweise.Gib #hex, rgb(), hsl(), oklch() oder einen CSS-Namen ein oder nimm den Farbwähler
Was du tun kannst
- Aus einer Ausgangsfarbe die sechs tonalen Paletten von Material Design 3 machen: Primär, Sekundär, Tertiär, Neutral, Neutrale Variante und Fehler
- Die Töne 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99 und 100 jeder Palette sehen, mit HEX-Code und Kopierknopf
- Alle 78 Töne als CSS-Variablen kopieren, benannt wie die Tokens von Material, zum Beispiel --md-ref-palette-primary40
- Die Ausgangsfarbe als #hex, rgb(), hsl(), lab(), oklch() oder CSS-Farbnamen eingeben oder mit dem Farbwähler wählen
Gut zu wissen
- Der Ton ist die Helligkeit: 0 ist Schwarz, 100 ist Weiß. Gerechnet wird in Googles Farbraum HCT
- Die primäre Palette behält deinen Farbton, bekommt aber eine Buntheit von mindestens 48. Eine gräuliche Ausgangsfarbe wird dort also bunter
- Sekundär behält den Farbton mit wenig Buntheit, Tertiär dreht ihn um 60 Grad, und die Fehlerpalette ist für jede Ausgangsfarbe dasselbe Rot
- Das Tool macht die tonalen Paletten, kein ganzes Theme mit Rollen wie onPrimary oder surface
Fragen
Was ist eine tonale Palette in Material Design 3?
Eine Farbe in einer Reihe von Helligkeitsstufen, von Ton 0 (Schwarz) bis Ton 100 (Weiß). Material 3 baut seine Farbrollen aus Tönen von sechs solchen Paletten.
Nutzt das Tool Googles offiziellen Farbalgorithmus für Material?
Ja. Die Paletten kommen aus Googles material-color-utilities, dem Code, den Material You nutzt, hier in deinem Browser. Deine Ausgangsfarbe wird nirgendwohin gesendet.
Wie verwende ich die Palette in CSS?
Klicke auf „Alles als CSS-Variablen kopieren“ und füge den :root-Block in dein Stylesheet ein. Dann nutzt du einen Ton zum Beispiel mit var(--md-ref-palette-primary40).
Warum ist meine primäre Palette bunter als meine Farbe?
Material 3 gibt der primären Palette eine Buntheit von mindestens 48. Eine zarte oder gräuliche Ausgangsfarbe wird dort kräftiger, ihr Farbton bleibt gleich.
Weitere Tools in „Web & Code“
Diese Seite gibt es nicht. Such unten oder zieh eine Datei hierher, um das passende Werkzeug zu finden.
Eine Website für jede Dateiaufgabe. Welche ist deine?
Schluss mit dem Hin und Her zwischen Konverter-Websites. Wähle eines von 410+ Tools oder ein Rezept, das mehrere aneinanderreiht.
- Dateien bleiben auf deinem Gerät
- Kein Wasserzeichen
- Funktioniert offline
Datei hierher ziehen
Eine eingefügte Datei geht auch.
oder such ein Tool
Eine App öffnen
Von „uff, diese Datei“ zu erledigt, in drei Schritten.
- Zieh sie rein oder wähl eine Aufgabe
Keine Datei? Such, was du brauchst. Dateien werden auf deinem Gerät verarbeitet, nicht zur Verarbeitung hochgeladen.
- Wähl, was du willst
Kleiner, ein anderes Format, unterschrieben, zusammengefügt. Ein Klick, ohne erst Einstellungen zu studieren.
- Mach ein Rezept daraus
Jede Woche dieselben drei Schritte? Reih sie einmal aneinander und lass beim nächsten Mal dasselbe Rezept laufen.
Ein freigegebener Werkzeugkasten für das ganze Team.
Ob im Büro, auf der Baustelle oder in der Agentur: Teams arbeiten den ganzen Tag mit vertraulichen Dateien. ToolRecipe gibt allen dieselben Werkzeuge und dieselben Rezepte, und die Dateien werden auf dem eigenen Computer jeder Person verarbeitet.
- Dateien werden auf dem Gerät der Mitarbeitenden verarbeitet
- Firmenrezepte, die alle gleich ausführen
- Ein Ort statt zehn Konverter-Seiten