Tailwind-CSS-Farbabstufungen
Erzeugen Sie die 11 Tailwind-CSS-Abstufungen (50 bis 950) einer Farbe und kopieren Sie den Code für Tailwind v4, v3 oder CSS-Variablen.
Klicken Sie auf eine Abstufung, um ihren Code zu kopieren. Ihre Farbe liegt auf der Stufe mit der ähnlichsten Helligkeit.
Alles läuft in Ihrem Browser: Es werden keine Daten gesendet.
Über dieses Tool
Dieser Generator für Tailwind-CSS-Farbabstufungen erstellt aus einer einzigen Farbe eine vollständige Skala mit 11 Stufen von 50 bis 950, genau wie die integrierten Tailwind-Farben. Ihre Farbe wird auf die Stufe mit der ähnlichsten Helligkeit gesetzt, die übrigen werden im OKLCH-Farbraum mit gleichem Farbton berechnet. Ideal, um eine Markenfarbe in eine Palette für ein Webprojekt zu verwandeln.
Geben Sie der Farbe einen Namen (standardmäßig brand) und wählen Sie das Codeformat: einen @theme-Block für Tailwind v4 mit oklch()-Werten, ein Objekt für tailwind.config.js in Tailwind v3, CSS-Variablen oder JSON. Ein Klick auf eine Abstufung kopiert ihren HEX-Code. Die Schaltfläche „Zufällig“ schlägt eine Ausgangsfarbe vor, der Link zum Teilen speichert Ihre Farbe.
- 11 Abstufungen von 50 bis 950
- Tailwind-v4-Code (@theme) mit oklch()-Werten
- Tailwind-v3-Konfiguration, CSS-Variablen oder JSON
- Frei wählbarer Farbname im Code
- HEX-Code jeder Stufe per Klick kopieren
So funktioniert es
- Geben Sie Ihre „Grundfarbe“ als HEX ein oder wählen Sie sie im Farbwähler.
- Tragen Sie den „Farbnamen“ für den Code ein.
- Wählen Sie das „Codeformat“: Tailwind v4, Tailwind v3, CSS-Variablen oder JSON.
- Klicken Sie auf „Kopieren“ und fügen Sie den Code in Ihr Projekt ein.
Häufige Fragen
Wird meine Farbe an einen Server gesendet?
Nein. Die Abstufungen werden in Ihrem Browser berechnet, es werden keine Daten gesendet. Die Grundfarbe steht nur in der Seitenadresse für den Link zum Teilen.
Ist der Tailwind-Abstufungsgenerator kostenlos?
Ja, er ist kostenlos und ohne Konto oder Registrierung nutzbar.
Was unterscheidet die Formate Tailwind v4 und v3?
Das v4-Format erzeugt einen @theme-Block mit den Variablen --color-name-50 bis --color-name-950 in oklch(). Das v3-Format erzeugt ein colors-Objekt für tailwind.config.js mit HEX-Codes.
Warum ist meine Farbe nicht immer Stufe 500?
Das Tool setzt Ihre Farbe auf die Stufe mit der ähnlichsten Helligkeit: Eine helle Farbe kann Stufe 200 werden, eine dunkle Stufe 800. Ihr exakter Code bleibt an dieser Position erhalten und ist als „Ihre Farbe“ markiert.