How to build a color palette that doesn’t fight itself

Amateur designs fail at color in a predictable way: too many hues, all at full saturation, all fighting for attention. Professional palettes are boring on paper — one dominant color, one supporting color, one accent — and that restraint is exactly what reads as polish.

Start with 60-30-10

The interior-design rule transfers perfectly to screens: about 60% of the visual field in a dominant, usually neutral color; 30% in a secondary color that sets the mood; 10% in a vivid accent that marks the important things — buttons, links, alerts. When everything is accented, nothing is. If you take one idea from this page, take this one.

Let the wheel pick your partners

The relationships in our palette generator are the classical ones, and they work because they’re geometric, not aesthetic opinions. Complementary (opposite on the wheel, 180°) gives maximum tension — great for the 10% accent against your 30% color. Analogous (±30°) gives low-contrast harmony — good for backgrounds and gradients. Triadic (120° apart) gives balanced variety — useful for charts and illustration where you need distinct-but-equal colors.

Practical workflow: pick your brand color in the tool, click its complement for your accent, take an analogous neighbor for backgrounds, and adjust lightness in HSL until the contrast checker passes. Ten minutes, defensible palette.

The mistakes to avoid

Don’t use pure black (#000) for text on white — very dark gray (#1a1a1a) reads better and shimmers less. Don’t saturate your neutrals; grays with a hint of your brand hue feel cohesive, but keep the hint small. And don’t trust colors chosen at midnight on a bright monitor — check them next morning, on your phone, in daylight. Color is context, and the only fix is looking twice.