As designers colour is a powerful tool at our disposal. Throughout life our culture and the influences around us have conditioned us to relate colours to emotions and actions. Traffic lights are the simplest form, green for go, amber for wait and red for stop. How we perceive websites, in the flash of a moment, is hugely affected by the colours used throughout a page.
Blue
Blue is a safe colour, implying trust, commitment and stability. Blue can be considered fresh and soothing, thanks to it’s association with water, which slows the human metabolism and produces the calming effect felt. Though, it can go too far and the wrong use of blue may give the impression of cold and therefore uncaring. Blue appeals to men and women, but is generally associated with males.
Blue should be avoided when promoting food or cooking as it’s effect on the body can suppress appetite. Some weight loss plans even go as far as to suggest eating food off a blue plate.
Red
Red has some of the strongest emotional reactions, from love all the way to anger. Red is a stimulant that can excite and thrill, like that Ferrari you’ve always wanted. Red will draw attention quickly as it is considered a warning through it’s association with danger, we have become accustom to it stopping us from completing a task, but can also encourage action and confidence.
Used as an accent colour, red can bring text and images to the foreground, making it a strong choice for calls to action, such as Buy Now.
Yellow
Yellow is a colour associated with warmth, joy, happiness and energy. Yellow can be used to create high levels of contract against black, such as your license plate or a wet floor sign. Yellow can make you feel cheerful happy and pleasant. Yellow is a strong attention grabber, when used to highlight important elements it can increase clicks compared to a duller, less appealing colour.
Yellow should be used carefully though, as it has negative effects, such as being unstable or cowardly. Dull yellows can lose their impact and can be unappealing when dingy.
When using yellow, be careful to use it sparingly as it is the colour that causes the most fatigue to the eye, due to the high amount of light that is reflected.
A clean yellow gives the opposite response to blue in regards to appetite, and increases the speed of the metabolism.
Green
Green brings out thoughts of growth, harmony and freshness, all through it’s association with nature. We see the leafs on the trees growing in the Spring and strong feelings come along with it. Green is also linked with money and sometimes wealth. Also green suggests stability and commitment. Back to the traffic lights, green is go, free, safe.
Use green with nature related products. Darker greens can be used with money, finance or banking. It can be used to calm and sooth, TV shows often have their guests wait in a “green room” prior to a recording, to help them relax.
White
White is considered clean, light, simple and pure. White is also often associated with faith and religion, in certain regions of the world. White is cool and clean, but also cold due to it’s association with winter and snow. Often medical products and hospitals are white as they project a feeling of safety and cleanliness.
White can bring a sense of open space, or add realism with subtle highlights.
Black
Black is mysterious, elegant, powerful and strong. It also holds the thoughts of formality, death and evil. Black shows strength and authority, very formal and prestigious.
Black can help to give the impression of depth, for example shadows sitting off the edge of a box can make it feel like the element is raised above the rest of the page.
Colour choice is a huge part of the user experience on your site, a wrong colour selection could be costing you money in lost enquiries or sales. To help with your colour selection, there’s thousands of tools available, below are a couple of my favourites:
- Dribbble – A fantastic place for inspiration, using the Explore > Colour section allows you to filter by colour.
- Kuler – By Adobe, a great tool for setting up your colour palette. Use premade ones by others or create your own with a little help from Kuler’s “Rules”. To make your life easier, Kuler allows export to an Adobe Swatch Exchange file.
- HEX2RGBA – Quickly convert color value in HEX to RGBA and RGB.
