Choosing the right colour scheme for your website can be a difficult task. Your website colour scheme will ultimately set the mood of your website. It needs to match your businesses branding and image. In this article we are going to explain the best way to choose a colour scheme for your website and discuss some colour scheme examples.
What is a Colour Palette in website design?
To put it simply, a colour palette is a selection of colours that will be used throughout the website. Websites often use colours to create interest and draw the user’s attention to important information on the website.
When choosing a websites accent colours, it is important to select colours which complement one another. Some colours look great together, while others just don’t look right.
Choosing a Websites Colour Scheme
Often if you’re working with a website designer or graphic designer, they will give you a series or colour scheme that they believe will work with your website. There are three main parts to choosing your websites colour scheme:
- Choosing the dominant colour for your website,
- Choosing the complementing colours,
- Choosing text and background colours,
We believe it is best to work from top to bottom to choose the perfect colour scheme.
Choosing a dominant colour
The rule of thumb when choosing a dominate colour, is to use the primary colour in your business’s logo. Most logos will have a colour that is quite distinct, and it is usually used as the dominant colour on the website.
In some situations, however, this approach might not work. Sometimes logos might have two distinct colours, or no accent colours at all; and in some situations, the accent colour might abrupt, and not a great choice for the website. In these situations, you will have to use your judgement to decide the best colour that will work for your website.
Choosing Complementing Colours
Once the dominant colour has been decided on, next you will need to decide on the complementing colours. Our approach to this is relatively simple, we use a colour palette generating app called Coloors. All we do is enter the primary colour in the app, and Coloors will display colours that will complement that colour.
When choosing the complementing colours, we generally select the following:
- A Secondary Colour: This is a colour which complements the main colour and used throughout the design.
- A Dark Colour: this is the colour will mainly be used for text and in some background areas
- A Light Colour: this colour will main be used as a background to break up page sections.
Website Colour Scheme Examples
Green Website Colour Scheme Example – The Africa Solution
Our work with The Africa Solution Charity was the case example of a business logo not having any colour. We decided that green was probably the best colour to use, since the charity help people living in developing countries establish farms to grow and harvest their own food.
The colours we used are:
We used the light green as the dominate colour and the dark green as a background colour on call-to-actions. A light grey was used as a background colour to break up page sections and darker grey was used for the websites text. At the bottom of the page we used a pure black for the page footer.
Light Blue Website Colour Scheme Example – MCD Advisory
MCD Advisory Services is an example of only using one dominate colour throughout a website. For this website we decided to only use a light blue. The owner of the business wanted to keep the design simple, and to do that we decided that one dominate colour would be enough.
The colours we used are:
In the design we used the light blue for buttons, accent colours, logos and some sub-headings throughout the website. We used an off black for the text and heading, and a light grey for some background colours.
Yellow and Green Website Colour Scheme Example – Trident Plastic Engineering
The Trident Plastics websites is a great example of the use of yellow and green together in a non-offensive manner. Often yellow and green can be difficult to work with, however, if it is used in the right portions, it can look great.
The colours used were:
On the website we used the yellow for icons and the green for buttons. We used the dark blue for headings and page heading backgrounds and the light grey for other background areas to break up page sections.
Royal Blue and Gold Website Colour Scheme Example – Wendtman Legal
For the Wendtman Legal website we wanted to create a sense of trust and authority. The logo was a Royal Blue, one variation of the logo had gold in the icon. This was used as the basis for the colour palette.
The colours used were:
The Wendtman Legal website uses a royal blue as the dominant colour and a gold as the complementing colour. A light grey was used for some background areas to break the page up, and a dark grey was used for the text. Jet black used for subheadings.
Yellow Website Colour Scheme Example – Cardiff Signs
The Cardiff Signs website is an example of not using a businesses logo colours as part of the colour palette. The Cardiff Signs Logo uses a bright yellow, pink and blue in the logo, none of these could would have suited the style of site the client wanted. We decided to use a darker version of the bright yellow as the dominant colour and build the scheme around that.
The colours used were:
On the website we predominately used the Yellow on buttons and icons. We used a dark orange as a hover cover. The light grey was used in some background areas of the website to break up page sections and the black was used on the navigation side bar and headings.
Orange Website Colour Scheme Example – Fresco
The Fresco logo uses a bright orange as the primary colour. For this reason, it has been used throughout the website as dominant colour in the colour palette. A darker variant of this orange was used in headings, as well as a light variation for the background in page sections. The site uses a dark black for headings and a light grey for text.
The colours used were:
