1
Bild hochladen
Lege ein Bild ab, wähle es aus oder füge es ein. Das Tool verkleinert es lokal und extrahiert mit Celebi-Quantisierung und Score-Rangfolge UI-taugliche Kandidaten.
DEVELOP.09 MATERIAL COLOR
Monet-Palette
Lade ein Bild hoch und erzeuge mit den offiziellen Material Color Utilities dynamische Themes. Vergleiche Varianten, Hell- und Dunkelmodus, semantische Rollen und vollständige Tonpaletten.
IMG
Bild hier ablegen
oder zur Auswahl klicken · Einfügen unterstützt
JPG, PNG, WebP, GIF · lokale Verarbeitung Kandidaten für Quellfarben Wähle eine Farbe als Theme-Seed
CFG
Theme-Einstellungen
Nur lokal
Lade ein Bild hoch, um ein Theme zu erzeugen
Wir extrahieren lokal Quellkandidaten und bauen ein vollständiges Material-Farbsystem für die Verwendung in Oberflächen.
UI
Theme-Vorschau im Kontext
§ 01
So erzeugst du aus einem Bild ein Material-Theme
2
Varianten vergleichen
Wähle die Material-3- oder Material-3-Expressive-Spezifikation und vergleiche Varianten mit derselben Oberflächenvorschau, Quellfarbe und Kontraststufe.
3
Prüfen und exportieren
Prüfe helle und dunkle Themes gemeinsam, sieh semantische Rollen und vollständige Tonpaletten an und exportiere CSS-Eigenschaften oder JSON.
§ 02
9 dynamische Material-Farbstile
Monochrome / Neutral
Unbunte und schwach gesättigte Schemata für ruhige, inhaltsreiche Oberflächen.
Tonal Spot / Vibrant
Der ausgewogene Material-3-Standard und eine farbenfrohere, energischere Variante.
Expressive / Rainbow / Fruit Salad
Starke Farbtonrotationen geben markenorientierten und verspielten Produkten Persönlichkeit.
Fidelity / Content
Bewahren Quellfarbe und Temperaturbeziehungen stärker, wenn der Inhalt die Gestaltung bestimmen soll.
§ 03
Farbvorschau für echte Oberflächen
✳
Jede Variante nutzt denselben Fünf-Farben-Fingerabdruck, um Primär-, Sekundär-, Tertiär-, Oberflächen- und Fehlerfarben direkt zu vergleichen.
✳
Helle und dunkle Themes erscheinen gemeinsam, damit Oberflächen, Text, Schaltflächen, Container und Navigation geprüft werden können.
✳
Alle 13 Töne der Paletten primary, secondary, tertiary, neutral, neutral variant und error werden angezeigt.
✳
Verwendet die offiziellen Google Material Color Utilities und verarbeitet alles lokal.
§ 04
Häufige Fragen
Q1Was ist Monet?
Monet ist eine verbreitete Bezeichnung für Androids dynamisches Farbsystem. Es kopiert Bildfarben nicht einfach, sondern wählt eine geeignete Quellfarbe und erstellt im HCT-Farbraum ein vollständiges Theme mit passenden Kontrasten.
Q2Wie unterscheiden sich Material 3 und M3 Expressive?
Material 3 nutzt die dynamische Farbspezifikation von 2021 und bietet 9 klassische Varianten. M3 Expressive nutzt die Spezifikation von 2025; die offizielle Bibliothek bietet neue Regeln für Neutral, Tonal Spot, Vibrant und Expressive sowie geräteabhängiges Verhalten.
Q3Warum sehen Varianten mit derselben Quelle so unterschiedlich aus?
Jede Variante verwendet andere Farbtonrotationen und Sättigungsziele für primäre, sekundäre, tertiäre und neutrale Paletten. Neutral bleibt zurückhaltend, Vibrant erhöht die Sättigung, Expressive dreht den Farbton stark, Fidelity bewahrt das Quellbild.
Q4Wird mein Bild hochgeladen?
Nein. Dekodierung, Skalierung, Pixelquantisierung, Theme-Erzeugung und Export laufen im Browser. Das Bild verlässt dein Gerät nicht.