How Many Colors Should a Website Have?

I think a website needs about ten colour values, grouped into a handful of jobs, which are a page ground and one or two surface steps, an ink for text and a quieter grey for longer copy, two translucent lines, one accent for the things people press, and a red and a green for errors and success, and only the accent has to be a brand colour. The pages of this website mostly use six of them in each mode, two grounds, an ink, a body grey, a hairline at 12% of the ink and a red for form errors, and the only hue on most pages is the gold of the five review stars. When I redesigned a shop app concept for my portfolio, the orange accent had spread to badges, chips, icons and links, so nothing read as the main action, and taking it back to the buttons alone sent 492 decorative icons to the ink colour while the 59 icons which belonged to text links kept the orange.

This post goes through each of those jobs, how many values each one needs, and the contrast rules which decide the exact shades.

Count roles, not colours

A brand guide mostly lists colours by name, such as navy, coral, sand and mint, and a website built from that list tends to use each of them somewhere just because they are there. I would start the other way round, from the jobs which colour does on a page, and give each job one value, which is how the big design systems work. Material Design’s colour roles describe the interface in roles such as primary, surface, outline and error, and Carbon’s colour overview builds its interface on neutral greys with blue for interaction and other colours used sparingly and with a purpose. Apple’s guidance on colour sums up the reason in one line, “Avoid using the same color to mean different things.”

The colours a website needs

Grounds and surface steps

The page needs a ground, which is white on most sites, and one light step for sections which should read apart from it, which is #f4f4f4 here in light mode and #1c1c1c in dark mode. Anything which sits on a surface, such as a chip, a tag or a product image tile, then takes the next step darker, so it looks like part of the section and not like a hole cut through it. On the wine shop redesign in my portfolio the ladder runs from #FEFEFE through #F4F1EA and #EAE5D9 to #E0D9CA, four warm steps where a cool grey would have looked out of place, and Material calls the same idea its five surface container levels.

Ink and a body grey

Headings and labels use the ink, which is #121212 on this website, and longer copy can use a quieter grey, which is #5b5e66 in light mode and #9ea1ae in dark mode here. The grey has to pass WCAG’s minimum contrast of 4.5 to 1 against every ground it sits on, and the light mode grey here measures 6.5 to 1 on white and 5.9 to 1 on the light step, or 3 to 1 for large text, which WCAG defines as 18 points or 14 points bold, about 24 and 18.5 CSS pixels.

Lines

Dividers and card edges work best as the ink at a low opacity rather than as a grey hex value, since a translucent line sits on every ground without a second version, so I use the ink at 12% for normal lines and at 22% for stronger ones. A text field is the exception, because WCAG’s non-text contrast rule asks for 3 to 1 on the border when the border is what shows where the field is, so inputs need a darker border of their own. Material separates the two as outline and outline variant, and the GOV.UK Design System’s colour page lists a border colour and a separate input border colour for the same reason.

One accent

The accent is the brand colour, and it does one job, showing what to press, so it goes on the main buttons and on text links and stays off pills, badges, toggles and decorative icons. On the shop app concept the rule was that an icon keeps the accent only when the label beside it is a link in the accent too, and every other icon goes to ink, which is how the 492 and the 59 came about. A second brand colour mostly makes the page harder to read, since people then have two colours to learn, and I would keep it for illustrations or a single campaign section if the brand insists on it.

Status colours

Forms need a red for errors and usually a green for a success message, and a shop may need an amber for warnings such as low stock. WCAG’s use of colour rule asks that colour is not the only sign, so an error also carries an icon or a message, and links inside paragraphs also carry an underline, which GOV.UK uses by default. This website keeps a red of #b3261e for its contact form, with a lighter twin for dark mode.

Dark mode doubles the count

A site with a light and a dark mode needs a twin for every value, and the twin is mostly not the inverse, since a red which works on white can glare on near black, which is why this website’s form error goes from #b3261e to #f2b8b5 in dark mode. Every new colour needs both versions before it can go on a page, and that is one of the best arguments for keeping the list short, as I found when this website kept both modes. WCAG measures contrast on the colour as it renders, so a translucent line or a grey text is checked against the ground it actually sits on in each mode, as the W3C’s contrast test rule shows with text at a reduced opacity.

Where to start

I would open your site and write down every colour which you can see on the home page and one inner page, then sort each one into the roles in the table above, and any colour which does not fit a role, or two colours doing the same job, is a candidate to remove. Then check the body grey and the input borders with a contrast checker against each ground, and move the accent off anything which is not a button or a link. The type deserves the same restraint, which my post on choosing a headline font for a website goes into, and the buttons themselves are covered in website button hierarchy.

Frequently asked questions

How many colors should a website have?

About ten values in total, a ground and one or two surface steps, an ink, a body grey, two line tones, one accent and two or three status colours, with only the accent taken from the brand.

How many brand colors should a website use?

One as the accent on buttons and links, I think, and if the brand has a second colour, I would keep it for illustrations or one campaign section rather than spread it across the interface.

Should a website use the 60-30-10 rule?

I have not found it in WCAG or in the colour guidance of Material, Carbon, Apple or GOV.UK, so I would work from roles and contrast instead, where most of the page is neutral ground and the accent appears only where people act.

What colour should links be?

The accent, with an underline inside paragraphs so the link does not depend on colour alone, and with at least 3 to 1 contrast against the surrounding text if you leave the underline out anywhere.

Do I need different colours for dark mode?

Yes, every value needs a twin, mostly lighter and less saturated for accents and errors, and each twin has to pass the same contrast checks against the dark grounds.