Tailwind-Farbgenerator
Tailwind-Farbpalette erzeugen: aus einer Farbe die Stufen 50 bis 950 berechnen und als CSS für Tailwind v4 oder v3 kopieren.
Der Tailwind-Farbgenerator berechnet aus einer Basisfarbe eine komplette Palette mit den elf Tailwind-Stufen 50 bis 950. Du gibst eine Farbe als Hex-, RGB-, HSL- oder OKLCH-Wert ein, prüfst Vorschau und Kontrast und kopierst das Ergebnis als CSS für Tailwind v4, als Config für v3 oder als CSS-Variablen. Die Rechnung läuft lokal im Browser.
Hex, rgb(), hsl() oder oklch() – oder den Farbwähler.
Daraus wird z. B. bg-primary-500.
Auf welcher Stufe deine Farbe sitzt.
Palette
Klick auf eine Stufe kopiert den Hex-Wert. Die Zahl unten zeigt den Kontrast der besseren Schriftfarbe (Weiß oder Schwarz) auf dieser Fläche nach WCAG.
Vorschau
Beispielinhalte, frei erfunden. Sie zeigen, wie deine Palette in Karten, Diagrammen und Formularen wirkt.
Code für dein Projekt
@theme {
--color-primary-50: #f0f5fe;
--color-primary-100: #dee9fc;
--color-primary-200: #c4d9fb;
--color-primary-300: #9ec2fd;
--color-primary-400: #69a0fa;
--color-primary-500: #3b82f6;
--color-primary-600: #0866ea;
--color-primary-700: #0056cd;
--color-primary-800: #0046a9;
--color-primary-900: #123e85;
--color-primary-950: #0f2850;
}In deine CSS-Datei einfügen, direkt nach dem Import von Tailwind.
Was ist eine Tailwind-Farbpalette?
Tailwind CSS ordnet jede Farbe in elf Stufen an, von 50 (fast weiß) bis 950 (fast schwarz).
Aus dem Namen und der Stufe entstehen die Klassen, mit denen du gestaltest, etwa bg-primary-100, text-primary-900 oder border-primary-300. Eine eigene Markenfarbe brauchst du daher nicht nur als einen
Wert, sondern als ganze Reihe. Der Generator baut sie aus einer einzigen Farbe.
Wofür welche Stufe gedacht ist
| Stufen | Typischer Einsatz |
|---|---|
| 50, 100 | Seitenhintergründe, helle Flächen, Badges |
| 200, 300 | Rahmen, Trennlinien, Hover-Flächen |
| 400, 500 | Akzente, Icons, Diagramme, Fokus-Ringe |
| 600, 700 | Buttons und Links auf hellem Grund, Hover-Zustände |
| 800, 900, 950 | Überschriften, Fließtext, dunkle Flächen im Dunkelmodus |
So gehst du vor
- Basisfarbe eintragen. Deine Farbe bleibt unverändert auf einer der Stufen stehen.
- Namen wählen, zum Beispiel
primaryoderaccent. Umlaute und Leerzeichen werden automatisch bereinigt. - Vorschau und Kontrast prüfen. Sitzt deine Farbe auf der falschen Stufe, wählst du eine andere Ankerstufe.
- Code kopieren. Für Tailwind v4 fügst du den
@theme-Block in deine CSS-Datei ein, für v3 die Werte in dietailwind.config.js.
Beispiel
Deine Marke nutzt ein kräftiges Blau. Du gibst #3b82f6 ein und nennst die Farbe primary. Danach schreibst du im Projekt bg-primary-600 hover:bg-primary-700 text-white für einen Button. Für den
Dunkelmodus nimmst du dark:bg-primary-500. Ob die Schrift auf der Fläche genug
Kontrast hat, siehst du direkt an der Zahl unter der Stufe.
Mehr Helfer für deine Website
Vor dem Livegang lohnt ein Blick auf die Vorschau beim Teilen mit dem Metadaten-Checker. Schwere Bilder verkleinerst du lokal mit dem Bilder-Komprimierer, und Kampagnenlinks baut der UTM-Link-Builder.
Häufige Fragen
Was bedeuten die Stufen 50 bis 950?
Tailwind benennt jede Farbe in elf Stufen von sehr hell (50) bis sehr dunkel (950). Die Mitte um 500 ist der typische Akzentton, 50 bis 200 eignen sich für Flächen und Hintergründe, 600 bis 700 für Buttons und Links auf hellem Grund, 900 und 950 für Text und dunkle Flächen.
Welche Stufe bekommt meine Farbe?
Standardmäßig die Stufe, deren Helligkeit deiner Farbe am nächsten liegt. Ein mittleres Blau landet bei 500, ein sehr helles Gelb eher bei 200. Deine Farbe bleibt dabei unverändert. Mit der Ankerstufe kannst du sie stattdessen selbst auf eine andere Stufe legen.
Wie wird die Palette berechnet?
Der Generator rechnet im Farbraum OKLCH. Der Farbton bleibt erhalten, die Helligkeit folgt der Kurve der Tailwind-Standardfarben, die Sättigung steigt zur Mitte hin an und fällt zu den Enden wieder ab. Dunkle Gelbtöne drehen leicht Richtung Orange, damit sie nicht olivgrün wirken. Was außerhalb von sRGB liegt, wird auf die nächste darstellbare Farbe reduziert.
Warum sieht meine Palette anders aus als bei anderen Generatoren?
Jeder Generator nutzt eigene Kurven, und die offizielle Tailwind-Palette ist von Hand gestaltet. Die berechnete Palette ist ein sauberer Startpunkt. Passe einzelne Stufen im Code nach, wenn du für Marke oder Kontrast einen bestimmten Ton brauchst.
Was ist der Unterschied zwischen Tailwind v4 und v3?
Tailwind v4 wird direkt in der CSS-Datei konfiguriert: Farben stehen in einem @theme-Block als Variablen. Tailwind v3 liest sie aus der Datei tailwind.config.js. Beide Varianten erzeugen dieselben Klassen wie bg-primary-500 oder text-primary-700.
Was zeigen die Kontrastwerte?
Die Zahl ist das Kontrastverhältnis der besseren Schriftfarbe (Weiß oder Schwarz) auf der jeweiligen Stufe nach WCAG. Ab 4,5:1 gilt normaler Text als gut lesbar (AA), ab 7:1 als sehr gut (AAA), große Schrift genügt schon ab 3:1. Kontrast ist auch beim Barrierefreiheitsstärkungsgesetz (BFSG) ein Thema. Das Tool ersetzt aber keine vollständige Prüfung und keine Rechtsberatung.
Werden meine Farben gespeichert oder hochgeladen?
Nein. Die gesamte Berechnung läuft in deinem Browser. Es gibt keine Anmeldung, keinen Server-Aufruf und kein Speichern.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.