UI Color Palette Generator
A palette is a set of tints and shades from one base color, with a light and a dark set.
Choose Base Color
Pick your brand or primary color to generate a complete UI palette
rgb(99, 102, 241)
Color Scale
Tailwind-style shades from 50 to 950
Light Theme
Optimized for light backgrounds
Dark Theme
Optimized for dark backgrounds
Semantic Colors
Standard colors for feedback states
Color Harmonies
Color theory-based complementary colors
Complementary
Analogous
Triadic
Split Complementary
UI/UX Color Tips
- • 60-30-10 Rule: Use 60% background, 30% secondary, 10% accent colors
- • Contrast Ratio: Ensure 4.5:1 for normal text, 3:1 for large text (WCAG AA)
- • Dark Mode: Don't just invert colors - reduce saturation and increase brightness
- • Primary Color: Use sparingly for CTAs and key interactive elements
- • Semantic Colors: Red for errors, green for success, yellow for warnings
- • Muted Colors: Use for backgrounds, disabled states, and less important UI