$ ./pick-colours.sh

Colours for your site

Any one of all 11,616 combinations comes out with enough contrast to be read comfortably.

// how it works

Picking a colour scheme for your site is simple. Anybody can do it:

01
Theme

First decide whether your site should be light or dark.
02
Four colours

Then pick four colours by what each one means: the background colour, the main heading colour, the sub heading colour and the text colour.
03
Preview

You see a preview of the current combination as you go. Or you can pick one of the 18 ready-made ones.
04
Enquiry

One click on the button then adds your finished choice to an enquiry.

// four colours, four jobs

What each colour means

A website does not need ten colours. It needs one to stand on, one that carries the brand, one a shade quieter and one to read text in. Every colour has its job on the page — on its own it means nothing, what matters is where it is used.

Page background colour

The colour the page stands on. Pure white is only one of the options — a faint pull towards cream or grey makes a page noticeably calmer and glares less across a large area.

Main heading colour

The colour that accents the page. Beyond headings it is carried by default buttons and links, which makes it the brand colour too — and exactly why there should not be too much of it. Because a colour that is everywhere is not an accent.

Sub heading colour

The second colour, a shade quieter. It picks out less important headings and captions so the page has more than two levels without turning colourful. It is also the colour of buttons that are not the default one. It can happily be the same as the main colour.

Text colour

Ordinary text is always almost black — and almost white on a dark background. You are only choosing its temperature: cool suits blue and teal, warm suits terracotta and bronze. It is a difference nobody notices until they see the two side by side. Text always has to be legible against the background colour.

// above the colours

Light or dark — and still one palette

Above those four colours sits one more choice: whether the site glows or goes dark. It is not a second palette and it is not done twice. Every shade you pick has a light and a dark form, and the theme decides which one applies. You pick “green” once and it is the right green on a white page and on a nearly black one.

In the picker below, the theme switch therefore changes no colour — only which form of it you are looking at. The background is kept separately for each theme, so switching never lands on a combination nobody chose.

// ready-made combinations

Or let us suggest one

Alternatively, here are 18 proven combinations that work together.

Graphite

A universal corporate blue on cool grey. Fits services, trades and B2B — it offends nobody and pushes nowhere.

Light · Cool grey · Slate blue · Stone grey · Cool

Colours for your site

What each colour means

Page background colour

Main heading colour

Sub heading colour

Text colour

Light or dark — and still one palette

Put together your own colour scheme

Or let us suggest one

Graphite

Indigo

Paper

Steel

Forest

Mint

Ocean

Terracotta

Tangerine

Sunset

Vineyard

Lilac

Sand

Charcoal

Midnight

Moss

Coffee

Amber

What about the logo?

Picked one? Send it over