DeutschDE

Farbskalen-Generator für Tailwind CSS (50–950)

Wählen Sie eine Grundfarbe und einen Namen – Sie erhalten alle Abstufungen von 50 bis 950 samt fertiger Konfiguration.

Ihre Texte und Dateien bleiben in Ihrem Browser – nichts wird an einen Server gesendet.

Klicken Sie auf ein Farbfeld, um den HEX-Wert zu kopieren. Die Zahl ist der Kontrast der besser lesbaren Textfarbe (Weiß oder Schwarz) darauf.

Tailwind v4 (@theme)
Tailwind v3 (tailwind.config.js)
Vorschau
Gespeichert. Ihre Änderungen sind jetzt aktiv.
Jetzt startenMehr erfahrenNeu

So funktioniert’s

  1. Wählen Sie eine Grundfarbe oder geben Sie einen HEX-Code ein und legen Sie den Namen fest, den Sie in Klassennamen verwenden, etwa brand.
  2. Die Stufen von 50 (am hellsten) bis 950 (am dunkelsten) werden nach OKLCH-Helligkeit verteilt. Ist „Meine Farbe in der nächstgelegenen Stufe behalten“ aktiv, erscheint Ihre Farbe unverändert in der Palette.
  3. Für v4 fügen Sie den @theme-Block in Ihr CSS ein, für v3 den Abschnitt colors in tailwind.config.js. Danach nutzen Sie Klassen wie bg-brand-500.
  4. In der Vorschau sehen Sie die Palette an einer Schaltfläche, einem Badge und einem Hinweisfeld.

Häufige Fragen

Warum wird die Palette in OKLCH berechnet?

OKLCH beruht auf der wahrgenommenen Helligkeit. Dadurch wirken die Stufen gleichmäßig, und Farben wie Gelb und Blau springen nicht in der Helligkeit. Auch die Standardfarben von Tailwind v4 sind in oklch() angegeben.

Entspricht das den eingebauten Tailwind-Farben?

Nein. Das Tool nutzt eigene Kurven für Helligkeit und Buntheit (Chroma), daher weichen die Werte von der offiziellen Palette ab. Es dient dazu, aus Ihrer eigenen Markenfarbe schnell eine ähnliche Skala zu bauen.

Was passiert mit Farben, die der Bildschirm nicht darstellen kann?

Helligkeit und Farbton bleiben erhalten, nur die Buntheit wird verringert, bis die Farbe in sRGB passt. Sehr gesättigte Farben können daher in einigen Stufen etwas ruhiger wirken.

Tailwind CSS ist eine Marke der Tailwind Labs Inc. Dieses Tool steht in keiner Verbindung zu Tailwind Labs und wird nicht von Tailwind Labs unterstützt.

Ähnliche Tools

FarbwählerHEX, RGB, HSL und CMYK auf einen BlickKontrast-CheckerKontrastverhältnis mit AA- und AAA-ErgebnisCSS-FarbverlaufLineare, radiale und konische VerläufeASCII-Art-GeneratorText und Fotos als Zeichenkunst

Alle Tools