How do I use the 60-30-10 rule for web design?

Use the first color for 60% of your design (backgrounds), the second for 30% (secondary sections), and accent colors for 10% (buttons, links, highlights).

Color Palette Generator

Generate professional color palettes with harmony rules, WCAG accessibility checks, live preview, color blindness simulation, and export in multiple formats.

Showing tips for Color 1 — click any swatch above to switch

Interior Design

Bedroom walls

Home office

Bathroom vanity

Pairs with:

Color Mixing

Blue 85%

White 15%

Start with ultramarine blue. Add tiny red for purple-blue, white for lighter shades.

WCAG contrast ratios between all palette colors. Green = AA pass (4.5:1+), Yellow = Large text only (3:1+), Red = Fail.

Preview how your palette appears to people with different types of color vision deficiency.

Color psychology analysis based on your palette's dominant characteristics.

WCAG Accessibility

Checking Color 1 vs white background

vs White

4.5:1

WCAG AA PASS

WCAG AAA FAIL

Click any swatch above to check its contrast

Live Web Preview

Saved Palettes

0 saved

No saved palettes yet

Click "Save" to bookmark your favorite color combinations

What This Tool Does

Harmony Palettes 7 color harmony types

Accessibility Check WCAG contrast ratios

Color Blindness 5 vision type simulations

Design Tips Interior & mixing guidance

Export Options PNG, CSS variables, JSON

Keyboard Shortcuts

Space Generate palette

Click Select color

Lock Keep color

Copy Copy HEX code

Professional Color Palettes Made Easy

A color palette generator creates harmonious color combinations based on color theory principles. It automatically generates 5-color palettes using proven harmony rules like complementary, analogous, triadic, and more.

Our generator includes WCAG accessibility checking, color blindness simulation, a live web preview, interior design tips, and export options — making it perfect for web designers, UI/UX professionals, interior designers, and graphic artists.

How to Use the Palette Generator

Choose Harmony

Select a color harmony type from the dropdown. Each type creates a balanced palette based on color theory.

Generate & Lock

Click "Generate" or press Space. Found a color you like? Lock it to keep it while regenerating the rest.

Explore Features

Check accessibility, view color blindness simulations, get interior design tips, and analyze mood psychology.

Save & Export

Save palettes to your browser for later, or export as PNG, CSS variables, or JSON data.

Color Harmony Types

Complementary

Colors opposite on the color wheel — high contrast, vibrant designs.

Analogous

Adjacent colors — serene, harmonious, cohesive looks.

Triadic

Three equally spaced colors — balanced and vibrant.

Tetradic

Two complementary pairs — rich palette with variety.

Monochromatic

Single hue variations — sophisticated and elegant.

Split-Complementary

Base + two adjacent to complement — contrast with less tension.

Frequently Asked Questions

Is this tool completely free?

Yes! Generate unlimited color palettes, save to history, check accessibility, and export in any format — all completely free with no registration required.

What color harmony types are available?

We offer 7 harmony types: Complementary, Analogous, Triadic, Tetradic, Monochromatic, Split-Complementary, and Random. Each creates a balanced 5-color palette based on color theory principles.

What is WCAG and why does it matter?

WCAG (Web Content Accessibility Guidelines) ensures your colors have enough contrast for people with visual impairments. AA requires 4.5:1 contrast ratio for normal text, while AAA requires 7:1 for enhanced accessibility.

How do I use the 60-30-10 rule?

Use the first color for 60% of your design (backgrounds, main areas), the second color for 30% (secondary sections), and accent colors for 10% (buttons, links, highlights).

Can I use these palettes for commercial projects?

Absolutely! All generated color palettes can be used in any personal or commercial project without attribution.

Where are my saved palettes stored?

Saved palettes are stored in your browser's localStorage — they never leave your device. They persist until you clear browser data or click "Clear All".

What export formats are supported?

You can export palettes as PNG images (with color codes), CSS variables (ready for stylesheets), or JSON data (with hex, RGB, and harmony info).

What's the best harmony type for beginners?

Start with Complementary for bold contrasts or Analogous for safe, cohesive looks. Monochromatic is great for elegant, professional designs.