Tailwind Shades Generator
Aus einer Hex-Farbe eine konsistente 11-stufige Skala erzeugen. OKLCh-basiert, Hue bleibt konstant.
colors: {
brand: {
50: '#f5f5f9',
100: '#ebebef',
200: '#d0d0d5',
300: '#b4b4b8',
400: '#929296',
500: '#717175',
600: '#58585b',
700: '#424245',
800: '#2d2d31',
900: '#1a1a1d',
950: '#09090b',
},
}So funktioniert das Tool
Tailwind nutzt eine 11-stufige Helligkeitsskala für jede Farbe - von 50 (fast weiß) über 500 (Basis) bis 950 (fast schwarz). Wenn du deine eigene Brand-Farbe ins Tailwind-Theme integrieren willst, brauchst du genau diese 11 Stufen. Unser Generator nimmt deine Hex-Farbe als 500er-Mitte und rechnet die anderen 10 Stufen via OKLCH-Lightness-Interpolation aus - perceptuell gleichmäßig, nicht naiv linear, sodass das Ergebnis aussieht wie Tailwinds eigene Slate-, Zinc- oder Indigo-Skalen.
Typische Anwendungsfälle
Brand-Farbe in tailwind.config.ts integrieren
Die Hex deiner Primärfarbe rein, 11 Hex-Werte als brand-50 bis brand-950 raus, direkt ins extend.colors-Objekt.
CSS-Variablen für Theme-Switch
Light- und Dark-Mode-Variante derselben Brandfarbe: du brauchst beide Skalen - die Tints kommen ins :root, die Shades ins .dark.
shadcn/ui-Theme erstellen
Das shadcn-Theme-System nutzt 11-stufige Skalen für Akzent-Farben. Generator-Output in das Theme-Config-Schema einbauen.
Brand-Konsistenz prüfen
Wenn deine Designs „eine Farbe in fünf Tönen” verwenden, die jeweils zufällig vom Designer per Augenmaß gewählt wurden - Skala generieren, prüfen, ob die Designs in die 11-Stufen-Skala passen.
FAQ
Häufige Fragen
Wie wird die Skala berechnet?
Die Basis-Farbe wird in OKLCH konvertiert. Dann werden 11 Lightness-Stufen gleichmäßig verteilt - typisch 97 % (50), 93 % (100), 86 %, 78 %, 69 %, 56 % (500, deine Basis), 47 %, 39 %, 31 %, 23 %, 16 % (950). Hue und Chroma bleiben konstant. OKLCH-Interpolation ist perceptuell linear - der Sprung von 100 zu 200 sieht gleich groß aus wie von 800 zu 900.
Warum nicht einfach HSL-Lightness anpassen?
HSL ist nicht perceptuell linear - eine HSL-Lightness von 50 % wirkt je nach Hue mal heller, mal dunkler. Gelb bei L=50 wirkt strahlend, Blau bei L=50 wirkt mittel. OKLCH (eine Variante des CIELAB-Farbraums) gleicht das aus. Tailwind nutzt seit Version 3.4 ebenfalls perceptuelle Skalen.
Sind die Werte WCAG-konform?
Die Skala selbst hat keine WCAG-Eigenschaft - das hängt davon ab, welche zwei Stufen du als Text und Hintergrund kombinierst. Faustregel: 50 mit 700+ und 100 mit 600+ schaffen meist AA-Normal (4.5:1). 500 auf Weiß ist je nach Hue oft zu schwach - nimm eher 600 oder 700 für Body-Text.
Kann ich auch eine andere Stufe als 500 als Basis wählen?
Aktuell wird der Input immer als 500 (mittlere Stufe) interpretiert. Wenn deine Brand-Farbe eher wie ein 700 wirkt (dunkel), kannst du sie als 500 reinwerfen, die ganze Skala generieren und im Theme ab 300 oder 400 als „Light”-Stufen weiterverwenden. Ein dedizierter „pick another anchor”-Modus ist erweiterbar.
Liefert das Tool auch Pantone- oder CMYK-Werte?
Nein, nur Hex/RGB/HSL (digital). Print-Farbsysteme brauchen eine separate Konversion über ein Print-spezifisches Tool oder direkt im Layout-Programm (InDesign, Affinity Publisher).
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.