how many colors should my website use? the 60-30-10 rule and when to break it

design · Oct 6, 2026 · 5 min read

the honest answer is a number small enough to be a plan: one color doing the work, one supporting it, one accent for action. plus neutrals — the whites, near-blacks and greys that are technically colors but function as the canvas. everything else is decoration that asks visitors to keep more in their head than your message deserves.

this is not taste, it is arithmetic: each additional color multiplies the combinations your page can produce, and most of those combinations are worse than the base. restraint is what makes the remaining choices look deliberate.

the 60-30-10 split, translated for websites

the interior-design rule survives because it works:

60 percent — the canvas. background and neutrals. this is where the white space of the whole site lives, and why the biggest area is the quietest.
30 percent — the support. your brand's main color: headers, cards, the places that group information. it sets the temperature of the site.
10 percent — the accent. one saturated color reserved for the things that act: buttons, links, the current state. the whole point of an accent is scarcity — the moment five colors are equally loud, none is an accent and nothing points anywhere.

if you have read what makes a website look cheap, you have already seen the failure mode from the other side: too many colors is one of the loudest tells there is.

how to pick the actual colors

start from the brand, not from the palette picker: if the business has a logo, it already owns a color. that is your 30. then:

pick the accent by job, not by preference — it is the color of do the thing, so it must contrast hard against the canvas and the support. blue-and-orange works in a thousand decks for a reason.
extend the neutrals first. most "we need more colors" moments are actually "our greys have no range": a good neutral ladder (background, surface, border, text) creates depth without adding hue.
check the pairing for readability — text on every background it will sit on. contrast is a number, not an opinion: the accessibility threshold is 4.5:1 for body text, and i tune mine by sweeping the palette the way my color theory writeup describes.

dark text on light background, one accent, done. if it feels too plain, the fix is photography and spacing, not a fourth hue.

the exceptions — when more colors is right

the rule bends where the content is the color:

portfolio and photography. the work supplies the palette; the site recedes to neutrals so the images set every mood.
brands that genuinely own a rainbow. a children's brand, a festival, an art supply shop — there the many colors are the message, and the discipline moves elsewhere: confine the rainbow to specific components and keep typography and layout brutally consistent.
data and categories. charts and tags earn a color per meaning. the rule there is consistency: a color means one thing everywhere on the site, or it means nothing.

the exceptions share one trait: the colors are chosen system, not accumulated accident. that is the actual dividing line — not the count.

FAQ: the questions i actually get

should the website match my logo exactly?

the logo color yes, the whole site no: the logo's exact hue is often too saturated to carry 30 percent of a page. tint it darker or softer for large surfaces and keep the pure version for small marks.

what about dark mode?

it doubles your surface testing, not your colors: same accent, adjusted neutrals, and the contrast checks run twice. i ship both, and the sweep method in the color-theory post is how the dark theme earns its numbers.

can i just use the palette my template came with?

you can, and thousands of sites do — which is exactly the problem. recoloring the template's one accent is the single highest-leverage hour in do-it-yourself customization.