Farbpaletten-Generator
Harmonische Paletten erzeugen, Favoriten fixieren und Tailwind-Farbstufen bauen
- Dateien verlassen Ihr Gerät nicht
- Läuft im Browser
- Kostenlos, ohne Anmeldung, ohne Wasserzeichen
3b82f6
e24956
3ba01b
So verwenden Sie: Farbpaletten-Generator
Erstellen Sie Farbpaletten auf drei Wegen: per Harmonieregel aus einer Grundfarbe, als Zufallspalette mit sperrbaren Farben oder als 11-stufige Abstufung von 50 bis 950 wie bei Tailwind. Gerechnet wird in OKLCH; exportieren können Sie nach CSS, Tailwind v3/v4, JSON, .gpl oder .ase.
- 1
Wählen Sie den „Modus“: „Harmonie“, „Zufall“ oder „Abstufung“.
- 2
Bei „Harmonie“ und „Abstufung“ legen Sie die „Grundfarbe“ fest und wählen dann eine „Regel“ bzw. „Farbname“ und „Grundfarbe auf Stufe“.
- 3
Bei „Zufall“ klicken Sie auf „Erzeugen“ oder drücken die Leertaste; sperren Sie Farben, die bleiben sollen, bevor Sie erneut erzeugen.
- 4
Fahren Sie über eine Farbe und klicken Sie auf das Kopiersymbol; im Modus „Harmonie“ können Sie sie auch als neue Grundfarbe verwenden.
- 5
Wählen Sie unter „Exportieren“ HEX, CSS, Tailwind v3, Tailwind v4 oder JSON und kopieren Sie den Code, oder laden Sie .gpl bzw. .ase herunter.
Häufige Fragen
Warum werden Harmonien in OKLCH berechnet?
Der Farbton wird in OKLCH gedreht, sodass jede Farbe die wahrgenommene Helligkeit und Sättigung der Grundfarbe behält. In HSL würde Gelb deutlich heller wirken als Blau.
Wie entsteht die Abstufung von 50 bis 950?
Die Helligkeit folgt einer Kurve nahe an Tailwinds eigenen Paletten, die Buntheit ist um 500–600 am höchsten. Ihre Grundfarbe steht unverändert auf ihrer Stufe; „Automatisch“ wählt die Stufe mit der ähnlichsten Helligkeit.
Kann ich zu einer früheren Zufallspalette zurück?
Ja, mit „Vorherige Palette“ und „Nächste Palette“. Solange die Seite offen ist, bleiben die letzten 50 Paletten erhalten; nach dem Schließen wird nichts gespeichert.
Wie viele Farben kann eine Palette haben?
Zufallspaletten haben 2 bis 10 Farben (über die Schaltflächen − und +). Harmonieregeln liefern eine feste Anzahl, etwa 2 bei Komplementär und 5 bei Analog oder Monochrom; die Abstufung hat immer 11 Stufen.
Wie sieht der Export für Tailwind v4 aus?
Als @theme-Block mit --color-*-Variablen, direkt in Ihr CSS einfügbar. Abstufungen werden als oklch()-Werte mit Namen wie --color-brand-500 geschrieben, die anderen Modi als HEX.