UI-Theme-Generator
Generieren Sie vollständige Paletten für Interfaces: Akzentfarben, Hintergründe, Text, Rahmen und Hilfsfarben
Grundfarbe eingeben
Theme-Vorschau
Theme Preview
Card Title
This is a sample card component demonstrating the theme colors.
Form Example
Farb-Tokens
Color Tokens
Primary
| Token | Value | Action |
|---|---|---|
Copy #3B82F6 | #3B82F6 | |
Copy #6DA2F8 | #6DA2F8 | |
Copy #0B64F4 | #0B64F4 | |
Copy #000000 | #000000 |
Secondary
| Token | Value | Action |
|---|---|---|
Copy #295BAC | #295BAC | |
Copy #2E67C2 | #2E67C2 | |
Copy #FFFFFF | #FFFFFF |
Neutral
| Token | Value | Action |
|---|---|---|
Copy #0A0A0A | #0A0A0A | |
Copy #FFFFFF | #FFFFFF | |
Copy #1A1A1A | #1A1A1A | |
Copy #2A2A2A | #2A2A2A |
Status
| Token | Value | Action |
|---|---|---|
Copy #00FF00 | #00FF00 | |
Copy #FFBF00 | #FFBF00 | |
Copy #FF0000 | #FF0000 | |
Copy #00AAFF | #00AAFF |
Borders
| Token | Value | Action |
|---|---|---|
Copy #2A2A2A | #2A2A2A | |
Copy #404040 | #404040 | |
Copy #3B82F6 | #3B82F6 |
Shadows
| Token | Value | Action |
|---|---|---|
Copy rgba(0, 0, 0, 0.3) | rgba(0, 0, 0, 0.3) | |
Copy rgba(0, 0, 0, 0.4) | rgba(0, 0, 0, 0.4) | |
Copy rgba(0, 0, 0, 0.5) | rgba(0, 0, 0, 0.5) |
Kontrast
Contrast Analysis
| Color Pair | Contrast Ratio | WCAG Compliance | Recommendation |
|---|---|---|---|
vs | 5.71:1 | ✓ AA | ✓ Good contrast |
vs | 6.59:1 | ✓ AA | ✓ Good contrast |
vs | 19.80:1 | ✓ AA✓ AAA | ✓ Good contrast |
vs | 1.14:1 | ✗ Below AA | Increase card contrast for better visibility |
Export
Export
:root {
/* Primary Colors */
--color-primary: #3B82F6;
--color-primary-hover: #6DA2F8;
--color-primary-active: #0B64F4;
--color-primary-foreground: #000000;
/* Secondary Colors */
--color-secondary: #295BAC;
--color-secondary-hover: #2E67C2;
--color-secondary-foreground: #FFFFFF;
/* Neutral Colors */
--color-background: #0A0A0A;
--color-foreground: #FFFFFF;
--color-card: #1A1A1A;
--color-muted: #2A2A2A;
/* Status Colors */
--color-success: #00FF00;
--color-warning: #FFBF00;
--color-error: #FF0000;
--color-info: #00AAFF;
/* Borders */
--color-border: #2A2A2A;
--color-border-strong: #404040;
--color-ring: #3B82F6;
/* Shadows */
--shadow-sm: rgba(0, 0, 0, 0.3);
--shadow-md: rgba(0, 0, 0, 0.4);
--shadow-lg: rgba(0, 0, 0, 0.5);
}
Ähnliche Werkzeuge
Entdecken Sie andere nützliche Farbwerkzeuge
Vollständige Anleitung zur Verwendung von UI-Theme-Generator
UI-Theme-Generator ist ein Tool zur Generierung vollständiger Farbpaletten für Interfaces. Es erstellt Akzentfarben, Hintergründe, Text, Rahmen und Hilfsfarben basierend auf einer einzigen Grundfarbe.
Schritt 1: Grundfarbe auswählen
Wählen Sie eine Primärfarbe mit dem Farbwähler, geben Sie HEX/RGB/HSL manuell ein, wählen Sie ein fertiges Theme aus der Liste (Light, Dark, Vibrant, Pastel, Minimal, Corporate) oder laden Sie ein Bild hoch, um die dominante Farbe zu extrahieren.
Schritt 2: Modus konfigurieren
Wählen Sie den Theme-Modus: Light (helles Theme), Dark (dunkles Theme) oder Auto (automatische Erkennung basierend auf Grundfarbe).
Schritt 3: Vorschau anzeigen
Zeigen Sie die Theme-Vorschau auf echten UI-Komponenten: Buttons, Textblöcke, Karte, Formular, Navigationsleiste. Dies ermöglicht es, das Theme in Aktion zu sehen.
Schritt 4: Tokens erkunden
Erkunden Sie alle generierten Farb-Tokens, organisiert nach Kategorien: Primary (Hauptfarben), Secondary (Sekundärfarben), Neutral (neutrale), Status (Statusfarben), Borders (Rahmen), Shadows (Schatten).
Schritt 5: Kontrast prüfen
Überprüfen Sie die automatische Kontrastanalyse für wichtige Farbpaare: primary vs primary-foreground, secondary vs secondary-foreground, text vs background, card vs Hintergrund. Stellen Sie WCAG AA/AAA-Konformität sicher.
Schritt 6: Export
Exportieren Sie das Theme in verschiedenen Formaten: CSS-Variablen (für direkte Verwendung in CSS), Tailwind-Config (für Tailwind-CSS-Integration), JSON-Tokens (für Design-Systeme), Figma-Tokens (für Verwendung in Figma). Verwenden Sie 'Export All', um alle Formate auf einmal zu exportieren.
So verwenden Sie UI-Theme-Generator: Schritt-für-Schritt-Anleitung
Wie man Grundfarbe auswählt
Verwenden Sie den Farbwähler für visuelle Auswahl, geben Sie Farbe manuell in einem beliebigen Format ein (HEX, RGB, HSL), wählen Sie ein fertiges Theme aus der Dropdown-Liste oder laden Sie ein Bild hoch für automatische Extraktion der dominanten Farbe.
Wie man Theme-Modus konfiguriert
Wählen Sie Light für helles Theme, Dark für dunkles Theme oder Auto für automatische Erkennung basierend auf Grundfarb-Helligkeit. Modus beeinflusst neutrale Farb- und Schattengenerierung.
Wie man Theme-Vorschau verwendet
Vorschau zeigt Theme auf echten UI-Komponenten: Buttons mit Hover/Active-Zuständen, Textblöcke, Karten, Formulare, Navigationsleiste. Dies hilft, das Theme visuell zu bewerten, bevor es verwendet wird.
Wie man mit Tokens arbeitet
Alle Tokens sind nach Kategorien organisiert. Jeder Token zeigt Farbfeld, HEX-Wert und Kopier-Button. Tokens sind bereit zur Verwendung in Ihrem Projekt.
Wie man Kontrastanalyse interpretiert
Kontrasttabelle zeigt Verhältnisse für wichtige Farbpaare. Grüne Labels (✓ AA, ✓ AAA) zeigen Konformität mit Standards. Rote Labels (✗ Below AA) erfordern Kontrastverbesserung.
Wie man Theme exportiert
Wählen Sie gewünschtes Exportformat (CSS-Variablen, Tailwind-Config, JSON-Tokens, Figma-Tokens), kopieren Sie Code oder laden Sie Datei herunter. Verwenden Sie 'Export All', um alle Formate auf einmal zu erhalten.
Häufig gestellte Fragen zu UI-Theme-Generator
Was sind UI-Tokens?
UI-Tokens sind benannte Farbwerte, die in Design-Systemen verwendet werden. Sie gewährleisten Farbkonsistenz in Interfaces und vereinfachen Theme-Wartung. Beispiele: primary, secondary, background, foreground.
Wie funktioniert Token-Generierung?
Generator verwendet Grundfarbe und erstellt Variationen durch Aufhellen/Abdunkeln (für Hover/Active-Zustände), Mischen mit neutralen Farben (für Secondary) und automatische Kontrastfarbauswahl (für Foreground). Statusfarben werden durch Anpassung des Farbtons generiert.
Was ist Auto-Modus?
Auto-Modus bestimmt automatisch, ob Theme hell oder dunkel sein soll, basierend auf Grundfarb-Helligkeit. Wenn Grundfarbe hell ist (Luma >= 0.5), wird helles Theme gewählt, sonst dunkles Theme.
Wie verwendet man exportierte Tokens?
CSS-Variablen können direkt in CSS verwendet werden: var(--color-primary). Tailwind-Config sollte zu tailwind.config.js hinzugefügt werden. JSON-Tokens eignen sich für Integration in Design-Systeme. Figma-Tokens können über Plugin in Figma importiert werden.
Warum bestehen einige Farbpaare den Kontrasttest nicht?
Wenn Grundfarbe zu hell oder dunkel ist, können automatisch generierte Foreground-Farben möglicherweise nicht ausreichend Kontrast bieten. In diesem Fall wird empfohlen, eine andere Grundfarbe zu wählen oder Foreground-Farben manuell anzupassen.
Kann ich Tokens manuell bearbeiten?
In aktueller Version werden Tokens automatisch generiert. Für manuelle Bearbeitung können Sie exportierte Werte kopieren und in Ihrem Projekt ändern. Zukünftige Versionen planen, manuelle Bearbeitungsfunktion hinzuzufügen.