Ueberblick
Dieses Tool hilft dir dabei, eine einzelne Startfarbe in ein strukturiertes Set verwandter Farben zu ueberfuehren. So lassen sich Interfaces mit konsistenten Flaechen, Zustandsfarben und Akzenten leichter aufbauen, ohne jeden Schritt von Hand zu schaetzen. Es eignet sich auch, wenn du eine fruehe visuelle Richtung fuer eine Marke, eine Landing Page oder ein Produktkonzept brauchst. Statt mit einer isolierten Farbe zu arbeiten, bekommst du eine kleine Farbfamilie fuer Headlines, Hintergruende, Highlights und Interaktionen. Nutze die erzeugten Werte als Ausgangspunkt und passe sie im Designfile oder im Code an, wenn du mehr Kontrast, waermere Neutraltöne oder einen ruhigeren Gesamteindruck brauchst.
Anwendungsfaelle
- UI-FarbskalaBaue Toene fuer Buttons, Panels, Hover-Zustaende und dezente Hintergruende aus einer zentralen Markenfarbe auf.
- Richtung fuer eine Landing PageTeste Hero-Bereich, Akzentfarbe und Untersektionen mit einer stimmigen Farbfamilie, bevor du das Layout finalisierst.
- Entwurf fuer ein DesignsystemErstelle einen Startbereich fuer Tokens wie Primary, Secondary, Surface und Emphasis beim Definieren eines neuen Themes.
- Marken-KonzeptboardEntwickle eine Signalfarbe zu einer Palette weiter, die fuer Praesentationen, Moodboards und Identity-Skizzen nutzbar ist.
So funktioniert es
- 1
Basisfarbe auswaehlen, die den Ausgangspunkt bildet.
- 2
Anzahl der verwandten Farben festlegen.
- 3
Die erzeugten Swatches pruefen und die Werte in Design oder Code uebernehmen.
Beispiele
Palette fuer ein SaaS-Dashboard
Eingabe: Basisfarbe: #1F7A8C, 7 Swatches
Ausgabe: Eine ausgewogene Mischung aus sehr hellen tuerkisen Hintergruenden, mittleren UI-Akzenten und einem dunklen Ankerwert
Geeignet fuer Navigation, Diagramme und Statushinweise.
Editorial Landing Page
Eingabe: Basisfarbe: warmes Korall, 5 Swatches
Ausgabe: Zarte Pfirsichtoene, ein sattes Korall in der Mitte und ein dunklerer Ton fuer Hervorhebungen
Gut, wenn die Seite warm wirken soll, aber nicht aufdringlich.
Moodboard fuer einen Produkt-Launch
Eingabe: Basisfarbe: tiefes Violett, 9 Swatches
Ausgabe: Mehrere Schritte von fast schwarzem Pflaumenton bis zu hellem Lavendel
Bietet genug Bandbreite fuer Karten, Abschnittstrenner und Produkt-Callouts.
FAQ
Bleibt die Stimmung der Palette immer nah an der Basisfarbe?
Die Palette bleibt an die Startfarbe gebunden, aber helle und dunkle Schritte koennen je nach Abstand neutraler oder intensiver wirken. Wenn du eine sehr genaue Stimmung brauchst, waehle nur die Toene, die am besten passen.
Kann ich die Werte direkt im Code verwenden?
Ja. Die erzeugten Werte sind fuer Styles, Tokens und Theme-Dateien gedacht. Wenn dein Projekt feste Benennungen braucht, kannst du sie vorher umbenennen.
Was mache ich, wenn ein Farbton zu hell fuer Text oder Buttons ist?
Dann eignet sich dieser Farbton eher fuer Flaechen oder Rahmen. Fuer Text und interaktive Elemente nimm einen dunkleren Ton aus derselben Palette.
Ist eine groessere Palette automatisch besser?
Nicht unbedingt. Viele Swatches bieten mehr Auswahl, machen die Anwendung aber oft unuebersichtlicher. Fuer Produktarbeit ist ein kleineres Set meist leichter konsistent zu halten.