Tailwind-Farbpaletten-Generator.

Gib eine Farbe ein und erhalte eine Skala im Tailwind-Stil mit elf Stufen von 50 bis 950, in OKLCH berechnet, so wie die Palette von Tailwind v4 selbst. Deine Farbe bleibt genau so, wie du sie eingegeben hast, auf der Stufe, die ihrer Helligkeit am nächsten liegt. Das Tool läuft in deinem Browser, und nichts, was du eingibst, wird hochgeladen.

FarbeFarbname

Deine Farbe ist Stufe 500.

50#F1F6FD
100#E0EBFB
200#C6DAFA
300#9EC2FB
400#659FFD
500#3B82F6
600#2873EA
700#215FC3
800#1E50A0
900#1F4482
950#0C2246

@theme {
  --color-brand-50: oklch(0.971 0.011 256.695);
  --color-brand-100: oklch(0.937 0.025 257.646);
  --color-brand-200: oklch(0.884 0.049 259.79);
  --color-brand-300: oklch(0.809 0.09 259.44);
  --color-brand-400: oklch(0.705 0.151 259.626);
  --color-brand-500: oklch(0.623 0.188 259.815);
  --color-brand-600: oklch(0.578 0.195 259.687);
  --color-brand-700: oklch(0.505 0.169 259.846);
  --color-brand-800: oklch(0.445 0.141 259.626);
  --color-brand-900: oklch(0.395 0.113 260.11);
  --color-brand-950: oklch(0.257 0.073 259.785);
}

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

So erstellst du eine Tailwind-Farbskala

Gib deine Farbe ein. Wähle sie über das Farbfeld oder gib sie als HEX, rgb(), hsl() oder oklch() ein. Sie startet bei #3B82F6.
Benenne die Skala. Der Name wird Teil jeder Variable, wie in --color-brand-500, und lautet anfangs brand. Er wird kleingeschrieben, und alles außer Buchstaben, Ziffern und Bindestrichen wird zu einem Bindestrich.
Lies die Skala ab. Elf Farbfelder reichen von 50, dem hellsten, bis 950, dem dunkelsten, jeweils mit HEX-Code und einem Button zum Kopieren. Deine Farbe ist umrandet, und die Seite sagt dir, welche Stufe sie ist, etwa „Deine Farbe ist Stufe 500.“
Kopier den Code. Der Tab Tailwind v4 @theme und der Tab CSS-Variablen listen beide --color-<name>-<step> für alle elf Stufen als oklch()-Werte auf, der erste innerhalb von @theme, der zweite innerhalb von :root.

So ist die Skala aufgebaut

Die Helligkeit folgt der Kurve der Palette von Tailwind v4 selbst, entnommen aus deren Rot-Skala: etwa 0,97 bei Stufe 50, 0,64 bei 500 und 0,26 bei 950.
Das Chroma, also wie lebhaft die Farbe ist, folgt derselben Kurve dieser Skala, die bei 600 ihren Höhepunkt hat, und wird an das Chroma deiner Farbe angepasst.
Der Farbton bleibt auf jeder Stufe der Farbton deiner Farbe.
Deine Farbe sitzt unverändert auf der Stufe, die ihrer eigenen Helligkeit am nächsten liegt. Beim Standardwert #3B82F6 ist das Stufe 500.
Stufen, die sRGB nicht darstellen kann, werden durch ein geringeres Chroma in den darstellbaren Bereich zurückgeholt, sodass jeder HEX-Code auf den Farbfeldern eine Farbe ist, die ein Bildschirm anzeigen kann.

In Tailwind und mit Codex verwenden

In einem Tailwind-v4-Projekt fügst du den @theme-Block in die CSS-Datei ein, die @import "tailwindcss" enthält. Jede Variable --color-brand-* wird zu Klassen: bg-brand-500, text-brand-700, border-brand-200 und so weiter.

Eine gängige Aufteilung der Stufen: 50 bis 200 für Tönungen und Hintergründe, 500 bis 600 für Buttons und Links, 700 bis 900 für Text auf hellem Hintergrund und 950 für den dunkelsten Text. Welche Stufe dunkel genug für weißen Text ist, hängt vom Farbton ab, prüf also jede Kombination im Kontrast-Checker.

Damit Codex die Skala überall verwendet und nicht davon abweicht, gib ihm den Block und die Regeln:

Skala hinzufügen

Füge diese Skala der globalen CSS-Datei unseres Tailwind-v4-Projekts hinzu, innerhalb des vorhandenen @theme-Blocks, falls es einen gibt: [@theme-Block einfügen]. Verwende brand-600 für primäre Buttons und Links, brand-700 beim Hover, brand-50 für getönte Hintergründe und brand-950 für den dunkelsten Text. Füge keine weiteren Markenfarben hinzu und prüfe, dass Text auf jeder dieser Kombinationen mindestens 4,5:1 Kontrast erreicht. Halte danach in der DESIGN.md fest, welche Stufe wofür verwendet wird.

Häufige Fragen

Ist das Tool kostenlos?

Ja. Es ist kostenlos, braucht keine Anmeldung, und du kannst beliebig viele Skalen erstellen.

Werden meine Farben hochgeladen?

Nein. Die Skala entsteht in deinem Browser und wird nirgendwo gesendet oder gespeichert. Die Website zählt nur, dass das Tool verwendet wurde, nie die Farben.

Stimmt sie mit den eingebauten Farben von Tailwind überein?

Nicht genau. Das Tool wendet die Helligkeitskurve der Rot-Skala von Tailwind v4 auf jeden Farbton an, die Stufen sind also gleichmäßig verteilt und wirken vertraut, aber Tailwind stimmt jede seiner eigenen Farben einzeln ab. Ein generiertes Blau kommt dem Blau von Tailwind sinngemäß nahe, ist aber nicht identisch.

Funktioniert das mit Tailwind v3?

Der @theme-Tab ist für Tailwind v4. Für v3 kopierst du die HEX-Codes aus den Farbfeldern in den Abschnitt colors der tailwind.config, unter einem Namen wie brand, mit den Stufennummern als Schlüsseln.