CSS-Verlauf-Generator
Lineare, radiale und konische Verläufe bauen und CSS kopieren.
Design
Farbpaletten-Generator
Harmonische Paletten in OKLCH mit barrierefreien Abstufungen.
Was es macht. Ein Palettengenerator erzeugt aus einer Ausgangsfarbe eine Reihe zusammenpassender Farben und Abstufungen. Dieses Werkzeug rechnet in OKLCH, weil dort gleiche Zahlenschritte auch optisch gleich wirken — in HSL erzeugte Paletten sehen dagegen systematisch aus und wirken uneinheitlich.
Läuft im BrowserKein UploadKeine AnmeldungFunktioniert offline
So benutzt du Farbpaletten-Generator
- Wähl eine Ausgangsfarbe und eine Harmonieregel.
- Stell die Zahl der Abstufungen ein; der Kontrast jeder Stufe wird mitgeprüft.
- Kopier die Palette als CSS-Variablen oder als Wertetabelle.
Warum in HSL erzeugte Paletten schief wirken
Weil die Helligkeitsachse in HSL nicht der Wahrnehmung entspricht.
Eine Palette mit fünf Farbtönen bei jeweils 50 Prozent HSL-Helligkeit ergibt ein Gelb, das grell wirkt, und ein Blau, das dunkel wirkt. Auf dem Zahlenpapier sind sie gleich hell, im Auge nicht.
In einem Interface fällt das sofort auf: Die Statusfarben wirken unterschiedlich dringlich, obwohl sie gleichwertig sein sollen. Die gelbe Warnung schreit, der blaue Hinweis flüstert.
In OKLCH bedeutet gleiche Helligkeit auch gleiche wahrgenommene Helligkeit. Eine Palette mit konstantem L wirkt über alle Farbtöne hinweg ausgeglichen — deshalb rechnen aktuelle Designsysteme dort.
Welche Harmonieregel?
Die Regeln beschreiben Abstände auf dem Farbkreis. Keine ist objektiv besser, sie lösen verschiedene Aufgaben.
| Regel | Abstand | Wirkung |
|---|---|---|
| Monochrom | 0° | Ruhig, sicher, wenig Unterscheidungskraft |
| Analog | ±30° | Harmonisch, natürlich, geringer Kontrast |
| Komplementär | 180° | Maximale Spannung, schnell zu laut |
| Geteilt komplementär | 150°/210° | Spannung ohne Härte — meist die beste Wahl |
| Triade | 120° | Lebendig, schwer auszubalancieren |
| Tetrade | 90° | Vier Farben, braucht eine klare Hierarchie |
Für Anwendungsoberflächen sind Monochrom oder geteilt komplementär meist richtig: eine Markenfarbe, eine Akzentfarbe, und viel neutrales Grau. Triaden und Tetraden funktionieren in Illustrationen besser als in Interfaces, wo Farbe Bedeutung tragen muss.
Wie viele Stufen braucht eine Abstufung?
Neun bis elf sind der verbreitete Standard, meist von 50 bis 900 oder 950 nummeriert.
Der Grund ist praktisch: Man braucht sehr helle Töne für Flächen, mittlere für Ränder und Zustände, dunkle für Text. Mit fünf Stufen fehlt regelmäßig eine; mit fünfzehn trifft niemand mehr eine Entscheidung.
Wichtiger als die Anzahl ist, dass die Stufen einen festen Zweck haben. Eine Abstufung, in der Stufe 500 in jeder Farbe denselben Kontrast gegen Weiß hat, lässt sich austauschen, ohne die Barrierefreiheit zu gefährden.
Genau deshalb wird der Kontrast hier je Stufe angezeigt und nicht erst am Ende geprüft: Eine Palette, die erst nachträglich auf Kontrast getestet wird, muss meist neu gebaut werden.
Häufige Fragen
Warum OKLCH und nicht HSL?
Weil OKLCH der Wahrnehmung entspricht. In HSL erzeugte Paletten wirken trotz gleicher Zahlen uneinheitlich hell.
Welche Harmonieregel soll ich nehmen?
Für Interfaces monochrom oder geteilt komplementär. Triaden sind in Illustrationen besser aufgehoben.
Wie viele Abstufungen brauche ich?
Neun bis elf, nummeriert von 50 bis 900. Wichtiger als die Zahl ist ein fester Zweck je Stufe.
Kann ich die Palette als CSS exportieren?
Ja, als Custom Properties. OKLCH-Werte mit HEX-Rückfall für ältere Browser.
Prüft das Werkzeug den Kontrast?
Ja, je Stufe während des Erzeugens — nicht erst am Ende, wenn eine Korrektur teuer wäre.
Werden meine Farben gesendet?
Nein, alles rechnet lokal.
Ratgeber zu Farbpaletten-Generator
- HEX vs RGB vs HSL: Which to Use When7 min read
- WCAG Contrast Requirements, Explained Properly8 min read
- CSS Gradients, Shadows and Palettes7 min read