Farbpaletten-Generator
Klick auf „Generieren“ (oder drück die Leertaste), sperre, was dir gefällt, und würfle weiter, bis jede Farbe sitzt – oder starte mit deiner eigenen Ausgangsfarbe oder einer kuratierten Vorlage, vom Japandi-Wohnzimmer bis zur Amiga-Workbench. Export als CSS, SCSS, Tailwind, JSON oder PNG, kostenlos und unbegrenzt. Läuft zu 100 % im Browser.
Der abwechslungsreichste Typ: Nachbarn, ein Triaden-Schritt und die Komplementärfarbe rund um einen Farbton.
Keine Ausgangsfarbe: Jedes Generieren würfelt einen zufälligen Farbton. Leg eine fest, um die Palette um sie herum aufzubauen.
Mit einer Vorlage starten
Wähl ein Thema und klick dann eine Farbe an, um darum herum aufzubauen – oder übernimm die ganze Palette.
Produkt- und Plattformnamen beschreiben nur die Herkunft der Farben – es besteht keine Verbindung zu ihren Rechteinhabern.
Generieren, sperren, wiederholen – warum dieser Workflow funktioniert
Niemand entwirft eine Fünf-Farben-Palette in einem einzigen Zug. In Wirklichkeit läuft es über Wiedererkennen – du siehst eine Farbe, die funktioniert, behältst sie und würfelst den Rest um sie herum neu. Genau dafür sind die Sperr-Buttons da. Eine typische Sitzung dauert keine Minute: Sperre beim zweiten oder dritten Wurf eine Basis, die dir gefällt, lass den Generator die restlichen Plätze darauf abstimmen und sperre jede Runde eine Farbe mehr, bis der Satz sitzt.
Begrenzter Zufall statt Rauschen
Gleichverteilt zufällige RGB-Farben sind eine notorische Enttäuschung: Der größte Teil des RGB-Würfels ist dunkler, blasser Schlamm, und beziehungslose Farbtöne passen selten zusammen. Dieser Generator arbeitet anders. Jede Runde wählt einen Basis-Farbton und leitet daraus Kandidaten über klassische Harmonie-Beziehungen ab – derselbe Farbton, Nachbarn bei ±25°, die Komplementärfarbe und ihre Splits – mit kontrolliertem Jitter. Die Helligkeit wird bewusst über die Plätze von dunkel nach hell gestaffelt (in OKLCH, wo „Helligkeit“ dem entspricht, was deine Augen sehen), denn eine brauchbare Palette braucht einen dunklen Anker, eine helle Fläche und Zwischenstufen. Das Ergebnis liest sich wie ein Schema, nicht wie eine Lotterie.
Acht Palettentypen – von einem Farbton bis zum kompletten Diagramm-Set
Der Typ bestimmt, wie die Farbtöne einer Palette zueinander stehen. Gemischt, die Voreinstellung, streut am weitesten; die klassischen Farbkreis-Schemata folgen strengeren Regeln, und zwei praktische Typen decken Oberflächen und Diagramme ab.
| Typ | Wie die Farbtöne zusammenhängen | Geeignet für |
|---|---|---|
| Gemischt | Nachbarn, ein Triaden-Schritt und die Komplementärfarbe rund um einen Farbton | Ausprobieren, Moodboards |
| Monochrom | Ein Farbton, von dunkel bis hell | Ruhige Oberflächen, Markenfarbskalen |
| Analog | Nachbarn innerhalb von ±5° bis ±90° um den Ausgangsfarbton | Naturthemen; in einer Farbfamilie bleiben |
| Komplementär | Der Ausgangsfarbton und sein Gegenüber | Call-to-Action-Buttons, starker Kontrast |
| Geteilt-komplementär | Die Ausgangsfarbe und die zwei Farbtöne 5°–60° neben ihrem Gegenüber | Kontrast mit weniger Spannung |
| Triadisch | Drei Farbtöne im Abstand von 120° | Verspielte, ausgewogene Designs |
| Neutral + Akzent | Getönte Grautöne und ein kräftiger Akzent | Dashboards, Dokumentation, Produkt-UI |
| Diagramm | Gleichmäßig verteilte Farbtöne bei gleicher Helligkeit, bis zu acht | Balken-, Linien- und Kreisdiagramme |
Der Winkel-Regler legt fest, wie weit die Farbtöne streuen dürfen. Bei Analog ist er der Farbtonbereich um die Ausgangsfarbe: ±15° hält eine grüne Palette grün, ±60° reicht von Gelb bis Blau. Bei Geteilt-komplementär verschiebt er die beiden Teilfarben – nahe 5° verschmelzen sie zur einfachen Komplementärfarbe, bei 60° bilden sie eine Triade. Alle Regeln arbeiten mit dem OKLCH-Farbton, bei dem gleiche Winkel wie gleiche Schritte aussehen.
Jede Farbe öffnet außerdem eine eigene Reihe von Abstufungen: zehn hellere und dunklere Stufen im selben Farbton, die von Tailwind bekannte Skala 50–900. Ein Klick auf eine Abstufung setzt sie ein – sie wird sofort gesperrt, damit das nächste „Generieren“ sie behält. Eine Abstufung der Ausgangsfarbe wird zur neuen Ausgangsfarbe, und der Rest der Palette folgt ihr.
Mit deiner eigenen Farbe starten – oder mit einer Vorlage
Eine Palette beginnt selten bei null: Da ist eine Markenfarbe, ein Sofa, ein Farbmuster an der Wand. Leg sie als Ausgangsfarbe fest, und der Generator würfelt keine zufälligen Farbtöne mehr. Er behält deine Farbe – gesperrt auf dem Platz, der zu ihrer Helligkeit passt – und baut den Rest über dieselben Harmonie-Beziehungen um ihren Farbton herum auf. Auch ihre Buntheit überträgt sich: Eine gedämpfte Ausgangsfarbe ergibt eine ruhige Palette, eine kräftige eine lebendige.
Noch keine Farbe im Kopf? Der Vorlagen-Katalog ordnet fertige Paletten nach Themen: Oberflächen, Räume und Wände, Stimmungen und Natur, Epochen vom Barock bis in die 2010er, Kleidung, Handwerk und Kultur sowie Retro-Computer. Klick eine Farbe an, um sie als Ausgangsfarbe zu nutzen, oder übernimm die ganze Palette. Wo eine historische Palette dokumentierte Werte hat – Amiga Workbench, Windows 95, IBM CGA, Material Design –, verwendet der Katalog sie exakt; wo es keine gibt, steht das in der Notiz unter ihrem Namen. Die Raum-, Kleidungs- und Stimmungspaletten sind für den Alltag kuratiert.
Wofür die fünf Plätze da sind
| Platz | Typische Rolle | Typischer Anteil |
|---|---|---|
| Dunkelste | Text, dunkler Anker | 10–30% |
| Dunkel-mittel | Primäre Markenfarbe / dominant | ~30% |
| Mittel | Sekundär, Hover, Illustration | ~20% |
| Kräftig | Akzent – Buttons, Highlights | ~10% |
| Hellste | Hintergrund, Flächen | 30–60% |
Die 60-30-10-Regel ist ein guter Ausgangspunkt: die dominante Farbe auf dem größten Teil der Fläche, eine sekundäre auf rund einem Drittel, der Akzent sparsam eingesetzt, damit er besonders bleibt.
Kostenloser Export – mit Absicht
Die großen Paletten-Seiten sperren den Export hinter ein Abo. Hier ist jedes Format kostenlos und unbegrenzt: CSS-Custom-Properties für einfache Stylesheets, SCSS-Variablen, ein Tailwind-Fragment für theme.extend.colors, JSON fürs Tooling und ein PNG-Farbfeldblatt für Präsentationen und Moodboards. „Alle speichern“ legt die Palette außerdem in „Meine Farben“ ab, sodass du Paare sofort im Kontrast-Checker prüfen oder eine Lieblingsfarbe im Abstufungs-Generator zu einer vollen Farbskala ausbauen kannst. Alles läuft zu 100 % in deinem Browser – nichts wird hochgeladen, und es gibt kein Konto, mit dem sich dir etwas verkaufen ließe.
Du hast schon eine Farbpalette, die sich beißt? Das Tool Farbpalette korrigieren behält die Farben, die bleiben müssen, und verschiebt nur den Rest – mit der kleinsten Änderung, die funktioniert.
Häufige Fragen
Wie funktioniert der Workflow aus Generieren und Sperren?
Drück auf „Generieren“ (oder die Leertaste) für eine frische Palette. Taucht eine Farbe auf, die dir gefällt, sperre sie – gesperrte Farben überstehen jede folgende Generierung, während der Rest weiter sucht. Wiederhole das, bis jede Farbe gesperrt ist.
Sind die Paletten wirklich zufällig?
Der Zufall ist echt (jede Runde zieht einen frischen Startwert aus dem kryptografisch starken Generator deines Browsers), aber er ist eingegrenzt: Jede Runde wählt einen Basis-Farbton und leitet die übrigen Farben über harmonische Farbton-Beziehungen ab, verteilt über einen Helligkeitsbereich im wahrnehmungsnahen OKLCH-Raum. Legst du eine Ausgangsfarbe fest, ersetzt ihr Farbton den zufälligen – und die Buntheit der Palette folgt ihr, sodass ein gedämpftes Salbeigrün eine gedämpfte Palette ergibt. Rein gleichverteilter Zufall erzeugt meist nur Matsch.
Kann ich eine Palette um meine eigene Farbe herum aufbauen?
Ja – tipp oder füg sie bei „Ausgangsfarbe“ ein, wähl sie im Farbkreis, übernimm die Farbe, die du zuletzt im Farbkreis eingestellt hast, oder klick eine Farbe im Vorlagen-Katalog an. Die Ausgangsfarbe bleibt auf dem Platz gesperrt, der zu ihrer Helligkeit passt, und jedes Generieren baut die übrigen Farben um ihren Farbton herum auf. „Palette übernehmen“ im Katalog lädt stattdessen eine komplette Vorlage.
Welche Palettentypen kann ich erzeugen?
Acht: Gemischt (die Voreinstellung – Nachbarn, ein Triaden-Schritt und die Komplementärfarbe rund um einen Farbton), Monochrom (ein Farbton, von dunkel bis hell), Analog (benachbarte Farbtöne in einem Bereich, den du festlegst), Komplementär (ein Farbton und sein Gegenüber), Geteilt-komplementär (ein Farbton und die zwei Nachbarn seines Gegenübers), Triadisch (drei Farbtöne im Abstand von 120°), Neutral + Akzent (getönte Grautöne und eine kräftige Farbe) und Diagramm (gleichmäßig verteilte Farbtöne bei gleicher Helligkeit, für Datenreihen). Jeder Typ funktioniert mit Ausgangsfarbe, Sperren und allen Exporten.
Wie bleibt eine Palette in einer Farbfamilie – zum Beispiel nur bei Grüntönen?
Leg ein Grün als Ausgangsfarbe fest, wähle Analog und verkleinere den Farbtonbereich: Bei ±15° bleibt jede Farbe innerhalb von 15° um dein Grün – die Palette reicht also von gelblichen bis zu bläulichen Grüntönen und verlässt die Familie nie. Monochrom ist noch strenger: ein einziger Farbton, nur Helligkeit und Buntheit ändern sich. Gemischt, die Voreinstellung, streut absichtlich weiter, bis hin zur Komplementärfarbe.
Kann ich eine Farbe etwas heller oder dunkler machen?
Ja – die Abstufungs-Schaltfläche an jeder Farbe öffnet eine Reihe mit zehn helleren und dunkleren Stufen im selben Farbton, die von Tailwind bekannte Skala 50–900. Ein Klick setzt eine Stufe ein; sie wird sofort gesperrt, damit das nächste „Generieren“ sie behält. Wählst du eine Abstufung der Ausgangsfarbe, verschiebt sich die Ausgangsfarbe, und der Rest der Palette folgt ihr.
Ist der Export kostenlos? Gibt es Limits?
Völlig kostenlos und unbegrenzt – kopiere CSS-Custom-Properties, SCSS-Variablen oder ein Tailwind-Config-Fragment oder lade JSON und ein PNG-Farbfeldblatt herunter. Kein Konto, kein Wasserzeichen, keine Pro-Version.
Wie viele Farben sollte eine Palette für ein echtes Projekt haben?
Fünf ist der Sweet Spot und hier die Voreinstellung: ein dunkles und ein helles Neutral, eine dominante Farbe, eine unterstützende Farbe, ein Akzent. Drei decken die klassische 60-30-10-Regel ab (dominant, sekundär, Akzent), vier passen zu einer kompakten Markenidentität, sechs lassen Platz für einen zweiten Akzent. Jenseits von sechs wird aus einer Palette ein Designsystem – bleib bei fünf und erweitere jede Farbe mit dem Abstufungs-Generator zu einer Farbskala 50–900, statt weitere Zufallsfarben hinzuzufügen. Diagramme sind die Ausnahme: Jede Datenreihe braucht ihre eigene, klar unterscheidbare Farbe, deshalb reicht der Typ Diagramm bis acht.
Lädt dieses Tool irgendetwas hoch?
Nein – Generieren, Sperren und jeder Export laufen zu 100 % in deinem Browser. Sobald die Seite geladen ist, funktioniert alles sogar offline.