How to use Colours in Web Design
This blog post will help you to learn how to use the perfect colour combination to create beautiful and more aesthetically pleasing website designs by using the main principles of colour theory.
Colours are the lifeblood of any design process, and the same applies to the process of a website design. Colours are the true and only omnipresent element on a website, creating subconscious emotions and meaning to visitors. For this reason, it is easy to understand why it is essential to master their meaning and use to rightly express your brand or project’s values and then to convey the right emotions to your website’s visitors.
To learn how to master the use of colours in a web context means, first of all, to understand the theory and the psychological impact that any colour palette can create. Only from here, you can create a quality colour scheme that aligns with your brand, its messages and values.
In this post, you will learn how to use colours for website design purposes.
Table of contents
- How to use Colours in Web Design
- 1. Psychology of Colours
- 2. Colour theory
- 3. Create a Colour Palette
- 4. How to use Colours in Web Design
1. Psychology of Colours
When you use colours, keep in mind that each one evokes emotions, meanings and values. Using the right colours in the right place is essential for your design, resulting in an emotional relationship with the public.
Colours generate subconscious emotions and the designer’s task is to use them in the best possible way to provide a specific reaction in the public.
Symbolism of colours
The interpretations of colours can vary according to the context, especially when it comes to culture. Within a specific culture, however, colour has a symbolic value of collective values that are not necessarily consistent with each other.
Let’s take red, for example; love and passion, but also, on the other hand, blood and conflict, are the first feelings that, to us, Westerners, come to mind. In other cultures, red can symbolise something else (for example in China it indicates luck).
Below you can find a graph with some of the most common colours and their primary meanings for Western culture. It can be a good starting point for understanding which colours would represent the best choice for your project or brand, or even understanding why that specific company used that specific colour!
With the right context, colour can really make the difference between a common visitor of your website and an engaged customer.
- Red: passion, love, power, danger, energy, excitement. Red is a great choice if you want your audience to take action. For this reason, you can find red-coloured CTA on e-commerce websites, or in restaurants and takeaway apps.
- Blue: calm, trust, competence, peace, logic, reliability. One of the most used colours in the website design industry. The reason is simple: blue inspires trust and reliability.
- Green: health, nature, abundance, prosperity. Green is a calm and neutral colour, perfect for healthy and eco-friendly brands.
- Yellow: happiness, positivity, optimism, creativity, friendliness. Yellow is associated with joy and positive feelings. It can be a good choice for a website offering services.
- Orange: fun, happiness, optimism, playfulness, freedom, warmth, comfort. Orange is a great colour if you want to use a friendly approach for your website.
- Purple: luxury, mystery, sophistication, wisdom, creativity. Purple is a strong colour, but not exactly the easiest to use, mostly because it needs to be put in a great colour scheme to stand out.
- Pink: nurturing, gentleness, sincerity, warmth. Pink is a great solution for the wellness industry
- Brown: nature, security, honesty, protection, support. In a web design context, brown is a comforting solution. It can also be used to create a vintage-style design.
- Black: elegance, power, control, modernity. Black can be the main colour for luxury websites, as it communicates quality and elegance.
- White: minimalism, purity, peace, clarity, cleanliness. Minimalism is a choice that can pay off. Also, it is an easy colour to pair with for any colour scheme.
2. Colour theory
The Colour Wheel
A great way to start understanding colour theory is the colour wheel. It is a tool that every designer must have at their disposal.
As Wiki suggests, a colour wheel, or colour circle, is an abstract illustrative organisation of colour hues around a circle, which shows the relationships between primary colours, secondary colours, tertiary colours etc. Let’s see how the colour wheel works.
Primary colours form the basis for all other colours. There are three primary colours: magenta, yellow and cyan. Traditionally, red, blue, and yellow were considered to be the primary colours, but recent studies have shown that magenta, cyan, and yellow better describe our experience of colour. They are called primaries because they cannot be obtained by mixing other colours. On the other hand, by mixing the primary colours together, the secondary colours can be created.
The secondary colours are obtained precisely from the combination of the primaries. They are green (blue + yellow), orange (yellow and red) and purple (blue and red). Combining the secondary colours with the primary colours allows you to create the tertiary colour.
By mixing a primary colour with the secondary one closest to it, a tertiary colour is obtained.
Tints, shades, tones
Primary, secondary and tertiary colours are called pure colours. From these, we can derive others as follows:
- Tints are obtained by the addition of white to pure colour, creating less intense colours
- Shades are the additions of black to pure colours
- Mixing black and white with pure colours creates tones
These are the very basics to understand how any colour is created from the primary colours.
The importance of contrast
No colour ever appears isolated. Even a normal white background can influence the perception of a colour placed on top of it.
Contrast is another fundamental colour theory principle that any designer has to keep in mind.
The interaction between two colours is exploited to reinforce the visual impact of the elements. For example, for text, some colour combinations can impair legibility. This is why we recommend using high contrast for the text sections in any website: user experience (UX) always has to be on the top of your priorities while you are designing a website. Black text on a white background could sound trite, but it is an effective way to assure a high level of legibility.
Generally speaking, good use of contrast can grab the attention of some elements and make the important elements stand out visually. For this reason, contrast is fundamental for Call to Actions and titles, in addition to the aforementioned text sections.
Vibration of colour
When contrasting colours with a similar tone are combined, the result is a luminous effect, called “vibration”. However, in design, such a visual impact can be overly aggressive and should be avoided for text, whose legibility could be compromised.
3. Create a Colour Palette
Now that we understand the basics of colour theory, we can start working on the colour palette which is, quite simply, a collection of a project or brand’s colours.
A colour palette is a fundamental tool for any designer. For the design of a website, it is a must, because it allows you to recreate, on the web, the vibe that the project or the brand brings with it. Here the psychology of colours we mentioned above is fundamental to determine which is going to be the main colour of your palette.
For example, Adidas is a brand that works mainly (but not exclusively) with black and white, and you can find these colours all around their website and social media. This is a strategic use of colours from a psychological perspective, as it gives the chance to associate with power, control and cleanliness.
Willowbrook Foods is a company with whom we work to build their website. We used an earthy green as their primary colour, which is displayed all over their website. Green ties in nicely with Willowbrook Foods values and the psychological effect they wanted to create on the visitors: health, nature, and abundance.
But where do you start to create an effective palette of colours?
Colour Palette Types
The Colour Palette main types are five: analogous, monochromatic, triad, complementary and split complementary. All of them can be used to create a great colour palette for a website, the right one depends on the values of your brand or project and the emotional effect you want to create. We suggest you to use Adobe Colour Wheel tool if you want to try on your own!
Analogous colour palettes are based on the colours placed next to each other on the colour wheel. They create a beautiful effect, as the colours fit together very easily. Although, you do have to be careful as the effect could look too subtle, as there is a risk that no element will stand out enough from the others. For this reason, a smarter idea would be, to add a complementary colour for the elements you want to focus on in terms of readability or for your Call to Action.
A monochromatic colour palette is based on a single colour paired with its shades and tints. Also, monochromatic palettes can be very pleasing to look at and can get you nice results easily. The main issue is the same one we spoke about for analogous colours: there is a good chance that the elements won’t stand out enough from the others. As well as this, in a monochromatic colour context, it can be best to use a complementary colour for the elements that you want your visitors to focus on.
If you form a triangle in the colour palette using three colours that are evenly spaced apart, you get a triad colour palette. This is a very vivid solution that can be used for artistic or playful websites.
The colours on the opposite ends of the colour wheel can create a complementary colour palette. Generally speaking, this is a good solution for web design purposes, as it creates both a good visual balance and a tension between some elements, giving you the chance to make the most important elements stand out from the others.
A split complementary colour palette uses a complementary palette with the addition of a third colour, placed on either side of one of the starting colours.
The split-complementary colour scheme is very effective in website design as well, adding more visual movement without creating too much confusion in the visitor’s eyes.
RGB and Hex
For web design purposes, you will mainly find and use RGB (red, green, blue) and Hex values to represent colours. Let’s see how they work and which are the main differences.
RGB Colour System
The RGB (red, green, blue) colour system identifies the colour as a combination of three values: a particular shade of red, another of grey, another of blue.
To make some examples,
- RGB(0, 0, 0) equals black
- RGB(255, 255, 255) equals white
- RGB(255, 0, 0) equals red
- RGB(0, 255, 0) equals green
- RGB(0, 0, 255) equals blue
- RGB(59, 89, 145) equals Facebook blue
- RGB(255, 1, 0) equals Youtube red
Hex Colour System
The hex colour system converts each value to a hexadecimal (base 16) representation, getting this kind of code:
- #000000 equals black
- #ffffff equals white
- #3b599b equals Facebook blue
- #FF0100 equals Youtube red
It is important as a designer, that you know both of them. Generally speaking, you will find yourself using the Hex colour system.
4. How to use Colours in Web Design
Now that we understand how the colour scheme works, we can focus on the more operative use of this crucial design tool to build your website.
1. Consider the current branding elements.
If you are looking for materials for an existing project and already have a logo or photographs or images, use their colours to create a coherent design for the design. If, on the other hand, the project is still in its first stage of design, and the definitive colours of the brand have yet to be decided, you could start using Adobe Colour to play around with the colour wheel to create your custom palette or upload an image to extract colours. This will help you to find two or three colour palettes that seem most suitable for your project.
2. Think about your audience
As we mentioned above, the psychology related to colours is a crucial element to be taken into consideration. What are the values of your project? Who will be the main target audience of your website? How do you want them to feel? Take time to pick the right colours, as this is an essential moment for your website design process, as this will result in an emotional relationship between your website and the public. Remember that colours generate subconscious emotions and one of the main designer’s tasks is to use them in the best possible way to provide a specific reaction in the public.
3. The colour picker
“Good artists borrow, goat artists steal”. This was one of the favourite quotes of Steve Jobs, taking inspiration from Pablo Picasso. Don’t get us wrong, it is fundamental to be totally free in the creation process. But we also know that this takes time, even years. Fortunately, nowadays digital technology makes it easy to pick colours directly from photos, logos or images or even directly from a website, thanks to a colour picker. This is a very valuable tool that is found in major graphics programs, but also as an extension of your browser or even as an app on your PC or Mac. The colour picker allows you to select a pixel and extract the RGB or HEX code (the latter one is perfect for website design purposes) to use for your project.
4. Create your own colour palette
We recommend starting with three colours for your palette: the main one, the secondary colour and the accent colour. You can find that many suggest using the “60/30/10 rule”: according to this rule, 60% of the colour used should be the main colour, 30% the secondary colour, and 10% the accent colour. This can be a good starting point, but we suggest taking it more as a guideline than as a rule. A great web design can be obtained by applying different percentages or using more than three colours in your palette. So don’t be afraid to experiment if you feel that would be the right choice for your design.
5. Find your accent colour
We mentioned the accent colour in the section above, but we think that it is worth dedicating a specific paragraph for this. The reason is simple: the accent colour of your website has to be used in very small amounts throughout your website (we mentioned a 10% of the total), usually as a call to action or the parts of text you want really to stand out. The right use of the accent colour, which means using it in the right place and in the right proportion, can lead to a drastic improvement of the CTR on your website. This is one of the main tasks a designer has to focus on in terms of UX (user experience).
To easily find an accent colour, you could use Paletton: type your main colour’s HEX code (remember the colour picker!) and then click on “add complementarily”: this is your accent colour, the one that really stands out from your main colour. If you don’t like the complementary colour generated, you can play a bit by clicking on the icons at the top left to find something more suitable for your taste.
6. Shades of grey
In many website design projects, using shades of grey can be a crucial element in terms of UX. You won’t need the famous fifty shades: two or three will be enough.
A dark shade of grey will be helpful for texts and paragraphs. You may have never noticed that, but it is pretty rare to find a paragraph written in total black. The difference is subtle, but cannot be underestimated. Black on white is a strong contrast, and in a context of a website, we have to consider the brightness of any device’s screen. The last thing you want is your visitor’s eyes to get fatigued while scrolling through your website. A smart solution is to use a dark grey, almost black, to ease the fatigue of the eye.
The light shade will help for the same reason: a totally white background can be boring or even tiring for the eyes. Adding a light grey to some sections can really help the visitor of your website, whether he is a reader of your blog or a potential customer of your e-commerce.
In this way you will easily add another two colours to your palette, giving your website more movement and life and making it more pleasant to visit.
In this blog, we covered the basics of colour theory and psychology and how they’re used to create impactful colour palettes in website design. Generally speaking, a website built using this guideline, a UX and UI oriented web design, high-quality images and the great copy can help your business grow in terms of both branding and website conversions.
If you think your website needs improvement in terms of design, here at Rapid Agency we deliver our bespoke Web Design in Belfast, SEO, Digital Ads, Copy services that will help to improve visits for Northern Ireland websites and the user navigation, getting you the results you are looking for. Get in touch with us, we are happy to help!