20 min read

Colour Schemes

Choose a small set of colours that suits the brand and audience, with enough contrast to read easily.

Why a Colour Scheme?

A colour scheme is a small set of colours used across the whole site. Consistent colours make a site look professional and help people recognise the brand. Colours also create a mood : warm browns and golds feel cosy and inviting — right for a tea room.

Ways to choose colours that work together
Ways to choose colours that work together

A simple way to balance colours: 60% — a main background colour (often light and quiet). 30% — a secondary colour (header, footer, cards). 10% — an accent colour for buttons and links, so they stand out.

Worked example

Kasun's colour scheme for the Ceylon Leaf Tea Room

Role Colour Hex Used for Background (60%) Cream #FBF6EE Page background Secondary (30%) Tea brown #5A3825 Header, footer, headings Accent (10%) Saffron gold #D9962B Buttons, links, highlights Text Dark brown-black #2B1D14 Body text Reason: warm, earthy colours suggest tea and a relaxing afternoon; dark text on cream is easy to read; the gold accent makes the "Order now" button stand out.

Colour mixer (RGB)

Red217 → D9Green150 → 96Blue43 → 2B

Hex: #D9962B

rgb(217, 150, 43)

≈ CMYK 0% 31% 80% 15%

The CMYK figures use a simple formula. Real print conversion (for example in Photoshop) uses colour profiles, so the numbers will differ a little.

Try it:

Try building your own palette. Note the hex code of each colour for your plan.

Text must stand out from its background. The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5 : 1 for normal text (3 : 1 for large text). Use a contrast checker, such as WebAIM's, to test your pairs. Also, never use colour alone to show meaning — for example, mark required form fields with a word or symbol as well as a colour, because some people are colour-blind.

Practice

In the 60-30-10 rule, what is the 10% colour usually used for?

Colour Harmonies

Ways to choose colours that work together
Ways to choose colours that work together

The 60-30-10 Rule

A simple way to balance colours: 60% — a main background colour (often light and quiet). 30% — a secondary colour (header, footer, cards). 10% — an accent colour for buttons and links, so they stand out.