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
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.