Where to start with my website colours?
According to several sources, around half of the people visiting a website don’t come back because of the colour of the website design! Whether this decision is a conscious one or not, the colour of a website plays a crucial role in its success.
Which colours you choose for your website design firstly depend on your branding. Presuming you want your website to run consistently with your brand, the colours will need to complement the logo in some way and enhance the brand colours.
A colour wheel is a good starting point when selecting colours for a website design to work with your branding. Colours sitting next to each other on a colour wheel will help create a harmonious feel to a website. In contrast, colours which are directly opposite each other will help something to stand out from a web page whilst still complementing the design. Choose a colour opposite to your main colour in order to highlight something and draw the visitor’s eye. However, a different kind of contrast is required when working with typography to ensure legibility.
How many colours within my website?
Using too many colours on a website will distract the visitor from what you want them to see, as the site will appear over-crowded and confusing to the eye. On the other hand, a website with minimal colour can, in some cases, be too simple and boring, unless the lack of colour is working alongside the branding and helping to convey a message. You need to understand your brand and know what will work best to make sure you don’t over-power or underwhelm the visitor to your website.
Often websites will be created using three colours. A primary colour, which will be the main colour of the website. A secondary colour, which will support and work alongside the main colour and thirdly, a highlight colour. Whilst this is often the case, there are plenty of successful and exciting looking website designs out there that don’t follow this pattern.
Who are your target visitors to your website?
We all have colour preferences which really need to be put to one side when deciding on the colours to use on a website. Don’t pick the colour red because you support Stoke City or pink because you like the colour. Establishing the purpose of your website is essential. From here, you can work out who your target visitor to your website is, and which colours would work best to get the desired response from those visitors. Your website colours should work with your brand and most importantly get the desired response from your target visitor. Whilst you won’t be able to select a main colour that will work for every visitor to your site, you need to focus on the majority, to get those return visits and high response rates.
Colours – Meanings
It is also important to take into consideration where your target audience live, as there are cultural considerations to take into account, when selecting colours to use in your website design. For example, red means luck in China but in Germany it means the lack of it! White symbolises mourning in the East but in the West, white is used for weddings and symbolises purity.
Colours elicit feelings and emotions. For example, psychological tests have shown that red can make you excited and blue can cause a feeling of calm. This is why fast food companies often choose red as their main or secondary colour within their branding.
If you selected a strong blue colour scheme for your website design, visitors are more likely to respond more positively if they are in a good mood. Blue is commonly used on corporate websites as it symbolises trust and dependability.
Amazon’s website is mainly white to ensure the information is clear and the navigation is easy. The blue accent colour helps to put people at ease whilst the orange adds an element of excitement. This is a clever colour pairing which creates a more exciting and joyful feel to the site design.
Here is a psychological approach to the meaning of colours.
White:
Positive: Hygiene, sterility, clarity, purity, cleanness, simplicity, sophistication, efficiency.
Negative: Sterility, coldness, barriers, unfriendliness, elitism.
Grey:
Positive: Psychological neutrality.
Negative: Lack of confidence, dampness, depression, hibernation, lack of energy.
Black
Positive: Sophistication, glamour, security, emotional safety, efficiency, substance.
Negative: Oppression, coldness, menace, heaviness.
Yellow
Positive: Optimism, playfulness, confidence, self-esteem, extraversion, emotional strength, friendliness, creativity, wisdom.
Negative: Irrationality, fear, emotional fragility, depression, anxiety, suicide.
Orange
Positive: Physical comfort, food, warmth, security, sensuality, passion, abundance, fun, vibrant, exciting.
Negative: Deprivation, frustration, frivolity, immaturity, cheap.
Brown
Positive: Seriousness, warmth, Nature, earthiness, reliability, support.
Negative: Lack of humour, heaviness, lack of sophistication.
Pink
Positive: Physical tranquillity, nurture, warmth, femininity, love, sexuality, survival of the species.
Negative: Inhibition, emotional claustrophobia, emasculation, physical weakness.
Red
Positive: Physical courage, strength, warmth, energy, basic survival, ‘fight or flight’, stimulation, masculinity, excitement.
Negative: Defiance, aggression, visual impact, strain, danger.
Purple
Positive: Spiritual awareness, containment, vision, luxury, authenticity, truth, quality.
Negative: Introversion, decadence, suppression, inferiority.
Green
Positive: Harmony, balance, refreshment, universal love, rest, restoration, reassurance, environmental awareness, equilibrium, peace.
Negative: Boredom, stagnation, blandness, enervation.
Blue
Positive: Intelligence, communication, trust, efficiency, serenity, duty, logic, coolness, reflection, calm.
Negative: Coldness, aloofness, lack of emotion, unfriendliness.
Helpful tools for designing a website:
There’s an app for almost everything these days and when it comes to creating a website, there’s no exception.
This is a great tool if you’ve seen a range of colours somewhere that you like and you want to quickly take a snap for a later date. The app will take the colours from the image and set out a colour palette of up to six colours. You can then edit and share the palette with others. This could be useful for clients if they see a range of colours that they want to then send to the designer.
Referring to a specific colour using a colour code or value is not always the best method when writing a website design brief or discussing the colour direction of a website. This tool suggests names for you, as well as giving you colours to match a name. It can bring the process into the real world and help with the communication process.
This is an AI colour tool which takes 50 of your favourite colours and generates colours you like and blocks ones you don’t within your browser. This is done through a neural network powered algorithm. Sounds complicated but it is in fact an easy to use tool which draws on thousands of popular human-made palettes across the internet and suggests combinations that will work.
This is a useful tool to create and collect colour palettes. You can browse other users palettes for inspiration and edit the colours to find something you like. It’s easy integrated within design packages such as Adobe Photoshop and Illustrator.
This is a simple and straightforward website tool which will let you know if the background and foreground of a specific website will work and meet the standards recommended by the W3C (The World Wide Web Consortium).
This free tool has been around for some time and perhaps because of its ability to save palettes easy to the Adobe library is a popular tool for designers. You can select colours from the colour wheel and it can also suggest suitable colours when working within rules. As with other tools you can also look at other people’s combinations for inspiration.
This is a fascinating little online tool for creating colour combinations. Simply use your mouse and play around to create palettes for your design. Easy to use and you can click to get the colour values. You can also purchase this as an app which has the added value of collecting colours through your camera.
This playful colour tool focuses on gradients which have been created for you to browse and be inspired. Look through the gradients displayed within an egg shape and if you find something you like you can use the codes provided. Each gradient has been given a name which might help you remember which one you like!
This online tool keeps things simple which is great if you want to generate easy to read CSS. For some, using standard colours and names is the way to go. You can choose from the standard 17 colours or delve into the further 130 other CSS colour names.
This is another tool which creates a colour palette from a photo. It’s perhaps more simple than others as the generator will draw out the five main colours from an image. You can then copy the value to use within your design. Simple and straightforward!
This tool selects a range of colours taken from just two you’ve selected. There is also a great material design colour tool which enables the designer to view a range of shades from that colour and their Hex values.
This is similar to Colordot but with more tools to help and guide you through the process of choosing colours. Using your mouse you can change the background and it offers you a choice of categories such as monochrome or Analogical. Once selected, you can then export the colours for your design.
With this tool, you select a colour and a harmony option. Color Calculator will then come up with a recommended colour scheme for you. The big plus of this tool is the information and level of detail it goes into about your choices and aspects of selecting colours such as the colour wheel, choosing the right colours, making adjustments to the hue and saturation etc. It explains the different harmony choices and clearly sets out how to make use of this tool. Very helpful and informative!
This has a wealth of tools and information to help the designer. It includes a selection of colour charts including the standard HTML colour codes and names and the web safe colour palette. You can select a colour using the picker and also find out about colour rules and explanations. The handy tutorials and other resources make this a useful tool when starting out.
As the name suggests, this is another great tool for learning about colours and becoming familiar with colour theory. As well as the helpful tutorials there’s also a Colour Convertor tools which will take any colour and let you know the different names, codes, values etc.
This is an interesting tool which is great if you want to start with a word! It lets you click on a word such as ‘baby’ or ‘decadent’ and it will come up with which colours people have voted as matching that word. It also allows you to use the reverse approach so you can see what words are associated with your colour choice. Great if you are keen “to choose the best colours for the desired emotional effect.”
There are many more other tools out there and it is well worth investing a little time to find the ones which work for you and which will ultimately help you use the right colours within your website.
Colours within website design – Summary
The colours used within a website design are powerful and therefore one of the most important aspects of website design. The feelings they evoke and presumptions they can cause us to make, should not be underestimated. Visitors to your website will form subconscious opinions about your business as soon as they land on the homepage of your website. A pink website design will instantly suggest feminine to a visitor, whilst green is suggestive of the environment. The audience, market, geotargetting, cultural considerations, usability and of course the branding guidelines, should all be taken into consideration. If you can strike the right balance between brand continuity and visitor appeal then you’ll be going in the right direction for producing a successful website design!
