Tailwind-Farbgenerator
Erstelle eine Tailwind-Skala 50-950 aus einer Markenfarbe.
Was diese Seite abdeckt
Diese Seite erklärt den Ablauf und verlinkt direkt auf den passenden Bereich des Chromaforge-Haupttools.
- Generiere Paletten aus einer Basisfarbe.
- Prüfe Kontrast vor dem Veröffentlichen von UI-Text.
- Exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.
- Läuft lokal im Browser.
Wie es funktioniert
Tailwind CSS organisiert Farben in Skalen mit 11 Nuancen: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 und 950. Nuance 500 ist in der Regel die "Basisfarbe", niedrigere Nuancen sind heller und hohere dunkler.
Chromaforge nimmt deine Markenfarbe und platziert sie automatisch in der Skala, dann berechnet es die 10 weiteren Nuancen durch konsistente Anpassung von Helligkeit und Sattigung. Das Ergebnis folgt perceptueller Logik: Die Helligkeitsschritte sind nicht linear, sondern so kalibriert, dass sie visuell aquidistant wirken.
Der Export erzeugt direkt den Konfigurationsblock für tailwind.config.js:
colors-Block fertig zum Einfugen in deine Tailwind 3- oder 4-Konfiguration.- Anpassbare Variablennamen (brand, primary, accent...).
- Echtzeit-Vorschau aller 11 Nuancen mit Hexadezimalcode.
- RGB-Werte für Tailwinds Opazitats-Utilitys (
bg-brand-500/50).
Falls deine Ausgangsfarbe nicht genau auf Nuance 500 fallt, passt Chromaforge das Mapping an, um deine Originalfarbe bestmoglich zu erhalten.
Praktische Beispiele
Warum eine eigene Tailwind-Skala generieren statt die Standardfarben zu verwenden?
- Einzigartige Markenfarbe: Das Violett deines Logos ist nicht das
purple-500von Tailwind. Generiere deine eigenebrand-Skala für konsistente Utility-Klassen uberall. - Multi-Tenant-Thematisierung: Jeder Kunde hat seine Primarfarbe. Generiere eine Skala pro Mandant und injiziere sie uber CSS-Variablen.
- shadcn/ui-Komponenten: shadcn verwendet HSL-CSS-Variablen. Exportiere die HSL-Werte jeder Nuance und fuge sie in deine
globals.cssein. - Migration aus einem Figma-Design: Du hast eine Figma-Palette mit 8 Nuancen? Regeneriere sie als 11 Tailwind-kompatible Nuancen.
FAQ — Tailwind-Farben
Tailwind 4 hat die Farbverwaltung geandert. Ist dieses Tool kompatibel?
Ja. Tailwind CSS v4 verwendet nativ CSS-Variablen in der CSS-Datei statt einer JS-Konfigurationsdatei. Chromaforge kann deine Farben als CSS Custom Properties exportieren (--color-brand-500: oklch(...)), die direkt mit der neuen Tailwind-4-Syntax kompatibel sind. Wähle beim Export das Format "CSS-Variablen".
Kann ich mehrere Skalen gleichzeitig generieren?
Im Chromaforge-Haupttool kannst du mehrere Basisfarben definieren (Primarfarbe, Sekundarfarbe, Akzent, Neutral) und alles in einem einzigen Konfigurationsblock exportieren. Jede Farbe erzeugt ihre eigene Skala 50-950.
Welche Nuance eignet sich für Texte und Hintergrunde?
Die Tailwind-Konvention empfiehlt Nuancen 700-900 für Text auf hellem Hintergrund und 100-300 für Text auf dunklem Hintergrund. Für Oberflachengrundfarben sind 50-100 sehr hell, 200-300 geben eine leichte Toenung. Validiere immer mit dem Kontrastprüfer vor der Integration.
Unterstuetzt das Tool oklch-Farben für Tailwind 4?
Chromaforge rechnet intern in HSL und sRGB. Der Export als oklch ist für Tailwind 4 verfugbar. Die Konvertierung stellt sicher, dass Farben visuell konsistent bleiben, aber bei erweiterten P3-Gamuts konnen kleine Anpassungen notwendig sein.