Color Harmony Generator
Pick one color and get six classic color schemes built on color-wheel relationships — complementary, analogous, triadic, and more.
Schemes built from a temple gold
Take this temple's molten gold #AF8B5B and the color wheel does the rest — a complementary partner and a triadic trio, exactly as this tool computes them.
Complementary
Triadic
#AF8B5B · #5B7FAF / #5BAF8B · #8B5BAF — plus 4 more schemes in the tool
What is color harmony?
Color harmonies are combinations built from fixed geometric relationships on the color wheel. Complementary colors sit opposite each other (maximum tension), analogous colors sit side by side (calm and cohesive), triadic schemes space three hues evenly (vivid but balanced), and monochromatic schemes vary only lightness. They're not rules — they're reliable starting points that have worked for painters and designers for two centuries.
Using a scheme without making a rainbow
The classic mistake with harmony schemes is using every color at equal strength. The schemes tell you which hues relate — proportion is your job.
- Follow 60-30-10. One dominant color (usually a neutral or your calmest hue) takes ~60% of the surface, a secondary ~30%, and the loudest color earns just ~10% as an accent.
- Complementary pairs are accent machines. Don't split them 50/50 — the clash exhausts the eye. Let one dominate and use its opposite only for the moments that matter: CTAs, alerts, highlights.
- Analogous schemes are the safe default. Neighboring hues can share space at similar strengths without fighting, which is why they dominate calm, editorial designs.
- Triadic and tetradic need muting. Keep one hue vivid and pull the others toward gray or near-neutral versions — then expand each with the Shades generator to get workable light and dark steps.
And if the wheel feels arbitrary: real photos already contain harmonies that survived reality. Extract one with the Palette Extractor and use this tool to understand why it works.
Related tools & guides
- Photo Palette Extractor — Start from a photo instead of a wheel — extract real-world colors first.
- Shades & Tints Generator — Give every color in your scheme a full light-to-dark scale.
- How to choose a color palette — When to trust the color wheel and when to trust the photo.
Frequently asked questions
Which harmony should I pick for a website?
Analogous or monochromatic for the base UI (they stay calm across large surfaces), with the complementary color reserved as a small accent. A full triadic or tetradic scheme at equal strength usually looks like a carnival — use the extra hues sparingly.
What's the difference between complementary and split-complementary?
Complementary uses the exact opposite hue (180°). Split-complementary takes the two hues on either side of the opposite (150° and 210°) — nearly the same contrast, but softer and easier to balance.
The generated colors clash with my design. Why?
Harmony formulas rotate hue but keep your color's saturation and lightness, which can be too intense at full strength. Tone the companions down with the Shades generator, and check text pairs in the Contrast Checker.