A Homepage Needs Three Colours. Decide the Areas Before You Collect Palettes

Changing the colour and finding that nothing changes is a common experience. Blue becomes navy, navy becomes black, and the page still looks cheap. The problem is almost never the choice of colour. It is the quantity.

The same navy, spread across eighty percent of a page, sinks. Reduced to a single hairline, it becomes tension. Colour takes its meaning from area, not from selection.

Collecting More Palettes Makes the Decision Harder

Choosing from a wall of palettes rarely produces a decision.

Palettes are built to look convincing as three or four squares of flat colour sitting side by side. A real page is made of white space, text and photographs. The amount of visible colour is far smaller than the swatch suggests, and the ratio that worked inside the swatch never actually appears on screen.

There is a second problem: swatches carry no ranking. Nothing tells you which colour is the ground, which is the text, and which is used once. Import the colours without that ranking and everything ends up used in roughly equal measure.

Three colours of equal strength will always scatter a page. The instinct is then to go looking for another palette. That loop is what a stalled colour decision usually looks like.

When a colour scheme fails, the chosen colours are rarely wrong.
What is wrong is the area they were given.

Do Not Pick Three Colours. Divide 95, 4 and 1

Reverse the order. Decide the three positions first, then pour colour into them.

The first is the ground — the colour that carries almost the whole screen. White, unbleached paper, or a very dark ink. Ninety-five percent of the surface.

The second is the colour of text and rules. The colour you read with. Around four percent.

The third is used once. A button, one word in a heading, a single line. One percent is enough.

Ninety-five, four, one. At that ratio three colours are plenty. Divide it sixty, thirty, ten instead and nothing leads; the page starts to read as pattern.

The one percent works because everything else is quiet, and that quiet is not the result of restraint. It is the result of allocation.

Counted on a real page, the ratio does not look extreme. Seen as a single sheet, the homepage carries one coloured button and one thin rule above a heading. Everything else is ground, text and photography. The distance between a loud site and a calm one is often just whether that one button and one rule have become three and five.

If the decision stalls, remove one colour at a time from the page you are building. Any colour whose absence costs nothing was never needed. What remains is usually two colours, occasionally three.

Restrained Palettes Are Almost Always Short Ones

The answer to "how do we make it look refined" is nearly always remove, do not add.

Count the colours on a page that holds its composure and you will usually find two: the ground and the text. The rest of the colour arrives inside the photographs.

That is the part most often missed. The colours on a homepage are not only the ones in the palette. Product shots, skin, food, packaging — the moment photography lands, the number of colours on screen doubles.

So a photograph-heavy site needs fewer decided colours, while a site with almost no photography has to carry its interest in the texture of the ground itself.

Fixing the palette before the photography is chosen breaks that arithmetic. Let the direction of the images settle first, then choose a ground that does not fight them. That single reversal removes half the colour discussion.

Legibility Is Built From Brightness, Not Hue

Most requests for a more legible palette are not about combinations of hue. They are about difference in brightness.

Grey text on pale grey is unreadable however elegant the grey. Reading text needs a contrast ratio against its background of about 4.5 to 1 as a working minimum.

Judge that by measurement, not by name. "It is a dark blue, so it must be readable" is not a test. The same navy disappears on black and holds on white.

What usually distorts the judgement is the environment. The page is being made in a dim room on a bright desktop display. It will be read outdoors on a phone with the brightness turned down. The refined pale grey vanishes in daylight. Sending the work in progress to a phone and stepping outside once will change the decision.

One exception is worth protecting: anything clickable. Links and buttons have to separate from surrounding text by brightness. Toning them down to match makes the page calmer and makes the clickable places disappear — a frequent reason a newly tidied site receives fewer enquiries.

Before Opening a Colour Tool, Look at It in Black and White

Colour tools are useful, but opening one too early adds confusion.

A tool returns relationships between hues. The relationship may be correct, yet it says nothing about the area each colour will occupy — and without that, choosing between candidates is only preference.

Do one thing first. Take the page you are building, drop it to black and white, and check that heading, body text and button are still distinguishable by brightness alone.

The method is simple: screenshot the page and pull the saturation to zero. Everything that was leaning on colour becomes visible. Are heading and body the same weight? Has the button sunk into the ground? Does text vanish where it crosses a photograph?

A page that survives in black and white improves when colour returns. A page that collapses in black and white becomes a louder collapse.

The order never changes: structure, brightness, then colour.

The Last One Percent Is What Gets Remembered

That final colour is the brand's colour.

It does not have to be lifted from the logo. The colour of a material used in the product, of a wall in the shop, of the paper things are wrapped in — a colour that already exists in the real object ties the screen to the thing itself.

Avoid choosing for saturation alone. Vivid colours attract the eye and then float away from the photography. A slightly dulled, slightly darker colour sits with images instead of arguing with them.

And use it in one place only. Put it on the button and the heading and the rules, and it is no longer one percent.

A colour placed once is remembered. A colour placed three times becomes decoration.

Keep the Order, Not the Palette

When the colour decision stalls, return to the sequence.

Look at the direction of the photography. Decide the ground. Decide the brightness difference for text. Confirm it in black and white. Then place one colour, once.

Colour comes last. Starting with colour is what keeps the decision open indefinitely.

Once it is settled, do not let it grow. Add a colour with every new page and the site owns ten of them within three years. When the urge to add a colour arrives, what is usually missing is not colour but space.