How professional UI designers combine colour-wheel maths, neutral surfaces and the 60-30-10 rule to craft accessible palettes.

Start with harmony rules, not guesswork

Picking five colours at random almost always produces clashing saturation levels and vibrating text edges. Anchor the design with one primary brand hue and derive companions from proven geometric relationships on the HSL wheel.

Complementary sits 180 degrees opposite, analogous sits about 30 degrees either side, and triadic spaces three hues 120 degrees apart.

Recommended free tool

Open the algorithmic Colour Palette Generator

Generate monochromatic, complementary, analogous and triadic palettes and copy HEX or RGB.

Open Tool

Applying the 60-30-10 proportion rule

Even a great palette looks chaotic if every colour appears in equal measure. Allocate intentionally:

  • 60% dominant neutral surface: alabaster, warm white or slate backgrounds that let content breathe.
  • 30% structural secondary: deep charcoal or slate for typography, navigation and borders.
  • 10% high-impact accent: your brand hue, reserved strictly for primary buttons, active tabs and focus rings.