How to Build a Color Palette That Holds Together

Start from one hue, not five

Most weak palettes are five unrelated colors chosen one at a time. A palette that holds together comes from one base hue and a rule for deriving the rest, so any new element you add later already has a home.

Pick the base hue from what the product is: blue for trust and finance, green for health and growth, orange for action. Then keep saturation moderate - fully saturated hues vibrate when placed next to each other and age badly.

Three relationships that work

Complementary, 180 degrees apart, gives the strongest contrast and is best reserved for one call-to-action color on a calm background. Use it sparingly; two complementary colors at equal weight fight for attention.

Analogous, within about 60 degrees, is calm and cohesive and suits backgrounds and section bands. Triadic, 120 degrees apart, is vivid but balanced and works well for charts where categories must be distinguishable at a glance.

The lightness ladder does the real work

In a working interface, most pixels are not the brand color. They are surfaces, borders and text, and those come from one hue at five or six lightness steps: a near-white surface, a light border, the base color, a dark hover state and near-black text.

Build that ladder once and the palette scales. A new component then needs no new color decision - only a step on the ladder, which is also what keeps dark mode a mechanical transform instead of a redesign.

About this guide
Written and maintained by the ColorLab editorial team. We test each method on real data before publishing, link to the tool that automates it, and revise the page when the underlying standard changes.
Sponsored — ad slot reserved

More guides

Free tools mentioned