How to Choose a Colour Scheme for Your Website.

Every website should be easy on the eye. But your website colour scheme isn’t just about aesthetics. When choosing website colours you (and your web design agency) need to consider your brand, your audience and colour psychology, too.

Without careful consideration, your website colour scheme will fail to communicate who you are as a brand. It’ll harm the user experience. And it’ll stop your site from reaching its conversion potential.

In this post, we explain how to choose a colour scheme for your website that ticks all the boxes. Follow our step by step guide and — using brand and market research, colour theory and a few handy online tools — you’ll soon have a colour palette both you and your customers will love.

Contents

• Why is your website colour scheme important?
• How to choose a colour scheme for your website
• Tips for applying a colour scheme to your website

Why is your website colour scheme important?

The website colours you choose make a big difference to the success of your website. That’s because they impact all of the following.

Visual appeal

Your website colour scheme impacts the visual appeal of your website. If you don’t have a cohesive selection of colours, you end with a chaotic colour clash. This can negatively impact UX.

Brand recognition

When you use the same colours across your website and marketing materials, customers find it easier to recognise and remember your brand. Colours can increase brand awareness by 80%.

Brand perception

Companies with consistent, recognisable branding are seen as more reliable and trustworthy. But your website colour scheme has another important impact on brand perception. As we’ll see in a moment, colours impact our emotions. So they influence how a consumer feels about your brand.

Legibility

The colours you use for your website impact its legibility. You need enough contrast between your chosen colours so that users (including those with colour blindness) can see and read your site.

Conversions

Having an accent colour in your website scheme helps to direct user attention where you want it. Call to action (CTA) buttons in a bold colour get more clicks than buttons that fade into the background.

How to choose a colour scheme for your website: step by step

Ready to pick a winning colour combination for your site? Then follow our step by step guide.

Step 1: Get to know colour psychology basics

Before you start looking for colours, you need to understand a few colour psychology basics.

Colour psychology is the study of how different colours affect human emotions and behaviours. It explores how colours influence our moods, feelings, and decisions — without us even realising it.

Colour has a powerful, subconscious effect on the way we feel. It accounts for up to 90% of an initial impression. We then associate those feelings with the thing we’re looking at.

When it comes to business branding, colours are, therefore, really important. You want to make sure that your website colour scheme makes website visitors feel all the right things.

Here’s a quick rundown of common, positive associations with each colour.

• Blue: calm, security, strength, wisdom, trust
• Purple: luxury, wealth, decadence, wisdom, spirituality, sensitivity
• Orange: creativity, courage, confidence, fun, adventure, enthusiasm
• Red: excitement, power, passion, energy, intensity, danger
• Green: nature, life, hope, health, freshness, relaxation
• Yellow: optimism, warmth, happiness, youthfulness, happiness
• Black: sophistication, security, elegance, authority, substance, mystery
• White: innocence, simplicity, cleanliness, purity
• Pink: imaginative, passionate, feminine, creative, quirky
• Brown: grounded, earthy, stable, natural, resilient, dependable

It’s also important to note that colour associations vary from place to place. For example, in Western cultures, white symbolises innocence and purity. In China, it’s associated with death and mourning.

Understanding how colours make your target audience feel is the first step to developing an effective colour scheme for your website.

Step 2: Get strategic

Consider your brand personality and values

When choosing colours for your website, it’s important to think about your brand personality. The right colours tell website visitors something about your brand before they’ve even read any of the copy on your site.

So think about what your brand stands for. Is it fun and playful? Serious and trustworthy? Elegant and inspiring? Then, use colour psychology to choose colours that best reflect your brand personality and values.

Consider your audience

As well as considering the brand personality you want to convey, think about the emotions you want to evoke in your audience. Do you want them to feel excited by your product or service? Reassured? Hopeful?

You should also think about colour preferences for your target market. For example, older generations tend to view pink as a feminine colour. So you probably wouldn’t pick pink as the dominant colour on a website aimed at 50 to 70 year old men. Similarly, your web design colour choices for a children’s clothing store would be very different to the colours you’d choose for a law firm.

Check in with the competition

Your branding — and therefore your website colour scheme — should help you stand out from the competition. So you should avoid using the same colours as a close competitor. Check out what colour schemes your competitors are using. Then, discount them.

It can also help to get a sense of industry-wide norms in terms of website colour schemes. Choosing a wildly different colour scheme can set you apart from the competition. This can work well if your brand is offering something bold and different.

Take a look at Monzo’s branding. Monzo positions itself as a very different type of bank. So they have a bold and playful colour scheme that contrasts with the serious and professional schemes of the established banks.

But tread carefully. Unexpected colours can be unnerving for consumers. They may find it easier to trust a brand that uses colours in a similar way to the brands they already know.

Step 3: Look at your logo

If you have a great company logo that perfectly represents your brand, choosing website colours may be a quicker process than you originally thought.

As long as colours are relevant to your brand and audience, you can pull colours from your logo and use them across your web design. If that doesn’t work, try pulling a primary colour from your logo and using this as a basis for your website colour scheme.

Step 4: Pick your main colour

If you’ve been following our guide up to now, you’ve already:

• Learnt about colour psychology
• Researched your market
• Defined your brand personality

Using this information, you can pick the main colour for your brand and website. Once you’ve decided on a hue, get the HEX colour code for your chosen colour. This makes it easier to find complementary colours using online tools.

Step 5: Take a look at a colour wheel

A colour wheel is a useful piece of design kit. It helps you see which colours work well together in a website colour scheme. But before you start playing around with a colour wheel, it helps to understand some commonly used colour terminology.

Primary colours:

Red, blue and yellow

Secondary colours:

The colours you get when you mix two primary colours (for example, orange is a secondary colour, made by mixing red and yellow)

Tertiary colours:

The colours you get when you mix a primary colour and a secondary colour

Hues:

Another name for primary and secondary colours

Shades:

The colours you get when you add increasing amounts of black to a hue

Tints:

The colours you get when you add increasing amounts of white to a hue

All hues, shades and tints appear on the colour wheel. You can pick colours from different places on the colour wheel to create different types of website colour schemes.

Step 6: Discover different types of website colour schemes

There are lots of different ways to combine colours on the colour wheel. Here are the most common colour schemes used in web design.

Monochromatic

Monochromatic colour schemes use just one colour in varying shades and tints. These types of colour schemes don’t tend to have a lot of contrast. But they do look simple and sophisticated.

Analogous

An analogous colour scheme is created by pairing one main colour with the colours directly next to it on the colour wheel. Again, this type of colour scheme doesn’t create a lot of contrast. But it’s great for creating soft, soothing designs.

Complementary

A complementary website colour scheme takes two colours directly opposite each other on the colour wheel. You can also use the shades and tints associated with these colours. This provides a lot of contrast. So you may like to use one colour predominantly and the other as an accent.

Triadic

A triadic colour scheme uses three equidistant colour wheel colours. This approach creates a colour scheme with similar tones but lots of contrast. To avoid colour overload, you can choose one dominant colour and then pick other triadic scheme colours in a softer tint.

Step 7: Use colour scheme tools to pick other website colours

Once you’ve picked your main website colour and understand a little about the different types of website colour schemes, it’s time to pick your other website colours. To do this, you can use your trusty colour wheel — or turn to some really cool (free) tools on the web.

Here are a few of our favourites:

Adobe Color

Adobe Color allows you to select the type of colour scheme you want to create. You then move around the colour wheel to try out different colour combinations.

Canva

Canva’s colour scheme generator works like Adobe’s. You select your main colour, pick a type of colour scheme and then Canva does the rest.

Khroma

Khroma is an AI colour palette generator. You select 50 colours most representative of your brand. Then, Khroma presents you with complementary colour combinations you’re sure to like.

Coolors

Coolors is another great colour scheme tool. You can select your main colour and lock it in. Then keep generating combinations to find colours that work beautifully together.

Designinspiration

Once you’ve chosen a colour palette, Designinspiration allows you to see that colour scheme in action. Select up to five colours. Then view stock images and graphic designs that share the same palette.

Step 8: Ensure you have a neutral colour and an accent colour

Every website colour palette needs a neutral colour. A neutral helps you to create web page white space. This is essential if you want to avoid a cluttered web design.

Another thing that every website colour palette needs? An accent. This is a colour that stands out from all the others in your colour scheme. It comes in handy for grabbing user attention. And it works well for buttons, calls to action, and hyperlinked text.

Step 9: Don’t go overboard

When choosing your website colours, stick to three different hues at most. You can use varying shades and tints within this hue. But add in too many different hues and you end up with a confusing and cluttered design. You can find the shades and tints related to your hue with this handy online tool: Make Tints and Shades.

Tips for applying a colour scheme to your website

Here are a few quick tips to consider when applying your colour scheme to your website.

• Be consistent: apply your colour scheme consistently across all pages (and to marketing materials beyond your website, too)
• Make it readable: there needs to be enough contrast between text and background so it’s not a struggle to read the copy
• Make it accessible: you need to ensure that your website is accessible, including for people with colour blindness (Read more: How to design for colour blindness)
• Create a visual hierarchy: use bold colours for the most important information on your website
• Make CTAs stand out: use accent colours to draw user attention to buttons and notifications
• Use neutral colours for balance: give website visitors a break from all the colour and help them process the information on your webpage by incorporating neutrals
• Test and refine: test your colour scheme across various devices and browsers, altering your scheme if you spot issues

Want help creating a website colour scheme?

Hopefully, you now know how to choose a colour scheme for your website. The process involves colour psychology and theory. And it requires an understanding of which colours best represent your brand values and personality.

Colours chosen, a great web designer can apply your colour scheme to your website, ensuring the most important details pop — and that all colours work beautifully together.

Here at Radical, we help businesses develop a distinctive visual identity. As part of our branding service, we create logos, typography, colour schemes and brand guidelines to help your brand stand out from the crowd.

Want to build a brand that feels more like you? Then contact the friendly Radical team today to chat about your project.