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.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.