UI-Farben: teste eine Tailwind-Palette in einer echten Oberfläche
Wähle eine Tailwind-Farbfamilie und sieh, wie sie auf Buttons, Diagrammen, Formularen, Karten und Badges wirkt. Passe die Hauptabstufungen an, erzeuge eine zufällige Palette und exportiere das Ergebnis.
So nutzt du die Farbvorschau
- 1
Familie wählen
Wähle in der oberen Leiste eine beliebige Farbfamilie. Die Seitenadresse speichert die gewählte Familie, sodass du den Link teilen kannst.
- 2
Abstufungen anpassen
Ändere 600 (Hauptfarbe), 500 (Sekundärfarbe) oder 200 (sanft) mit dem Farbwähler oder erzeuge eine zufällige Palette. Die ganze Oberfläche aktualisiert sich sofort.
- 3
Palette exportieren
Wenn sie dir gefällt, exportiere die komplette Skala von 50 bis 950 für Tailwind v4, Tailwind v3, Figma oder CSS. Klicke auf eine Abstufung der Skala, um sie zu kopieren.
Häufige Fragen
Um eine Palette angewendet zu sehen, bevor du sie in dein Projekt übernimmst: wie helle und dunkle Töne zusammenwirken, ob Buttons genug hervorstechen und ob Diagramme und Formulare gut lesbar sind.
600 für Aktionen und hervorgehobene Elemente, 500 für sekundäre Elemente und Diagramme, 100–200 für Hintergründe und sanfte Zustände und 700–800 für Text auf hellen Hintergründen.
Ja. Die Seitenadresse enthält die gewählte Familie, zum Beispiel ?family=yellow, und beim Öffnen des Links wird sie direkt geladen.
Du kannst die komplette Skala als Tailwind-v4-Variablen, Tailwind-v3-Konfiguration, Figma-Stile, CSS-Variablen oder nur als HEX-, RGB-, HSL- und OKLCH-Codes exportieren.