How to Choose the Right Colour Scheme for Your Website

Colour is one of the first things people notice when they land on a website, often before they've read a word. The right palette can tell visitors what kind of brand you are, set the mood and draw attention to the things you want them to do. Understanding the associations different colours carry won't give you a formula, but it will help you choose a palette on purpose rather than by default.

One caution before we start: colour associations are cultural and personal, and the research behind "colour psychology" is mixed. Treat what follows as common associations in Western design, not rules. Context, shade and how you combine colours matter at least as much as the colours themselves.

What different colours tend to suggest

1. Red: energy and urgency

Red grabs attention and is often linked with excitement, passion and urgency. That's why online stores often use it for sale banners and buttons. It can also suggest danger or warning, so it works best in controlled doses rather than across a whole page.

Coca-Cola is the classic example of red used as a brand colour. Verywell Mind has a good overview of the associations of red.

2. Blue: trust and calm

Blue is associated with calm, trust and professionalism, which is why it's so common among banks, healthcare providers and tech companies. Because it's widely liked, it's also a safe choice for a broad audience. The downside is that it's everywhere, so a blue brand has to work harder to stand out.

LinkedIn and Facebook both build their identities around blue. Canva's guide covers the meanings of blue in more detail.

3. Yellow: optimism and warmth

Yellow tends to feel cheerful, warm and friendly. It can be tiring to look at in large areas, though, and yellow text on a white background is very hard to read, so it usually works best as an accent.

McDonald's pairs yellow with red for a bright, energetic look. Smashing Magazine's guide to the meaning of colour is an older but still useful read.

4. Green: growth and balance

Green is linked with nature, growth and health, which makes it popular with wellness and environmental brands. In North America it's also associated with money, so some financial brands use it too.

Whole Foods uses green to support its focus on natural products. There's more on green at Color Psychology.

5. Purple: luxury and creativity

Purple has long been associated with royalty, partly because purple dye was once extremely expensive. Today it often suggests luxury, creativity or imagination, and it suits brands that want to feel a little special or unconventional.

Cadbury and Hallmark both use purple prominently. See Color Meanings for more.

6. Black: elegance and authority

Black can feel elegant, powerful and modern, and it's common in minimal, high-end design. Large areas of black can feel heavy, so it's usually balanced with white space or lighter tones.

Chanel is a well-known example of a brand built on black and white. Envato Tuts+ has a helpful piece on designing with dark palettes.

7. White: simplicity and space

White suggests cleanliness, simplicity and openness. In web design it's less a colour than the space around everything else, and using it generously makes pages easier to read.

Apple's website is a good example of white space doing a lot of the work. WP Engine has a guide to using white space effectively.

8. Orange: energy and friendliness

Orange combines some of the energy of red with the warmth of yellow. It tends to feel friendly and enthusiastic, and it's a popular choice for buttons because it stands out without feeling as aggressive as red. Like red, it's best used as an accent.

Fanta uses orange to feel fun and playful. More at Color Psychology.

9. Pink: playful or soft

Pink ranges widely depending on the shade. Pale pinks feel soft and gentle, while hot pinks feel bold, confident and playful. It has traditionally been associated with femininity, though many brands now use it simply because it's distinctive.

Barbie is the best-known example of a brand owning a shade of pink. Canva's guide covers the meanings of pink.

10. Grey: neutral and understated

Grey is neutral and can feel calm, modern and professional. It's most often used as a supporting colour, for text, backgrounds and borders, so that the brighter colours in a palette can stand out.

See Color Psychology for more on grey.

Practical tips for building a palette

• Start with one main colour that fits your brand, then add one accent colour and a few neutrals. Most good website palettes are simpler than people expect.
• Keep your accent colour for actions, such as buttons and links, so people learn what's clickable.
• Check contrast. Text needs enough contrast against its background to be readable. The WCAG accessibility guidelines recommend a ratio of at least 4.5:1 for body text.
• Look at your competitors. If everyone in your field uses blue, a different colour may help you stand out.

Use a palette generator

Palette tools make it much easier to find colours that work together:

• Coolors generates palettes quickly and lets you lock the colours you like while you try others.
• Adobe Color builds palettes from colour rules such as complementary or analogous, and can pull a palette from a photo.
• Paletton is a simple tool for building complementary and analogous schemes.

Bringing it together

A good colour scheme does more than look nice. It shapes how people see your brand and helps guide what they do on your site. Choose colours that fit your brand and your audience, keep the palette simple, make sure everything is readable, and test it on real pages before you commit.

If you'd like to start with the basics, read What Are the Primary, Secondary and Tertiary Colours.