Color harmony is the practice of choosing colors that work together instead of clashing. Designers use harmony rules to build palettes that feel balanced and intentional. This guide shows you the main rules and a workflow for picking a palette.
The harmony rules
- Monochromatic: one hue in different shades and tints. Safe, calm, and hard to get wrong.
- Analogous: colors next to each other on the color wheel, such as blue, teal, and green. Peaceful and natural.
- Complementary: colors opposite each other, such as blue and orange. High contrast and energetic.
- Split complementary: one color plus the two neighbors of its opposite. Strong contrast with less tension.
- Triadic: three colors evenly spaced on the wheel. Vibrant and balanced, but needs care.
- Tetradic: two complementary pairs. Rich, but easy to overdo.
Step-by-step: build a palette
- Pick one dominant color that fits the mood: blue for trust, green for growth, warm tones for energy.
- Choose a harmony rule based on how bold you want the result.
- Generate the palette and look at it as a whole, not color by color.
- Assign roles: one dominant color for about 60 percent of the design, a secondary for about 30 percent, and an accent for about 10 percent. This 60-30-10 rule is what makes palettes feel structured.
- Check text contrast. Light text on a light accent, or dark text on a dark dominant, will fail readability.
- Test the palette in the real design, not just as swatches, since context changes how colors feel.
Common mistakes
Using every color at full strength is the classic error; it creates noise, not energy. Let the dominant color carry the design and use the accent sparingly for buttons and highlights. Another mistake is picking a palette from swatches alone: colors behave differently at large sizes, on screens, and next to photos. Always test in context.
Try it the faster way
Generate color harmonies instantly with the tool below.
Prefer the full page? Open the color harmonies tool directly.
Quick tips
- Start with one dominant color and one rule, not five colors at once.
- Use the 60-30-10 rule to assign roles.
- Check contrast for every text and background pairing.
Color harmony is not guesswork; it is a small set of rules plus a role for each color. Pick a rule, assign the 60-30-10 split, and test in the real design.
Frequently asked questions
What is the 60-30-10 rule? It is a proportion guide: 60 percent dominant color, 30 percent secondary, 10 percent accent. It stops palettes from feeling like a random collection of equals and gives the design a clear hierarchy.
How many colors should a palette have? Three to five is the sweet spot for most designs. Fewer feels flat, more feels chaotic. Large systems can define more, but each screen should still show only a few at once.
Do color harmonies work for color-blind users? Harmony rules describe aesthetics, not accessibility. Always check contrast ratios and never rely on color alone to convey meaning: pair color with text, shape, or icon so the information survives for every viewer.
Worked example
Build a palette for a calm finance app. Start with a trustworthy blue as the dominant color. Choose an analogous harmony to add teal and soft green as secondary colors. Add a warm orange as the accent for buttons and alerts, using the complementary contrast sparingly. Apply 60-30-10: blue backgrounds and headers, teal and green sections, orange only for calls to action. The result feels calm and professional, with energy exactly where action is needed and nowhere else.
Save every palette you like, even ones you do not use immediately. A small library of tested palettes speeds up future projects enormously, since you start from combinations you already know work instead of guessing from scratch each time.