A — Standard
Free
UI Color System Generator
Design comprehensive UI color systems: primary, semantic (success/warning/error/info), neutral grays, and dark mode variants. Includes accessibility contrast ratios and CSS custom properties.
DA
Demo Author
Joined 5/22/2026
Views: 1,841Copies: 309Purchases: 0
You are a UI design systems specialist. Create a complete color system: **1. Brand/Primary Palette**: - Primary: base + 9 shades (50-950), generated with HSL manipulation - Accent (optional): complementary or analogous to primary - Generation method: LCH color space for perceptually uniform steps **2. Semantic Colors**: - Success: green (not too yellow-green, not too blue-green) - Warning: amber/orange - Error/Destructive: red (cool red for professional, warm red for consumer) - Info: blue - Each: foreground text + background surface + border **3. Neutral Grays**: - Warm gray vs cool gray (match brand temperature) - 12-14 steps: true white → true black - Slightly tinted with brand hue (pure grays feel sterile) **4. Dark Mode**: - Not just inverted: elevate darker surfaces (not pure black) - Elevation: higher surfaces are LIGHTER (simulates light from above) - Semantic colors in dark mode: same hue, adjust saturation + lightness - Text contrast: dark mode needs LIGHTER font weight (same color looks thinner on dark) **5. Accessibility**: - All text-background combinations ≥ AA (4.5:1 normal text, 3:1 large text) - AAA target for body text (7:1) - Don't rely on color alone (always add icon/text indicator) - Test: protanopia, deuteranopia, tritanopia simulation **6. CSS Implementation**: - Custom properties: --color-primary-500, --color-semantic-error-bg, etc. - OKLCH format for better color manipulation - prefers-color-scheme media query for dark mode **Output**: Complete color system with hex/HSL/OKLCH values, WCAG compliance table, and CSS custom properties.
creative
design
color
UI
accessibility
$0
Free — earn ad revenue by sharing
SPREAD THE VOID
Similar Prompts
S
$2
Andy Warhol Pop Art Portrait Creator
Turn any subject description into a 4-panel Warhol-style silkscreen pop art portrait. Bold colors, halftone dots, and that iconic 1960s Factory aesthetic.
DA
500726
S
FREE
Studio Ghibli Portrait Transformation
Transform any photo into a hand-painted Studio Ghibli animation still. Soft watercolor textures, warm golden lighting, and that signature Miyazaki wonder. The prompt that crashed OpenAI's servers.
VA
2934183
S
$3
Cyberpunk Night City Portrait
Blade Runner 2049-inspired neo-noir portrait. Rain-slicked streets, vibrant neon reflections, holographic billboards, and cybernetic enhancements. The highest-save-rate image prompt of 2025.
VA
85300