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 Chromoforge-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 höhere dunkler.
Chromoforge nimmt deine Markenfarbe und platziert sie automatisch in der Skala, dann berechnet es die 10 weiteren Nuancen durch konsistente Anpassung von Helligkeit und Sättigung. Das Ergebnis folgt perceptueller Logik: Die Helligkeitsschritte sind nicht linear, sondern so kalibriert, dass sie visuell äquidistant wirken.
Der Export erzeugt direkt den Konfigurationsblock für tailwind.config.js:
colors-Block fertig zum Einfügen in deine Tailwind 3- oder 4-Konfiguration.- Anpassbare Variablennamen (brand, primary, accent...).
- Echtzeit-Vorschau aller 11 Nuancen mit Hexadezimalcode.
- RGB-Werte für Tailwinds Opazitäts-Utilitys (
bg-brand-500/50).
Falls deine Ausgangsfarbe nicht genau auf Nuance 500 fällt, passt Chromoforge das Mapping an, um deine Originalfarbe bestmöglich 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 überall. - Multi-Tenant-Thematisierung: Jeder Kunde hat seine Primärfarbe. Generiere eine Skala pro Mandant und injiziere sie über CSS-Variablen.
- shadcn/ui-Komponenten: shadcn verwendet HSL-CSS-Variablen. Exportiere die HSL-Werte jeder Nuance und füge 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 geändert. Ist dieses Tool kompatibel?
Ja. Tailwind CSS v4 verwendet nativ CSS-Variablen in der CSS-Datei statt einer JS-Konfigurationsdatei. Chromoforge 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 Chromoforge-Haupttool kannst du mehrere Basisfarben definieren (Primärfarbe, Sekundärfarbe, 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 Hintergründe?
Die Tailwind-Konvention empfiehlt Nuancen 700-900 für Text auf hellem Hintergrund und 100-300 für Text auf dunklem Hintergrund. Für Oberflächengrundfarben sind 50-100 sehr hell, 200-300 geben eine leichte Tönung. Validiere immer mit dem Kontrastprüfer vor der Integration.