Color Scheme

Every colour, and what it is for

Eight colours, each with one job.

• Base. The main colour of your site. Your primary button is this colour. This is the one you choose; the rest start from it.
• Secondary. The second button colour, for the action that is not the main one. Think "Save" and "Cancel".
• Text. Your ordinary words. Near-black on a light page, off-white on a dark one.
• Quieter text. Captions, notes, and the small print under a heading.
• Button text. The words sitting on a coloured button.
• Cards. The panels that sit on top of the page background.
• Borders. The lines around cards and boxes.
• Page background. The page itself, behind everything else.

How each one is worked out

From your base colour and from whether the page is Light or Dark.

• Secondary is your base taken a quarter turn round the colour circle, so it reads as a different colour without arguing with the base.
• Text is #333333 on a light page and #fafafa on a dark one. Near-black and near-white rather than pure black and pure white, which is what the design systems that get this right actually ship: pure black on pure white is harsh to read for any length of time.
• Button text is off-white on a dark button and near-black on a pale one. A sky-blue button with white words on it cannot be read, so whichever of the two really stands out on your base is the one offered.
• Cards, borders and the page background carry a trace of your base colour's hue and almost none of its strength, so the page hangs together without the background competing with anything.

What "readable" means here

Measured and told to you. Never forced on you.

Six pairs matter to somebody reading your site: your words on the page, your quieter words on the page, your words on a card, the button words on each of your two buttons, and the card edges against the page. Each pair is measured the way the web accessibility guidelines measure it, and the number is shown to you.

Ordinary words need to stand out 4.5 times against what is behind them. Edges need 1.25, because an edge only has to be visible, not readable.

Nothing is changed for you. If a pair falls short you are told which one and by how much, and you decide. It is your site, and a colour you chose on purpose is yours — including one somebody else would call a mistake.

The one exception is the secondary colour, because that one is not yours: it is worked out. So it is nudged lighter or darker until your button words really read on it. Your base is never touched that way.

Walk-through one: see your own colours

Put a colour in and every role is worked out on the spot, by the same server that works them out for your real site.

1. Put a colour in the box below, or press the swatch and pick one.
2. Choose Dark or Light, then press Work them out.
3. Read down the list. Each row is one colour and what it is for.
4. Try the other page setting. The same base colour gives near-black words on a light page and off-white words on a dark one, and the cards and borders move with them.

Nothing here is saved and nothing touches your real site.

Walk-through two: change one and watch it

The same colours drawn into a small piece of a real page, with the readable check underneath.

1. Press Draw it using whichever colour is in the box above.
2. Change the secondary colour in the box that appears and press Draw it again. Watch the second button and the small uppercase line move with it.
3. Try a colour that is hard to read — a very pale one, or one very close to the page background. The check underneath turns and tells you which pair fell short and by how much, and the colour is still used, because it is your choice.

← Back to your Site settings · All the guides