UI Theme Generator
Generate complete palettes for interfaces: accent colors, backgrounds, text, borders, and auxiliary colors
Base Color Input
Theme Preview
Theme Preview
Card Title
This is a sample card component demonstrating the theme colors.
Form Example
Color 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) |
Contrast
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);
}
Similar Tools
Discover other useful color tools
Complete guide to using UI Theme Generator
UI Theme Generator is a tool for generating complete color palettes for interfaces. It creates accent colors, backgrounds, text, borders, and auxiliary colors based on a single base color.
Step 1: Select base color
Choose a primary color using the color picker, enter HEX/RGB/HSL manually, select a ready-made theme from the list (Light, Dark, Vibrant, Pastel, Minimal, Corporate), or upload an image to extract the dominant color.
Step 2: Configure mode
Select theme mode: Light (light theme), Dark (dark theme), or Auto (automatic detection based on base color).
Step 3: View preview
View theme preview on real UI components: buttons, text blocks, card, form, navigation panel. This allows you to see the theme in action.
Step 4: Explore tokens
Explore all generated color tokens, organized by categories: Primary (main), Secondary (secondary), Neutral (neutral), Status (status), Borders (borders), Shadows (shadows).
Step 5: Check contrast
Review automatic contrast analysis for key color pairs: primary vs primary-foreground, secondary vs secondary-foreground, text vs background, card vs background. Ensure WCAG AA/AAA compliance.
Step 6: Export
Export theme in various formats: CSS Variables (for direct use in CSS), Tailwind config (for Tailwind CSS integration), JSON tokens (for design systems), Figma Tokens (for use in Figma). Use 'Export All' button to export all formats at once.
How to use UI Theme Generator: step-by-step guide
How to select base color
Use color picker for visual selection, enter color manually in any format (HEX, RGB, HSL), select a ready-made theme from dropdown list, or upload an image for automatic dominant color extraction.
How to configure theme mode
Select Light for light theme, Dark for dark theme, or Auto for automatic detection based on base color brightness. Mode affects neutral color and shadow generation.
How to use theme preview
Preview shows theme on real UI components: buttons with hover/active states, text blocks, cards, forms, navigation panel. This helps visually evaluate the theme before use.
How to work with tokens
All tokens are organized by categories. Each token shows color swatch, HEX value, and copy button. Tokens are ready for use in your project.
How to interpret contrast analysis
Contrast table shows ratios for key color pairs. Green labels (✓ AA, ✓ AAA) indicate compliance with standards. Red labels (✗ Below AA) require contrast improvement.
How to export theme
Select desired export format (CSS Variables, Tailwind Config, JSON Tokens, Figma Tokens), copy code or download file. Use 'Export All' to get all formats at once.
Frequently asked questions about UI Theme Generator
What are UI tokens?
UI tokens are named color values used in design systems. They ensure color consistency in interfaces and simplify theme maintenance. Examples: primary, secondary, background, foreground.
How does token generation work?
Generator uses base color and creates variations through lightening/darkening (for hover/active states), mixing with neutral colors (for secondary), and automatic contrast color selection (for foreground). Status colors are generated by adjusting hue.
What is Auto mode?
Auto mode automatically determines whether theme should be light or dark based on base color brightness. If base color is light (luma >= 0.5), light theme is selected, otherwise dark theme.
How to use exported tokens?
CSS Variables can be used directly in CSS: var(--color-primary). Tailwind config should be added to tailwind.config.js. JSON tokens are suitable for integration into design systems. Figma Tokens can be imported into Figma via plugin.
Why do some color pairs fail contrast check?
If base color is too light or dark, automatically generated foreground colors may not provide sufficient contrast. In this case, it's recommended to choose a different base color or manually adjust foreground colors.
Can I edit tokens manually?
In current version, tokens are generated automatically. For manual editing, you can copy exported values and modify them in your project. Future versions plan to add manual editing capability.