Color Harmony Guide
Complete guide to the six color harmony types — what they are, when to use each, and how to apply them in real design work.
What Is Color Harmony?
Color harmony is the principle that colors chosen from specific geometric relationships on the color wheel look pleasing together. There are six standard harmony types, each with a distinct visual character and ideal use case.
Because they are based on mathematics (hue rotation), any harmony can be generated automatically from a single base color. That is exactly what OmniColor's harmony tools do.
The Six Color Harmonies
1. Complementary
Hue offset: 180°
Two colors directly opposite each other on the color wheel. Examples: red/green, blue/orange, yellow/purple.
Visual character: Maximum contrast, maximum visual tension. The eye vibrates when complementary colors touch.
Best for: Calls-to-action, highlights, accents, dramatic branding. Use one color dominantly and the other sparingly (5–10%).
Avoid: Large blocks of two complementary colors used equally — exhausting and visually noisy.
2. Analogous
Hue offsets: −60°, −30°, 0°, +30°, +60°
Colors adjacent to each other on the color wheel. Examples: blue/green/teal, red/orange/yellow.
Visual character: Calm, cohesive, harmonious. The colors share a common hue family.
Best for: Wellness brands, editorial layouts, nature-inspired designs, backgrounds, gradients.
Avoid: Relying on analogous colors alone for contrast — add one complementary accent for CTAs.
3. Triadic
Hue offsets: 0°, 120°, 240°
Three colors evenly spaced 120° apart. Examples: red/yellow/blue, orange/green/purple.
Visual character: Vibrant, balanced, energetic. No single color dominates by default.
Best for: Playful brands, data visualization, illustrations, modern interfaces, children's products.
Avoid: Using all three at equal visual weight — establish a dominant color (60%), a secondary (30%) and an accent (10%).
4. Tetradic (Rectangular)
Hue offsets: 0°, 90°, 180°, 270°
Four colors arranged as two complementary pairs. Also called double-complementary.
Visual character: Rich, varied, complex. More nuance than triadic but harder to balance.
Best for: Complex dashboards, illustrations with multiple elements, gaming interfaces, editorial spreads.
Avoid: Tetradic palettes in minimalist or luxury designs where restraint is the goal.
5. Split-Complementary
Hue offsets: 0°, 150°, 210°
The base color plus the two neighbors of its complement (30° on either side of 180°).
Visual character: Strong contrast like complementary, but softer and easier to balance.
Best for: Modern SaaS, brand identities, product packaging, any design that needs to pop without tension.
Avoid: Using all three colors at equal weight — same 60-30-10 principle applies.
6. Monochromatic
Hue offset: 0° (same hue, varying lightness)
One hue with multiple tints, tones and shades. All colors are the same hue at different lightness values.
Visual character: Elegant, minimal, sophisticated, unified by definition.
Best for: Design systems, luxury brands, editorial design, minimalist interfaces, backgrounds.
Avoid: Monochromatic palettes with too little lightness variation — everything blurs together. Ensure at least 3 distinct lightness levels.
How to Choose a Harmony
| If you want... | Use this harmony |
|---|---|
| Maximum contrast and impact | Complementary |
| Calm, cohesive feel | Analogous or Monochromatic |
| Playful energy and balance | Triadic |
| Rich variety and complexity | Tetradic |
| Contrast that is easy to control | Split-Complementary |
| Elegance and restraint | Monochromatic |
The 60-30-10 Principle
Regardless of which harmony you choose, use this proportion to create visual hierarchy:
- 60% — Dominant color: The primary color. Backgrounds, largest areas.
- 30% — Secondary color: Supporting elements. Cards, sections, major UI.
- 10% — Accent color: Attention-grabbing elements. CTAs, highlights, alerts.
This proportion mirrors how we naturally perceive visual hierarchy and is why most great designs feel balanced even when using strong colors.
Practical Examples
Complementary in branding
A sports team uses orange as the dominant brand color, with small touches of blue as accents. Blue logos, orange jerseys. The contrast creates energy and memorability.
Analogous in wellness
A meditation app uses blues and greens throughout — background, buttons, illustrations. The colors feel calming because they share a hue family. One single orange accent color is used only for the "Start Session" button.
Triadic in data visualization
A dashboard shows three series of data using triadic colors — red, yellow and blue. Because they are equally spaced, no single series visually dominates. The colors are distinguishable even for users with color blindness (test with our simulator).
Monochromatic in design systems
A design system uses one brand color expanded into a 50–900 lightness scale. Every UI component — buttons, cards, borders, text — uses a step from that scale. The interface feels unified because every color literally comes from the same hue.
Common Mistakes
Equal weighting
All colors of a harmony used at equal visual weight creates chaos. Always establish a dominant color.
Ignoring saturation and lightness
Two colors with the same hue offset but very different saturation or lightness may not feel harmonious. Harmony is about the relationship of all three properties, not just hue.
Skipping accessibility
A beautiful harmony can fail WCAG contrast. Always test your final palette against a contrast checker before committing.
Overcomplicating
You do not need to use every color in a harmony. Two colors from a tetradic scheme may be all you need. Choose the harmony for the relationship, not the number of colors.
How OmniColor Helps
OmniColor provides dedicated tools for each harmony:
- Complementary Colors
- Analogous Colors
- Triadic Colors
- Tetradic Colors
- Split-Complementary Colors
- Monochromatic Colors
- Color Harmony Analyzer — see all six at once
- Color Wheel — interactively explore the wheel