Design / Farbe

Generator für Tailwind-Farbskalen

Verwandle eine Markenfarbe in eine vollständige Tailwind-CSS-Palette von 50 bis 950, berechnet in OKLCH wie Tailwinds eigene Farben. Kopiere sie als Tailwind-4-Theme-CSS, Tailwind-3-Konfiguration oder CSS-Variablen.

Generator für Tailwind-Farbskalen: Jeder Farbton übernimmt für die jeweilige Stufe die Helligkeit, Buntheit und leichte Farbtonverschiebung aus Tailwinds eigenen Paletten. Diese Werte werden im OKLCH-Farbraum gemessen und so verschoben, dass deine Farbe genau auf ihrem Farbton landet. Grautöne folgen stattdessen den Tailwind-Graufamilien. Farben, die der sRGB-Farbumfang nicht darstellen kann, werden mit dem Gamut-Mapping-Verfahren aus CSS Color 4 angepasst – so wie es Browser tun. Die Tailwind-4-Ausgabe behält OKLCH-Werte bei, die anderen Formate verwenden Hex-Werte. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Alltagswerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
Generator für Tailwind-FarbskalenLokale Verarbeitung

Läuft vollständig in deinem Browser

50#f2f8ffoklch(97.6% 0.012 250.3)
100#dfecffoklch(93.9% 0.029 258.1)
200#bcd9ffoklch(87.6% 0.061 255.8)
300#8fbeffoklch(79.3% 0.106 256.6)
400#5e9cffoklch(69.6% 0.16 259.5)
500#3b82f6oklch(62.3% 0.188 259.8)
600#2668daoklch(54.2% 0.187 260.6)
700#1f57b6oklch(47.7% 0.163 260.6)
800#1f4997oklch(42.3% 0.137 261.4)
900#20417coklch(38.4% 0.109 261.4)
950#15274coklch(27.9% 0.073 263.2)

CSS (@theme)

@theme {
  --color-brand-50: oklch(97.6% 0.012 250.3);
  --color-brand-100: oklch(93.9% 0.029 258.1);
  --color-brand-200: oklch(87.6% 0.061 255.8);
  --color-brand-300: oklch(79.3% 0.106 256.6);
  --color-brand-400: oklch(69.6% 0.16 259.5);
  --color-brand-500: oklch(62.3% 0.188 259.8);
  --color-brand-600: oklch(54.2% 0.187 260.6);
  --color-brand-700: oklch(47.7% 0.163 260.6);
  --color-brand-800: oklch(42.3% 0.137 261.4);
  --color-brand-900: oklch(38.4% 0.109 261.4);
  --color-brand-950: oklch(27.9% 0.073 263.2);
}

Die Farbtöne folgen der in OKLCH gemessenen Helligkeits-, Buntheits- und Farbtonverschiebung der eigenen Tailwind-Paletten. Daher liegt eine aus Tailwinds blue-500 erstellte Skala nur wenige gerade wahrnehmbare Unterschiede von Tailwinds Blau entfernt. Farben außerhalb des sRGB-Bereichs werden mit der Farbumfang-Mapping-Methode aus CSS Color 4 in den Bereich gebracht.

Die Skala verwenden

Ein gängiges Muster verwendet 50–100 für Seiten- und Kartenhintergründe, 200–300 für Rahmen, 500–600 für Schaltflächen und Links, 700 für Hover-Zustände und 800–950 für Text auf hellen Hintergründen. Prüfe Text- und Hintergrundkombinationen mit dem Farbkontrastprüfer.

Um eine einzelne Farbe zwischen Hex, RGB, HSL und OKLCH umzuwandeln, verwende den Farbkonverter; um mit einem Foto zu beginnen, den Farbpaletten-Extraktor.

Tailwind 4 und OKLCH

Tailwind CSS 4 definiert seine Farben in OKLCH. Damit lassen sich Farben außerhalb des sRGB-Farbraums auf Bildschirmen mit großem Farbumfang beschreiben. Die Ausgabe von Tailwind 4 bleibt hier innerhalb von sRGB, sodass die Farben auf jedem Bildschirm gleich aussehen.

So benutzt du es

  1. Wähle deine Farbe aus oder füge ihren Hex-Code ein.
  2. Wähle, welchem Farbton sie entsprechen soll – normalerweise 500 – oder überlasse die Platzierung dem Generator.
  3. Kopiere den Code für Tailwind 4, Tailwind 3 oder einfache CSS-Variablen.

Datenschutz & Einschränkungen

Alles wird in deinem Browser erzeugt.

Ähnliche Tools

FarbumrechnerKontrast-PrüferPalette-Extraktor

Häufige Fragen

Warum OKLCH?

Gleiche Schritte bei der Helligkeit in OKLCH wirken für das Auge über alle Farbtöne hinweg gleich groß. Deshalb haben eine auf diese Weise erstellte Gelb- und eine Blauskala denselben Kontrast – mit HSL gelingt das nicht.

Welchem Farbton sollte meine Markenfarbe entsprechen?

Normalerweise 500 oder 600, denn dort verwendet Tailwind seine kräftigsten Farben. Eine sehr helle Farbe wie ein Pastellton passt besser zu 200 oder 300. Wähle Automatisch, damit der Farbton anhand seiner Helligkeit platziert wird.

Sind Texte auf diesen Farbtönen lesbar?

In der Regel benötigt weißer Text 600 oder dunklere Farbtöne und dunkler Text 400 oder hellere. Prüfe jedoch jedes Paar mit einem Kontrastprüfer.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig