How to choose a colour palette: harmony, contrast and the 60-30-10 rule

Step 1: pick a base colour

Most good palettes grow from a single colour. It might be a brand colour you already have, a colour from a photo or product, or simply the feeling you want the design to give. Colour associations vary between cultures, but these are common starting points:

Saturation matters as much as hue. A bright, saturated blue feels energetic; a dusty, muted blue feels calmer and more grown-up. Decide on the overall feel before you fine-tune the exact shade.

Step 2: choose a colour harmony

A harmony is a rule for picking colours that sit well together, based on their positions on the colour wheel.

• Monochrome: lighter and darker versions of one hue. Very safe and calm, but needs a clear accent.
• Analogous: neighbours on the wheel, such as blue, teal and green. Gentle and natural.
• Complementary: opposites, such as blue and orange. High energy; use one as the main colour and the other sparingly.
• Split complementary: one colour plus the two either side of its opposite. Lively but easier to balance than pure complementary.
• Triadic and square: three or four colours spaced evenly round the wheel. Bold and playful, best with one colour in charge.

Step 3: give each colour a job with 60-30-10

Five colours used equally look busy. The classic fix from interior design is the 60-30-10 rule:

1. 60% dominant: usually a neutral, such as off-white, warm grey or a deep navy for a dark design. This is your background.
2. 30% secondary: your base colour, used for headers, panels and larger shapes.
3. 10% accent: a contrasting colour for buttons, links and anything you want people to click or notice.

A typical website palette therefore has a light neutral, a dark neutral for text, a main colour, an accent, and perhaps one extra shade for borders or hover states.

Step 4: check contrast and colour blindness

A palette is only useful if people can read what's on it. The Web Content Accessibility Guidelines (WCAG 2) measure contrast as a ratio from 1:1 (no difference) to 21:1 (black on white).

Large text means roughly 24px regular or 19px bold and above. Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, most often red-green, so also check that nothing relies on colour alone: a red error and a green success message should differ in wording or icon too.

Building a palette in Hue Lab

Hue Lab runs all four steps in your browser:

1. Generate. Press the spacebar (or tap Generate, or shake your phone) for a new palette. Choose a method first: Harmonious, Analogous, Monochrome, Triadic, Complementary, Split complementary, Square or Accessible (AA pairs).
2. Lock what you like. Lock a colour (or hover and press L) and only the unlocked colours change on the next spacebar. Drag colours to reorder them, and use undo if you go too far.
3. Check it. The Contrast tab shows the WCAG ratio for any text and background pair, can nudge text until it passes AA, and lists every pair in your palette. The vision menu previews the palette as seen with protanopia, deuteranopia, tritanopia or achromatopsia.
4. See it in use. The Visualise tab puts your colours on a landing page, a dashboard and a poster, with buttons to shuffle roles and flip light and dark.
5. Export. Copy CSS variables, a CSS gradient, JSON, SVG or Figma text, or share a link, a palette strip or a share card.

Hue Lab is free, with no ads or account, and saves up to 10 palettes in your browser. Hue Lab Pro ($2.99 once) adds unlimited saves, Tailwind and SCSS export, and palettes pulled from your own photos (you can try From image a few times free first). Photos never leave your device.

Tips for a palette that lasts

• Tint your neutrals. A grey with a hint of your base colour feels more deliberate than a pure grey.
• Avoid pure black on pure white for long reading. A very dark grey on off-white is softer and still passes AAA.
• Plan shades, not just colours. Buttons need hover, pressed and disabled states, so you'll want lighter and darker steps of your main colours.
• Test in dark mode if your site has one. Saturated colours often need toning down on dark backgrounds.
• Borrow from a photo. A photo you love already has colours that work together; extract them and adjust.

Common palette mistakes

• Too many equal colours. Pick one boss colour and let the others support it.
• Light grey text on white. It looks elegant in a mock-up and fails contrast on a real screen.
• White text on yellow, orange or light green buttons. These usually need dark text instead.
• Red and green as the only signal. Add icons or words for people with colour blindness.
• Choosing colours on one screen only. Check on a phone in daylight too.