Website colour schemes: Using colour in website design

Website colour schemes

Colour is a fundamental aspect of how we perceive the world around us. In fact, it’s so deeply ingrained in our experience of life that we often take colour for granted. From the vivid oranges and reds of a sunset, to the deep and mystical blue of an ocean, colour is everywhere. The right hue has the power to mould our perceptions of a situation, and even change the circumstances we find ourselves in. That’s why, website colour schemes are one of the most powerful tools in a designer’s arsenal.

Choosing the best website colour schemes can make or break a design, and some of the most iconic imagery in our world today might not come from the background you’d expect. For instance, Facebook is blue because it’s the richest colour for Mark Zuckerberg, the red-green colour-blind entrepreneur. Yet blue also promotes a sense of friendship and security from a psychological level, making it the ideal choice for a social platform.

According to experts like Buffer, we make more than 90% of our assessment of a product or service based on colour. It makes sense then, that designers would focus carefully on the colours used in each design. After all, your website is your first chance to make an impression on your customer. If your colour pallet is all wrong, then they’re likely to abandon your website in search of something more appealing.

Colour schemes for websites: Colour theory

So, how do we define the best website colour schemes?

Well, one of the first things that designers learn about when pursuing their new career, is the concept of “colour theory”. For the uninitiated, colour theory is a combination of art and science that focuses on the way the human brain responds to certain combinations of colour. It addresses not only the practical nature of colour, such as how one hue can make part of a website stand out, but also the psychological impact of different tones and images.

When it comes to designing a website, colour is just as important as usability and navigation. After all, a well-designed website will quickly be disregarded if it’s covered with unattractive colours. Colour theory is a set of principles that are used to create harmonious and seamless combinations of colour that can be applied to everything from graphics, to background images, logos, and text.

The fundamental rules of colour theory are displayed through “colour wheels”, or colour charts that help designers to see how different colours interact.

Website Colour Schemes

By using the colour wheel, designers can create a “colour scheme”, which is a collection of colours used in design for a range of media purposes. For instance, the most common colour schemes fit within a set group of specific categories, including:

  • Monochromatic schemes
    Monochromatic website colour schemes are made up of various shades or tints of a single colour. Because they’re so simplistic, these schemes are easy to get right, and can be highly effective, authoritative, and soothing.
  • Analogous schemes
    Analogous website colour schemes are more complex. They’re made up of colours and shades that are adjacent to each other on the colour wheel, and create a bright, well-blended effect in the area they’re used. Because they have the same light ray wavelengths, they can be easier on the eye.
  • Complementary schemes
    Complementary website colour schemes are simply schemes that have been designed using colours that are opposite to each other on the colour wheel. That might include red and green, blue and orange, or purple and yellow. It’s easy to get this kind of colour scheme wrong, but when it’s done right, it can give your website a more vibrant, strong, and energetic feel.
  • Triadic schemes
    Finally, triadic website colour schemes are some of the most popular options among designers, particularly in the digital space. These schemes use a combination of three colours which are equal distance apart from each other on the colour wheel. While primary-colour based triads can be garish, secondary colours can provide a softer contrast, and a vast range of visual interest for a website page.

Good website colour schemes: What do colours mean to us?

So, you know the basics of where web-designers start when creating the best website colour schemes. However, it’s worth noting that a great design doesn’t just come from looking at the distance between different segments on a wheel.

Though the basics of colour theory are essential to most designers, they also need to consider the emotional and psychological impact of each colour too. Understanding how each different colour prompts disparate actions allows designers to make choices that support the fundamental aims of a specific company.

Though it seems simplistic, colour has a significant impact on our emotions and attitudes. When we examine colour, our eyes communicate with the hypothalamus in our brain, which connects to the pituitary gland, endocrine system, and thyroid glands. This journey leads to the release of hormones that change the way we think, feel, and act.

In creating an effective design, web experts examine the concept of “colour psychology”, or how colour changes human behaviour. One part of the broader field of “behavioural psychology”, colour psychology is all about testing the theories behind why certain hues make us think and feel in different ways. Though the research into colour psychology is ongoing, some facts are indisputable.

For example, a peer-reviewed article found that it takes around 90 seconds for a customer to form their opinion about a service or product. During that time, we make about 62-90% of the decision based on the colour of the product alone. In other words, no matter what your business does, colour is critical to success.

The best website colour schemes: Examples

So, how do certain websites use colours to elicit specific thoughts, feelings, and reactions?

A study called “Exciting red and competent blue” found that purchasing intent can be greatly affected by colours, because those colours create a “personality” for the company. In other words, the website colour schemes that companies use, or designers use on the behalf of companies, can help us to define certain brands, and the products they sell.

Let’s look at a few examples.

1. Red

Red is one of the most popular colours on the web today. It’s engaging, impossible to ignore, and brimming with passion. Red is often associated with love, danger, or fire, and it’s such a strong and dynamic colour that it instantly inspires passionate responses. However, it’s important not to over-use red, or you could make your visitors uncomfortable.

Website Colour Schemes

Pinterest is an example of a company that uses red well online. The colour highlights specific aspects of their design, and blends in with other, softer colours of black, grey, and white. Red can also work temporarily for sales, and promotions, to show your visitors that something unusual is happening on your website.

2. Orange

Orange is a warm and energising colour. It’s neither as intense and vibrant as red, nor does it have the hazardous associations of yellow. Orange feels warm, rather than hot, which makes it a friendly colour, ready to invite people to act, rather than pushing or forcing them to behave with urgency.

Orange can work on a website to stimulate visitors, and leave them feeling enthusiastic, cheerful, and creative. However, like red, and other bright colours, it’s best used in moderation.

Website Colour Schemes

Amazon.com is a great example of a website that uses flashes of orange to inspire positivity and creativity in its audience. The entire website isn’t soaked in orange, but the bright colour adds fun and friendliness to an otherwise understated combination of white, grey, and blue.

3. Blue

We mentioned above that Facebook’s blue was chosen for a somewhat strange reason. However, it was also the perfect choice for this social-first platform. There are many corporate and business websites that use blue tones, because the colour naturally makes us think about things that are safe, secure, and comforting.

Blue is basically the anti-red. Rather than inspiring urgency, blue calms the viewer down and reduces worry or concern. Because it’s soft and reassuring, blue can easily be splashed all over a website design without any fear of overwhelming the visitor.

Website Colour Schemes

Additionally, blue is also the world’s favourite colour, so it’s hard to go wrong with a collection of blue tones.

4. Green

Green naturally helps us to feel more optimistic. That’s why we keep plants in our offices, and situate our desks so that we can gaze out of the window when we’re feeling unproductive. Because it reminds us of nature, green helps us to feel calmer and more productive, as though we’re connected to something bigger.

At the same time, green also has connotations with wealth and money. Because of this, you’re likely to see plenty of financial websites covered in green. The colour represents balance, harmony, and freshness. It can help us think about saving money, making money, or even being more budget-friendly.

Website Colour Schemes

Groupon have made fantastic use of the colour green in their brand. Not only does it show that you’re directly dealing with money, but it also represents the refreshing money-saving approach to purchasing that’s at the heart of Groupon’s manifesto.

5. Purple

Purple is most frequently associated with words like creativity, imagination, and dignity. While stronger shades of purple link to romance, darker shades are typically connected with wealth and luxury. Often, purple is used in fashion and beauty-based businesses, because it’s a highly feminine colour. In surveys on colour and gender, women considered blue, purple, and green to be their favourite colours. On the other hand, men hate purple, orange, and brown.

Similarly to red, it’s worth noting that people can find purple to be very strong and overpowering. With that in mind, it’s a good idea to use purple in combination with softer, monochromatic colours like black and white.

Website Colour Schemes

Yahoo.com uses purple accents throughout almost all its branding. However, it’s careful to subdue the impact of the purple with plenty of white space.

The golden rules of colour and web design

Good website colour schemes come from an understanding of how colours blend with, and complement each other on a visual, and emotional level. Web designers know that the internet would be an incredibly boring place if there wasn’t any colour to differentiate different sites. However, figuring out how to use colour effectively can take a great deal of time and focus.

Often, when crafting the best website colour schemes, designers will need to follow a selection of specific rules to help them make crucial decisions about where to place certain colour combinations. Importantly, even when we follow these rules, there are times when a business may need to re-assess their use of colour. After all, preferences and techniques change with time. That’s why website layouts and company logos evolve over the years.

Website colour schemes rule 1: Focus attention

Colour focuses the mind and draws the eye. If a website started off with nothing more than a greyscale look, with a white background and black text, colour would be the solution that’s used to draw the eye around the page. This is why the majority of websites aren’t filled with colour. Instead, they use certain hues to push you to look at links, buttons, and headlines.

Website Colour Schemes

Take a look at hubspot.com’s landing page for instance. Most of the page is designed with whites, greys, and blacks, but it’s interspersed with bursts of orange and blue that naturally draw the eye. Everything from the logo to the call-to-action buttons are designed to pull your attention and prompt you to act.

Website colour schemes rule 2: Show personality

Colour has a wonderful way of setting the mood or tone of a brand or website. Chanel.com uses a combination of soft colours and monochromatic tones to create a romantic and luxurious experience that appeals to the feminine part of your brain. Because nothing on the website uses bright or garish colours, you instantly get a feeling of quality and understated value.

Website Colour Schemes

What’s more, the use of white space and clear fonts creates a professional, elegant overall look that speaks to the brand’s personality. Colour can help you to define yourself as a brand. Whether you’re looking to come across as friendly and warm, or sophisticated – it’s all about colour.

Website colour schemes rule 3: Make a statement

Although the best website colour schemes often come from a close consideration of the rules and techniques used for appropriate design, it’s worth noting that there are times when you can break the rules. Though there’s something to be said for creating an experience that your audience expects, there’s also value in designing something that’s completely beyond the norm.

For instance, the last thing you’d expect when you head to a website with “symphony” in the title, like Gagasymphonyorchestra.com is a bright pink background. The word “symphony”, and even the term “orchestra”, evokes the idea of classical, soft tones.

Website Colour Schemes

However, this website is effective because it challenges your existing perceptions and forces you to take notice. The Gaga Symphony is creative, fun, and vibrant, so the bright colours make sense.

Website colour schemes rule 4: Provide flow and cohesion

Colour can do more than make an instant impact. It can also guide a user along with the flow of a website. It’s a lot like guiding a user’s eye throughout a blog post with a collection of images, and subheadings.

If you’re using colour for flow, then it’s worth noting that the hues you choose can be subtle. They don’t need to be over-the-top or dramatic, and it’s especially helpful to make sure that those colours blend well together.

Website Colour Schemes

Take Dropbox.com for instance. The website uses a monochromatic colour scheme of soft, and darker blues to draw the visitor down the page, and pull attention to its call-to-action buttons. As you move through Dropbox, you’ll also notice different colours like green and orange that seem to blend well with the overall experience of the website.

The worst colour schemes for websites

So far, we’ve covered colour theory and colour psychology. We’ve examined examples of the best uses for colour, and introduced some of the golden rules of design in website colour schemes. However, one question remains: “Can you go wrong with a certain colour?”

The web is a veritable rainbow of websites and brands. Colour is an excellent tool for grabbing the attention of users, providing plenty of visual impact and interest, and creating contrast. However, there are hues and colour combinations that all designers should shy away from, whether creating apps, websites, or any other branded media.

So, what are the worst colour schemes for websites?

1. Neons

While good website colour schemes know how to use bright colours to draw attention, neon colour schemes are garish and difficult to look at. Though neon colours can be fun and engaging, they’re also very hard on the eyes, which can leave users squinting to read your message.

Website Colour Schemes

The issue with neons is that they are far too bright for our eyes to cope with, and cause problems regardless of whether they’re situated against light or dark backgrounds. When used alongside text, neons create readability issues as lettering bleeds into the background. At the same time, neon backgrounds distract from the main message of the design.

2. Vibrating colours

When one highly saturated colour is paired with another it creates a “vibrating” effect, wherein the colours appear to glow, or move.

Website Colour Schemes

In the best website colour schemes, contrasting colours can combine effectively to draw attention to certain points on a page. However, in the case of “vibrating colours”, the only result is a nauseated feeling for your audience. People feel unsettled by vibrating colours, and they’ll often click away from your website just to avoid them.

Before placing colours together, you can often predict whether they’ll have the “vibrating effect”, by looking at the following elements:

  • High saturation in each colour
  • 180 degree spacing on the colour wheel
  • Conversion to grey-scale results in little contrast

One classic example is the pairing of the “Christmas” colours bright red, and green. These combinations also present an additional problem as they’re not accessible to people with colour blindness.

3. Light on light, or dark on dark

This is a mistake in website design that happens more frequently than you might think. Good website colour schemes rely on brightness and contrast. For instance, if you have a dark background, then you’ll need lighter foreground images and text to ensure readability. Alternatively, lighter backgrounds demand darker text, and so on.

Unfortunately, some web designers attempt to combine light and light, or dark and dark, and the result is something that’s difficult to read. In the world of web design, colour is something that can encourage action and emotion in your audience. However, it should serve practical purposes, to make their online experience as seamless as possible.

Website Colour Schemes

The easier and more comfortable it is for your customer to explore your website, the more likely they are to stick around for longer and see what you have to offer. If every letter on your webpage isn’t easy to read, then you need to rethink them.

4. Rainbow colours

Finally, though it almost goes without saying, rainbow-coloured websites never work.

Although you might think that a broad spectrum of colours will make your website more exciting, the truth is that it usually results in a distracting, disorganised, and overwhelming mess of a page. Rainbow colours might grab your audience’s attention to begin with, but they’re sure to run when they realise that the blur of colours makes your content unreadable.

Website Colour Schemes

If you’re committed to the idea of using various colours at once, the best solution is to opt for colour-blocking styles. This way, you can associate different colours with different elements, and access more flexibility without removing the inherent sense of flow and organisation in a page.

Website colour schemes: The importance of choosing yours

Colours can create a specific personality or mood for a website that reflects on the entire brand. If the colour of your webpage gives off the wrong impression, then you could end up with confused customers, high bounce rates, and an unsuccessful digital presence. In fact, a bad website colour scheme could indicate unprofessionalism in your website, or even untrustworthiness.

If you aren’t a designer, then selecting the best website colour schemes is going to be quite a challenge. However, by making use of strategies like colour theory and colour psychology, almost anyone can understand the basics in choosing a design that works for them.

Remember, when you’re choosing colours, it’s important to note that today’s world is growing more diverse. Keep in mind that colours in different cultures can vary, and what one area considers to be a “positive” colour, might be negative by another part of the world. For instance, in the western world, we associate white with innocence and life, but in China it’s connected with death.

Experiment with your ideas, look into how each colour interacts with the other, and remember that picking the right palette not only helps you to define your company, but it could boost your conversion rate too.

If you enjoyed this article, you might enjoy this one too:

– Responsive WordPress themes: Making the right choice for your business

William Baker
Digital producer
William Baker
Digital producer
As our digital producer, Will regularly contributes to the pages of Brand Fabrik, our online publication dedicated to branding, marketing and design. Will enjoys relaying his enthusiasm for technology and its impact on the creative services sector. He also relishes the opportunity to review the latest design-related products and gadgets.

  • Sign up for updates

    Sign up for your regular dose of Brand Fabrik and be the first to receive insights and inspiration.

  • Sign up for updates

    Sign up for your regular dose of Brand Fabrik and be the first to receive insights and inspiration.

Explore