Wie baut der Tailwind Color Generator die 50-950 Skala?

Er konvertiert deine Farbe zu OKLCH, behält den Farbton, rampt die Helligkeit über die elf Tailwind-Schritte und verjüngt die Chroma zu den Extremen hin. OKLCH ist wahrnehmungsgleichmäßig, sodass jeder Schritt gleichmäßig verteilt aussieht, statt sich in den Mitten zu häufen, wie es einfache HSL-Rampen tun.

Warum landet meine Markenfarbe auf 400 oder 600 statt auf 500?

Der Generator rastet deine Eingabe auf den Schritt ein, dessen Zielhelligkeit ihr am nächsten ist, und bewahrt deine genaue Farbe dort. Eine hellere Markenfarbe verankert sich näher an 300-400 und eine dunklere näher an 600-700, sodass die Skala immer die Farbe enthält, die du eingegeben hast.

Was bedeuten die Kontrastzahlen auf jedem Farbfeld?

Es sind WCAG-2.x-Kontrastverhältnisse dieser Abstufung gegen reines Schwarz und reines Weiß. Ein grünes Badge ist mindestens 4.5:1 (AA für normalen Text) und Bernstein ist mindestens 3:1 (AA für großen Text oder UI). Nutze sie, um Text- und Hintergrundpaarungen zu wählen.

Kann ich rgb(), hsl() oder eine benannte Farbe statt HEX einfügen?

Ja. Jeder CSS-Farb-String funktioniert — #7c3aed, rgb(124 58 237), hsl(262 83% 58%) oder ein Name wie rebeccapurple. Das Tool parst ihn, konvertiert zu OKLCH und baut die Skala auf dieselbe Weise.

Wie verwende ich die Ausgabe in meinem Projekt?

Kopiere den tailwind.config-Block in theme.extend.colors und referenziere Klassen wie bg-brand-500 oder text-brand-800. Oder kopiere die CSS-Variablen-Version und verwende var(--brand-500) überall in reinem CSS. Benenne den Schlüssel um, indem du das Farbnamen-Feld änderst.

Werden die Farben, die ich eingebe, irgendwohin gesendet?

Nein. Die ganze Skala — das Parsen, die OKLCH-Berechnung, die Kontrastverhältnisse und beide Ausgabeformate — wird in deinem Browser berechnet. Die Markenfarbe, die du tippst oder wählst, verlässt niemals dein Gerät und wird nicht zu ArrayKit hochgeladen.

Tailwind Color Generator

Verwandle eine Markenfarbe in eine komplette 50-950 Tailwind-Farbskala in OKLCH, mit WCAG-Kontrast pro Abstufung, direkt in deinem Browser.

Der Tailwind Color Generator läuft vollständig in deinem Browser. Die Markenfarbe, die du eingibst, und die erzeugten Abstufungen werden auf deinem Gerät berechnet und niemals zu ArrayKit hochgeladen.

CSS Color Converter öffnen

Über Tailwind Color Generator

Der Tailwind Color Generator verwandelt eine einzelne Markenfarbe in eine komplette 50, 100, 200 … 900, 950 Farbskala, die du direkt in tailwind.config einfügen kannst. Statt HEX-Werte zu raten, interpoliert er die Helligkeit in OKLCH — einem wahrnehmungsgleichmäßigen Farbraum — sodass sich jeder Schritt gleichmäßig verteilt anfühlt, und er rastet deine Eingabe auf den nächstgelegenen Schritt ein, sodass die Palette tatsächlich deine genaue Markenfarbe enthält. Jedes Farbfeld zeigt sein HEX plus das WCAG-Kontrastverhältnis gegen Schwarz und gegen Weiß, sodass du auf einen Blick erkennst, welche Abstufungen für Text sicher sind. Kopiere die ganze Skala als theme.colors-Block oder als CSS-Custom-Properties. Füge jede CSS-Farbe ein — HEX, rgb(), hsl() oder eine benannte Farbe wie rebeccapurple. Alles wird auf deinem Gerät berechnet; die Farben, die du eingibst, verlassen niemals den Browser.

Funktionen

Erzeugt eine komplette 50-950 Tailwind-Skala aus einer Markenfarbe
Helligkeit in OKLCH interpoliert für wahrnehmungsgleichmäßige Schritte
Eingabefarbe eingerastet und am nächstgelegenen Schritt bewahrt
WCAG-Kontrast pro Abstufung gegen Schwarz und Weiß, mit AA-Badges
Akzeptiert HEX, rgb(), hsl() und benannte CSS-Farben
Kopiere einen einfügefertigen tailwind.config theme.colors-Block
Kopiere dieselbe Skala als :root CSS-Custom-Properties
Klicke jedes Farbfeld an, um sein HEX zu kopieren; Live-Verlaufsvorschau der Rampe

So verwendest du Tailwind Color Generator

Gib deine Markenfarbe ein oder wähle sie (HEX, rgb(), hsl() oder ein Name)
Setze einen Farbnamen — er wird zum Schlüssel, z. B. brand oder accent
Lies die WCAG-Kontrast-Badges pro Abstufung, um textsichere Schritte zu erkennen
Wechsle zwischen tailwind.config- und CSS-Variablen-Ausgabe
Kopiere den Block oder klicke ein einzelnes Farbfeld an, um sein HEX zu holen

Beispiel

Eingabe

#7c3aed  (name: brand)

Ausgabe

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

Ein violettes HEX wächst zu einer OKLCH-abgestimmten 50-950 Skala, verschlüsselt als brand.

Häufige Fehler & Fehlerbehebung

Die Abstufung 500 entspricht nicht genau meinem Marken-HEX. — Deine Farbe ist über die Helligkeit am nächstgelegenen Schritt verankert, der 400 oder 600 statt 500 sein kann. Suche das Farbfeld, dessen HEX deiner Eingabe entspricht — das ist der Ankerschritt, der sie originalgetreu reproduziert.
Die Abstufung 50 oder 950 wirkt etwas ausgewaschen oder trüb. — Die Chroma wird zu den Extremen hin verjüngt, damit Nahe-Weiß und Nahe-Schwarz glaubwürdig bleiben. Wenn du mehr Sättigung an den Enden möchtest, starte von einer etwas chromatischeren Markenfarbe.
Nach dem Tippen einer Farbe wird nichts erzeugt. — Der Wert muss eine parsbare CSS-Farbe sein. Verwende ein vollständiges HEX wie #7c3aed, eine rgb()/hsl()-Funktion oder einen CSS-Farbnamen; ein partielles HEX wie #7c ist noch nicht gültig.
Heller Text auf meinen mittleren Abstufungen besteht die Kontrastprüfung nicht. — Verwende die Badges pro Abstufung: Grün erfüllt WCAG AA (4.5:1) und Bernstein erfüllt AA für großen Text (3:1). Wähle einen dunkleren Schritt (700-900) für Fließtext auf hellem Hintergrund.

Häufig gestellte Fragen

Wie baut der Tailwind Color Generator die 50-950 Skala?: Er konvertiert deine Farbe zu OKLCH, behält den Farbton, rampt die Helligkeit über die elf Tailwind-Schritte und verjüngt die Chroma zu den Extremen hin. OKLCH ist wahrnehmungsgleichmäßig, sodass jeder Schritt gleichmäßig verteilt aussieht, statt sich in den Mitten zu häufen, wie es einfache HSL-Rampen tun.
Warum landet meine Markenfarbe auf 400 oder 600 statt auf 500?: Der Generator rastet deine Eingabe auf den Schritt ein, dessen Zielhelligkeit ihr am nächsten ist, und bewahrt deine genaue Farbe dort. Eine hellere Markenfarbe verankert sich näher an 300-400 und eine dunklere näher an 600-700, sodass die Skala immer die Farbe enthält, die du eingegeben hast.
Was bedeuten die Kontrastzahlen auf jedem Farbfeld?: Es sind WCAG-2.x-Kontrastverhältnisse dieser Abstufung gegen reines Schwarz und reines Weiß. Ein grünes Badge ist mindestens 4.5:1 (AA für normalen Text) und Bernstein ist mindestens 3:1 (AA für großen Text oder UI). Nutze sie, um Text- und Hintergrundpaarungen zu wählen.
Kann ich rgb(), hsl() oder eine benannte Farbe statt HEX einfügen?: Ja. Jeder CSS-Farb-String funktioniert — #7c3aed, rgb(124 58 237), hsl(262 83% 58%) oder ein Name wie rebeccapurple. Das Tool parst ihn, konvertiert zu OKLCH und baut die Skala auf dieselbe Weise.
Wie verwende ich die Ausgabe in meinem Projekt?: Kopiere den tailwind.config-Block in theme.extend.colors und referenziere Klassen wie bg-brand-500 oder text-brand-800. Oder kopiere die CSS-Variablen-Version und verwende var(--brand-500) überall in reinem CSS. Benenne den Schlüssel um, indem du das Farbnamen-Feld änderst.
Werden die Farben, die ich eingebe, irgendwohin gesendet?: Nein. Die ganze Skala — das Parsen, die OKLCH-Berechnung, die Kontrastverhältnisse und beide Ausgabeformate — wird in deinem Browser berechnet. Die Markenfarbe, die du tippst oder wählst, verlässt niemals dein Gerät und wird nicht zu ArrayKit hochgeladen.