UI Color Palette Generator

Generate developer-ready color systems for light & dark themes

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

Loading ToolBox...