Color Harmony
#
WCAG Contrast Checker
5.84:1AA
Normal text (AA 4.5:1)The quick brown foxAA ✓
Large text (AA 3:1)The quick brown foxAAA ✓
UI & graphics (3:1)The quick brown foxAAA ✓

All Harmony Palettes

Analogous5 colors
Monochromatic5 colors
Triadic3 colors
Complementary2 colors
Split Complementary3 colors
Square4 colors
Compound4 colors

Curated Palettes

Sunset Glow4 colors
Ocean Breeze4 colors
Forest Canopy4 colors
Lavender Dream4 colors
Berry Bliss4 colors
Midnight City4 colors
Neon Cyberpunk4 colors
Pastel Spring4 colors
Earthy Neutrals4 colors
Deep Space4 colors
Autumn Leaves4 colors
Winter Frost4 colors
Vintage Cinema4 colors
Desert Sands4 colors
Tropical Sunrise4 colors
Mystic Woods4 colors
Cyber Neon4 colors
Soft Pastels4 colors
Coffee House4 colors
Royal Velvet4 colors
Earthy Boho5 colors
Retro 80s5 colors
Vivid Triplet3 colors
Minty Fresh3 colors
Warm Ombre6 colors
Coastal Calm5 colors
Smoked Clay & Charcoal5 colors
Warm Greige Gallery5 colors
Olive Grove Lounge5 colors
Plaster & Rust5 colors
Ink Blue Salon5 colors
Sage & Linen5 colors
Dusty Blue Hush5 colors
Blush & Warm Greige5 colors
Plum Smoke Cocoon5 colors
Mushroom & Putty5 colors
Oat & Faded Indigo5 colors
Herb Garden Kitchen5 colors
Buttercream & Clay5 colors
Navy & Oak Galley5 colors
Charcoal & Brass Scullery5 colors
Slate Blue & Marble Cook's Kitchen5 colors
Plaster Pink & Walnut Bistro5 colors
Eucalyptus Spa5 colors
Soft White & Teak5 colors
Slate Blue Bath5 colors
Warm Plaster & Clay5 colors
Inky Green Powder Room5 colors
Greige & Soft Aqua5 colors
Forest Study5 colors
Warm Greige Workspace5 colors
Terracotta & Olive Den5 colors
Eucalyptus Focus5 colors
Soft Clay & Paper5 colors
Ink Library5 colors

How to Use the Color Palette Generator

This free color palette generator turns a single starting color into a complete, harmonious scheme using classic color-theory math. Pick a base color with the wheel, the hue slider, or by typing a hex code, then choose a harmony rule to instantly see a matching set of colors. Every swatch can be copied to your clipboard with one click, ready to paste straight into CSS, Tailwind, Figma, or any design tool.

  • Choose a base color — drag the dot on the color wheel, move the hue slider, type a six-digit hex value, or use the native color picker in the top bar.
  • Select a harmony rule — open the “Color Harmony” dropdown and pick the relationship you want (complementary, analogous, triadic, and more).
  • Copy your colors — hover a swatch in the palette strip to reveal its hex code, then click to copy it.
  • Check accessibility — use the built-in WCAG contrast checker above to confirm your text and background colors are readable.
  • Explore variations — scan the “All Harmony Palettes” grid to compare every rule for your base color, or start from one of the curated palettes.

The Seven Color Harmony Rules

Color harmonies describe how hues relate to one another on the color wheel. Each rule produces a different mood and level of contrast:

  • Complementary — two hues directly opposite each other (180° apart). Maximum contrast and energy; great for calls to action.
  • Analogous — neighboring hues (about 30° apart). Calm, cohesive, and natural-looking.
  • Triadic — three hues evenly spaced 120° apart. Vibrant yet balanced.
  • Split-Complementary — a base color plus the two hues flanking its complement. Strong contrast with less tension than pure complementary.
  • Tetradic — four hues forming a rectangle on the wheel. Rich and varied; works best with one dominant color.
  • Square — four hues evenly spaced 90° apart. Bold and balanced with equal visual weight.
  • Monochromatic — a single hue at varying lightness and saturation. Elegant, clean, and easy to apply.

Checking Color Contrast for Accessibility

A beautiful palette still needs to be readable. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background: 4.5:1 for normal body text and 3:1 for large text to meet the AA level, and 7:1 for the stricter AAA level. The contrast checker on this page calculates the exact ratio between any two colors and shows whether they pass AA or AAA, so you can adjust your palette before it ships.

Frequently Asked Questions

Is the color palette generator free?

Yes. The tool is completely free for both personal and commercial projects, with no sign-up required.

What color formats does it support?

You can enter and copy colors as hex codes, and each generated color is calculated from its underlying HSL and RGB values.

Which harmony rule should I use?

Use complementary or split-complementary for high-impact accents, analogous or monochromatic for calm and cohesive interfaces, and triadic or square when you need a richer, multi-color scheme.