Skip to content
ColorArchive
Combinations Guide
Search intent: color combinations design complementary analogous triadic color harmony how to choose colors palette 60 30 10 rule color wheel

How to Choose Color Combinations That Work

The practical framework for choosing 2-5 color combinations for design projects — covering harmony types, proportion, and the common mistakes that make palettes feel off.

Color HarmonyPalette DesignColor Theory
Key points
The 60-30-10 rule is the most reliable starting proportion for a 3-color combination: 60% dominant (usually a neutral or near-neutral), 30% secondary, 10% accent. The dominant color sets the mood; the accent color gets remembered. Reversing these proportions — a small amount of neutral with a large area of vivid color — is one of the most common causes of palettes that feel overwhelming in real applications.
Complementary combinations (opposite hues on the color wheel) create maximum contrast and energy. They work at full saturation only at small scale or for very specific brand personalities. For most applications, use complementary hues at different saturation levels: one muted, one vivid. This preserves the energy of the complementary relationship while making the palette livable.
Analogous combinations (3-4 adjacent hues) are inherently cohesive but risk feeling flat. The solution is variation in lightness and saturation within the analogous range rather than adding more hues. A well-varied analogous palette — light-medium-dark of the same hue family, with one step more saturated as the accent — reads as polished and intentional.

Starting with harmony type

Harmony type describes the geometric relationship between your hues on the color wheel. Complementary (0° + 180°) is the highest contrast relationship — bold and energetic. Analogous (0° + 30° + 60°) is the lowest contrast — calm, cohesive, naturalistic. Triadic (0° + 120° + 240°) balances variety with structure. Split-complementary (0° + 150° + 210°) adds variety with less tension than full complementary. Monochromatic (single hue, multiple lightness steps) is the most controllable and the most at risk of flatness. Choose your harmony type based on the emotional register of the brand, not aesthetic preference alone.

The role of neutrals

Most functional color palettes are 80% neutral — the background, surface, body text, and secondary elements that carry the visual weight of the layout. The hue colors you agonize over typically appear at 10-30% of the total visual area. This means neutral design is the primary skill, and hue selection is the secondary one. A palette with a poor neutral strategy fails regardless of how well-chosen the accent colors are. Warm neutrals (slightly yellow or red-shifted) pair with warm hue palettes; cool neutrals (slightly blue or gray-shifted) pair with cool palettes. Mixing warm accents with cool neutrals creates the temperature dissonance that makes combinations feel 'almost right but off.'

Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Packs handle the export and implementation layer.

Related guides