UI-Token-Generator
Wählen Sie eine Grundfarbe und erhalten Sie automatisch einen vollständigen UI-Token-Satz: Farbskalen, semantische Farben und einsatzbereite CSS-Variablen.
Grundfarbe
Wählen Sie die Primärfarbe zur Generierung aller UI-Token. Diese Farbe wird als Grundlage für die Erstellung der Farbskala und semantischer Farben verwendet.
Vorschau
Preview
Primary Button
Card
Card Title
This card demonstrates surface and border colors from the generated tokens.
Semantic Colors
Backgrounds
Background
Background Muted
Alle Token
Primary Tokens
--color-primary
#3C83F6
--color-primary-hover
#0563FA
--color-primary-active
#004ECC
--color-primary-muted
#DCE3EF
--color-primary-foreground
#FFFFFF
Primary Scale
50
#EFF1F6
100
#DCE3EF
200
#C7D5EA
300
#9CB7E2
400
#6D98DF
500
#3C83F6
600
#0563FA
700
#004ECC
800
#003B99
900
#002766
Background Tokens
--color-bg
#FAFAFA
--color-bg-muted
#F2F2F2
--color-surface
#FFFFFF
--color-surface-hover
#FAFAFA
--color-border
#D9D9D9
Semantic Tokens
--color-success
#F63C83
--color-warning
#AF3CF6
--color-danger
#3CF6AF
Export
:root {
/* Primary Colors */
--color-primary: #3C83F6;
--color-primary-hover: #0563FA;
--color-primary-active: #004ECC;
--color-primary-muted: #DCE3EF;
--color-primary-foreground: #FFFFFF;
/* Primary Scale */
--color-primary-50: #EFF1F6;
--color-primary-100: #DCE3EF;
--color-primary-200: #C7D5EA;
--color-primary-300: #9CB7E2;
--color-primary-400: #6D98DF;
--color-primary-500: #3C83F6;
--color-primary-600: #0563FA;
--color-primary-700: #004ECC;
--color-primary-800: #003B99;
--color-primary-900: #002766;
/* Background Colors */
--color-bg: #FAFAFA;
--color-bg-muted: #F2F2F2;
--color-surface: #FFFFFF;
--color-surface-hover: #FAFAFA;
--color-border: #D9D9D9;
/* Semantic Colors */
--color-success: #F63C83;
--color-warning: #AF3CF6;
--color-danger: #3CF6AF;
}
Ähnliche Werkzeuge
Entdecken Sie andere nützliche Farbwerkzeuge
Vollständige Anleitung zur Verwendung des UI-Token-Generators
Der UI-Token-Generator ist ein leistungsstarkes Online-Tool zur Erstellung eines vollständigen Satzes von Design-Token aus einer einzigen Grundfarbe. Mit diesem Service können Sie automatisch Farbskalen, semantische Farben und einsatzbereite CSS-Variablen für Ihr Design-System generieren.
Schritt 1: Grundfarbe auswählen
Beginnen Sie mit der Auswahl einer Grundfarbe für Ihr Design-System. Verwenden Sie den Farbwähler oder geben Sie einen HEX-Code manuell ein. Diese Farbe wird als Grundlage für die Generierung aller anderen Token verwendet.
Schritt 2: Farbskala generieren
Das Tool erstellt automatisch eine Farbskala mit 10 Abstufungen (von 50 bis 900) basierend auf der ausgewählten Grundfarbe. Jede Abstufung ist für die Verwendung in verschiedenen Interface-Komponenten optimiert.
Schritt 3: Primär-Token überprüfen
Überprüfen Sie die generierten Primär-Token: primary (Basis, Hover, Aktiv, Gedämpft), background (Hintergrund, Oberfläche, Rahmen) und semantic (Erfolg, Warnung, Gefahr). Alle Token sind automatisch für optimale visuelle Hierarchie konfiguriert.
Schritt 4: Token-Vorschau
Verwenden Sie den Vorschau-Bereich, um Token visuell an echten UI-Komponenten zu überprüfen: Buttons, Karten, Text. Dies hilft sicherzustellen, dass alle Farben harmonisch zusammenwirken.
Schritt 5: Token exportieren
Wählen Sie das Exportformat: CSS-Variablen für die Verwendung in CSS, Tailwind-Config für die Tailwind-CSS-Integration oder JSON für die Verwendung in Design-Systemen. Kopieren Sie den Code mit einem Klick.
Schritt 6: In Projekt integrieren
Kopieren Sie den exportierten Code und fügen Sie ihn in Ihr Projekt ein. CSS-Variablen können zu :root hinzugefügt werden, Tailwind-Config zu tailwind.config.js und JSON-Token zu Ihrem Design-System.
So verwenden Sie den UI-Token-Generator: Schritt-für-Schritt-Anleitung
Wie man Design-Token aus einer Farbe erstellt
Wählen Sie eine Grundfarbe mit dem Farbwähler oder geben Sie einen HEX-Code ein. Das Tool generiert automatisch einen vollständigen Satz von Token: Farbskala, Primärfarben, Hintergrundfarben und semantische Farben.
Wie man eine Farbskala generiert
Nach der Auswahl einer Grundfarbe erstellt das Tool automatisch eine Skala mit 10 Abstufungen (50-900). Jede Abstufung ist für die Verwendung in verschiedenen Komponentenzuständen optimiert: von den hellsten (50) bis zu den dunkelsten (900).
Wie man Token als CSS-Variablen exportiert
Gehen Sie zum Bereich 'Export', wählen Sie die Registerkarte 'CSS-Variablen' und klicken Sie auf 'Kopieren'. Der kopierte Code enthält alle Token im CSS-Variablen-Format, bereit zur Verwendung in Ihrem Projekt.
Wie man Token für Tailwind CSS exportiert
Wählen Sie im Bereich 'Export' die Registerkarte 'Tailwind-Config'. Kopieren Sie den Code und fügen Sie ihn in die Datei tailwind.config.js im Abschnitt theme.extend.colors ein. Token sind als Tailwind-Klassen verfügbar.
Wie man semantische Farben erstellt
Das Tool generiert automatisch semantische Farben (Erfolg, Warnung, Gefahr) basierend auf der Grundfarbe durch Anpassung des Farbtons. Diese Farben sind perfekt für Benachrichtigungen, Warnungen und Statusanzeigen.
Wie man Token in Design-Systemen verwendet
Exportieren Sie Token im JSON-Format zur Verwendung in Design-Systemen. JSON enthält strukturierte Daten über alle Farben, die in Design-Tools (Figma, Sketch) importiert oder im Code verwendet werden können.
Häufig gestellte Fragen zum UI-Token-Generator
Was sind UI-Token?
UI-Token sind standardisierte Design-Werte (Farben, Abstände, Größen), die in Design-Systemen verwendet werden, um Interface-Konsistenz sicherzustellen. Token erleichtern die Aufrechterhaltung eines einheitlichen Stils in der gesamten Anwendung.
Wie funktioniert der Token-Generator?
Der Generator nimmt eine Grundfarbe und erstellt automatisch einen vollständigen Satz von Token: Farbskala (10 Abstufungen), Primärfarben (primary, hover, active), Hintergrundfarben und semantische Farben (Erfolg, Warnung, Gefahr). Alle Token sind für die UI-Verwendung optimiert.
Welche Exportformate werden unterstützt?
Der Generator unterstützt drei Exportformate: CSS-Variablen (für die Verwendung in CSS), Tailwind-Config (für die Tailwind-CSS-Integration) und JSON (für die Verwendung in Design-Systemen und Design-Tools).
Wie verwendet man exportierte CSS-Variablen?
Kopieren Sie den Code aus dem Bereich 'CSS-Variablen' und fügen Sie ihn in Ihr Stylesheet (z.B. globals.css) im :root-Block ein. Danach können Sie Variablen in CSS verwenden: var(--color-primary), var(--color-primary-hover) usw.
Kann ich die Farbskala anpassen?
Die Farbskala wird automatisch basierend auf der Grundfarbe unter Verwendung von HSL-Algorithmen generiert, um visuelle Konsistenz sicherzustellen. Das Ändern der Grundfarbe aktualisiert automatisch die gesamte Skala.
Was sind semantische Farben?
Semantische Farben sind Farben mit spezifischer Bedeutung: Erfolg (grün), Warnung (gelb/orange), Gefahr (rot). Sie werden automatisch basierend auf der Grundfarbe durch Anpassung des Farbtons auf dem Farbkreis generiert.