Color Palette Generator

Color Harmony Rules

• Complementary — Two colors 180° apart on the wheel; high contrast, great for CTA buttons.
• Analogous — Five colors within ±20°–40°; smooth transitions, ideal for cohesive UIs.
• Triadic — Three colors at 120° intervals; balanced and vibrant.
• Split-Complementary — Base + two colors flanking its complement by 30°; softer than complementary.
• Tetradic — Four colors at 90° intervals; richest palette, needs careful hierarchy.
• Monochromatic — Same hue at different lightness levels; safest and most harmonious.

Palette Tips for UI Design

• Follow the 60-30-10 rule: dominant color (60%), secondary (30%), accent (10%).
• On dark backgrounds, desaturate secondary colors to reduce eye strain.
• Always check text-to-background WCAG contrast — aim for at least 4.5:1 (AA).

FAQ

How many colors does a website need?

Typically 3–5: one primary, one secondary, one accent, plus neutral grays for text and backgrounds. Too many colors create visual clutter.

Warm vs. cool palettes — how to choose?

Warm hues (red, orange, yellow) convey energy and urgency — great for e-commerce. Cool hues (blue, green, purple) convey trust and professionalism — ideal for finance and tech. Let your brand personality decide.

How to ensure an accessible palette?

Use WCAG contrast checkers: body text needs ≥ 4.5:1, large headings ≥ 3:1. Never rely on color alone to convey meaning — pair with icons or text labels.