Ein UI-Farbsystem ist eine Reihe von Farbvarianten, die aus einer einzigen Ausgangsfarbe erstellt werden. Es bietet konsistente Hell-Dunkel-Skalen für Design-Token, Schaltflächen, Hintergründe und Textfarben.
Wählen Sie eine Saatfarbe und einen Stil (Tailwind oder Material). Das Tool generiert eine komplette 10-stufige Palette von hell (50) bis dunkel (900), perfekt für Designsysteme.
Frequently Asked Questions
Q: Was ist ein Design-Token?
Was ist ein Design-Token? Ein Design-Token ist ein benannter Wert, der ein Designattribut wie eine Farbe speichert und im gesamten Designsystem konsistent verwendet wird.
Q: Warum brauche ich 10 Farbtöne?
Warum brauche ich 10 Farbtöne? Unterschiedliche UI-Elemente erfordern unterschiedliche Kontraststufen. Eine 10-stufige Skala bietet Flexibilität für Hintergründe, Rahmen, Hover-Zustände und Text.
Q: Was ist eine Design-Token-Palette?
Was ist eine Design-Token-Palette? Eine Design-Token-Palette ist ein systematischer Satz von Farbvariablen (primär, sekundär, Oberfläche, Text), die aus einer einzelnen Markenfarbe generiert werden. Es sorgt für Konsistenz in Ihrer gesamten Benutzeroberfläche.
Q: Kann ich in andere Designsysteme als Tailwind exportieren?
Kann ich in andere Designsysteme als Tailwind exportieren? Ja, das Tool exportiert in benutzerdefinierte CSS-Eigenschaften, SCSS-Variablen und das Tailwind-Konfigurationsformat. Kopieren Sie das Format, das Ihrem Stapel entspricht.
Q: Wie gehe ich mit diesem Tool mit dem Dunkelmodus um?
Wie gehe ich mit diesem Tool mit dem Dunkelmodus um? Erstellen Sie zunächst Ihre Hellmodus-Palette und verwenden Sie dann dieselbe Ausgangsfarbe mit reduzierten Sättigungs- und Helligkeitswerten für den Dunkelmodus. Viele Designsysteme kehren die Oberflächen- und Textfarben um.