Farbpaletten-Generator
Klick auf „Generieren“ (oder drück die Leertaste), sperre, was dir gefällt, und würfle weiter, bis alle fünf Farben sitzen – dann exportierst du die Palette als CSS, SCSS, Tailwind, JSON oder PNG, kostenlos und unbegrenzt. Läuft zu 100 % im Browser.
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 fünf 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.
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.
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 alle fünf gesperrt sind.
Sind die Paletten wirklich zufällig?
Der Zufall ist echt (der kryptografisch starke 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. Rein gleichverteilter Zufall erzeugt meist nur Matsch.
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 ein guter Richtwert: ein dunkles und ein helles Neutral, eine dominante Farbe, eine unterstützende Farbe, ein Akzent. Brauchst du von jeder davon Aufhellungen und Abdunkelungen, gib die Farbe in den Abstufungs-Generator und erhalte eine vollständige Farbskala 50–900.
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.