Zum Inhalt springen
Musterli

Tailwind-Farbpalette

Aus einer Farbe die elf Tailwind-Stufen 50 bis 950. Export für tailwind.config.js, @theme, OKLCH und HEX.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem Tailwind-Farbpalette

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

Tailwind CSS ordnet jede Farbe in elf Stufen von 50 (sehr hell) bis 950 (sehr dunkel). Dieser Generator berechnet eine solche Skala aus deiner Markenfarbe, die Farbe selbst liegt genau auf 500.

So geht’s

Wähl deine Grundfarbe, gib der Palette einen Namen und kopier den Code für tailwind.config.js oder den @theme-Block für Tailwind v4.

Tailwind-Farbpalette jetzt ausprobieren

Häufige Fragen

Funktioniert das mit Tailwind v4?
Ja. Der @theme-Export erzeugt Variablen wie --color-brand-500 in OKLCH, so wie Tailwind v4 sie verwendet. Für ältere Versionen gibt es den Export für tailwind.config.js.
Warum liegt meine Farbe auf 500?
Stufe 500 ist in Tailwind die Hauptfarbe. Die helleren und dunkleren Stufen folgen einer Helligkeitskurve, die sich an bekannten UI-Paletten orientiert.
Warum werden die Enden weniger gesättigt?
Sehr helle und sehr dunkle Farben wirken mit voller Sättigung schnell grell oder schmutzig. Mit dem Regler bestimmst du, wie stark die Sättigung abnimmt.
Was bedeutet OKLCH?
OKLCH beschreibt Farben über Helligkeit, Buntheit und Farbton so, wie das Auge sie wahrnimmt. Moderne Browser verstehen OKLCH direkt in CSS.

Fertige Farbpaletten

Über 30 Paletten nach Stimmung, mit HEX-, RGB- und OKLCH-Werten zum Kopieren.

Zur Palettensammlung

Passende Generatoren

Alle Generatoren in Farben