Tailwind-Farbabstufungen-Generator
Erzeugen Sie aus einer HEX-Grundfarbe eine 11-stufige Farbskala im Tailwind-Stil (50-950) mit kopierbaren CSS-Variablen und JSON.
🔒 Läuft vollständig in Ihrem Browser — nichts wird hochgeladenEine praxistaugliche Farbskala erstellen
Eine einzelne Markenfarbe reicht für eine vollständige Oberfläche selten aus. Buttons brauchen Hover-Zustände, Karten helle Hintergründe, Rahmen einen dezenteren Farbton und Text manchmal einen dunkleren Begleiter. Dieser Tailwind-Farbabstufungen-Generator verwandelt einen HEX-Wert in eine vertraute 50-950-Skala, damit Sie schnell prüfen können, wie sich die Farbe auf hellen und dunklen Oberflächen verhält. Die erzeugten Werte sind deterministisch und leicht zu kopieren – ideal für Prototypen, Design-Reviews, CSS Custom Properties und die Dokumentation von Design-Tokens.
Das Tool nutzt HSL-Helligkeitsstufen, damit der Farbton erkennbar bleibt, während die Farbe zu sehr hellen Tönen und tiefen Schattierungen geführt wird. Es handelt sich nicht um einen offiziellen Tailwind-Algorithmus und er versucht auch nicht, die handabgestimmten Paletten von Tailwind exakt nachzubilden. Stattdessen erhalten Sie einen sauberen Ausgangspunkt, den Sie im Kontext anpassen können. Ist Ihre Grundfarbe bereits sehr hell oder sehr dunkel, betrachten Sie die mittleren Werte genau und entscheiden Sie, ob die Skala manuell nachgearbeitet werden muss.
Erzeugte Farbabstufungen in CSS verwenden
Kopieren Sie die CSS-Ausgabe, wenn Sie browserfertige Variablen wie --brand-500 und --brand-700 möchten. Kopieren Sie die JSON-Ausgabe, wenn Sie Tokens für eine Konfigurationsdatei, ein Style Dictionary oder eine Dokumentationsseite vorbereiten. In einer typischen Oberfläche eignen sich 50 und 100 für weiche Flächen, 200 und 300 für Rahmen oder Badges, 500 für die Hauptaktionsfarbe und 600 bis 800 für Hover-, Gedrückt- oder Textzustände. Die Werte 900 und 950 sind am kräftigsten; heben Sie sie für dunkle Themes oder stark betonte Elemente auf.
Kontrast prüfen, bevor Sie veröffentlichen
Farbskalen sind praktisch, garantieren aber nicht automatisch barrierefreien Text. Eine Farbe, die als Farbfeld ausgewogen wirkt, kann hinter kleinen Beschriftungen oder deaktivierten Steuerelementen beim Kontrast durchfallen. Testen Sie nach dem Kopieren einer Skala die tatsächlich verwendeten Kombinationen: Haupttext auf hellen Hintergründen, weißen Text auf Aktions-Buttons, Fokusringe um Eingabefelder und Rahmen gegenüber benachbarten Flächen. Betrachten Sie diesen Generator als ersten Schritt im Workflow eines Farbsystems und prüfen Sie die endgültigen Kombinationen vor der Veröffentlichung mit einem Kontrastprüfer.
So verwenden Sie
- Grundfarbe wählenWählen Sie die Marken- oder Akzentfarbe, die als Anker der Skala dienen soll.
- Skala prüfenSehen Sie sich jedes Farbfeld von 50 bis 950 an und prüfen Sie, ob das helle und das dunkle Ende brauchbar wirken.
- Tokens kopierenKopieren Sie die Skala als CSS Custom Properties oder als JSON für Ihr Projekt.