How many colors should a website have?

01The roles each color plays

Thinking in roles rather than a count makes the answer clearer. A site needs a color for each job, and most jobs can share neutrals.

02Why fewer colors look better

Color is a signal. When everything is colorful, nothing stands out, and the eye has no idea where to go. A neutral page with one accent color tells visitors exactly where to click: the accent is the button. This is one reason restrained sites feel calm and expensive while multi-colored ones feel busy.

Research on first impressions points the same way: people rated websites with lower visual complexity as more appealing, in the University of Basel and Google study described on Google's research blog. Color is one of the biggest contributors to visual complexity.

03How to choose your colors

1. 1Start from one brand colorUse it as the accent. If you do not have one, choose a color that fits your audience's expectations.
2. 2Pick the backgroundWarm off-white for friendly brands, pure white for clinical clarity, deep charcoal for a dark theme.
3. 3Pick text colorsNear-black or near-white for body text, plus one muted shade for secondary text.
4. 4Check every pairingBody text needs a contrast ratio of at least 4.5:1 under WCAG; test with the contrast checker.
5. 5Add only what is missingA success green and an error red for forms, if you need them, and nothing else.

04When more colors are fine

Illustrations, charts, product photos and category tags can use more colors without cluttering the interface, as long as the buttons and links keep a single, consistent accent. Brands built on color, such as children's products or playful consumer apps, can go further, but they usually still keep one dominant color for actions.

If you want proven combinations, the website color palettes collection on this site has palettes that pass contrast checks, and how to choose website colors explains the reasoning in depth.

• Charts and data: use as many as the data needs, ideally from one family.
• Illustrations: a wider palette is fine if it shares the accent.
• Status colors: green, amber and red for success, warning and error.

05Colors in dark mode

If your site offers a dark theme, you are not adding colors so much as giving each role a second value: a dark background, a light text color, slightly lighter surfaces for cards and an accent adjusted so it still reads clearly. Pure white text on pure black can feel harsh; softer near-white on charcoal is easier on the eyes. Keep the number of roles the same in both themes, and check contrast again for the dark versions, because an accent that works on white often fails on charcoal. Should my website have dark mode? covers whether to offer one at all.

06Common color mistakes

The usual problems are too many accents (every button a different color), gray text too light to read, and a brand color used for large backgrounds where it overwhelms the content. Common website design mistakes covers these with fixes, and best background color for a website covers the largest color decision on the page.