What Is Color Theory & How Should You Use It For Web Design?

Color theory is the analysis of color and its purpose in art and design. It encompasses color mixing as well as the visual and emotional impact of color use and the combination of colors. colors can convey meanings to our subconscious and so it is particularly important to align your website colors with the message you want your brand to convey. In this article we will break down some of the most popular colors in web design and look at:

-What they symbolise
-What kind of companies should consider using that colour on their site
-What to watch out for, colour faux pas and suitable accent colours
-Color symbolism from around the word

Let’s get going!

Red:

Red can be associated with a mixture of emotions and feelings both positive and negative. Aggression and anger is one end of the spectrum with people relating it to ‘seeing red’ or perhaps the Matador flag. Moving on from that, red can also be associated with danger as it is used for stop lights and on warning signs. On the other side of the coin red can symbolize love and luxury with Valentine ’s Day being awash with red hearts and glam celebs walking down the red carpet. With red being so versatile a colour you must give careful consideration to the content that you place in in. You wouldn’t want to design a site with the hope of selling a luxurious product and come across harsh or angry. If you do decide to go for red then make sure your luxurious (or whichever emotion it is your playing on) theme within your website copy and other imagery.

Perfect for: Websites of companies who sell high end, romantic or security related products and services.

Watch out for: Using it to much! Red it a great accent colour that can be overwhelming if overused.

Best used with: Black, white & grey

Around the world: In China red is a colour that symbolises good luck whilst in South Africa it is associated with mourning. For Russians it is the colour of communism and in India it is widely associated with soldiers.

Blue:

Blue is generally associated with stillness and calmness which means it is used a lot for products that are marketed as relaxing. Who is not picturing a stream, river, sea or sky when they think ok blue?!  It is the colour most associated with peace, often being called the ‘colour of heaven’. Being a very solid colour, blue also conveys the message of strength, reliability and professionalism. Depending on the shade it can be either friendly and calming (light blue), motivating (bright blue) or dependable (dark blue).

Perfect for:  Websites of corporate companies such as banks, financial advisors and accountants who want to reassure their customers and present a feeling of solidarity. This is as well as religious websites and websites that sell natural products.

Watch out for: Being too boring with your blue and blending into the corporate miss-mash.

Best used with: Other shades of blue, white and orange.

Around the world: In the Eastern world blue represents wealth and self-cultivation. In China blue is the colour of immortality and in Iran it is the colour of mourning.

Green:

Being the colour of grass and trees, green is generally associated with nature and growth. It can also be associated with new beginnings or getting back down to the ‘grass roots’. At the other pole green is the colour of jealously, often known as the green eyed monster. A lot of environmental agencies and charities use it as their main colour to try and promote green living. It has been said in the past that green is one of the most relaxing colours along with blue, this generally relates to lighter and minty shades. Meanwhile, dark green has a strength and affluence about it and is frequently used within the financial sector.

Perfect for: Websites selling natural or organic products, environmental charities, grass roots organisations and also financial, tourism and travel sites.

Watch out for: Green can sometimes be associated with weakness and lack of experience. Choose your hue and context wisely!

Best used with: Brown, earthy tones, grey, yellow and orange.

Around the world: In India Green is the color of Islam whereas in Ireland it represents the nation as a whole. For the Japanese Green is the color of life yet in China it relates to exorcism.

Yellow:

Yellow is a bright and energizing color that is frequently associated with happiness. Think of the bright and life giving sun, the summer or the sun flower and no doubt you will soon have a smile on your face. Yellow is a neutral and unaggressive color often chosen for babies outfits and décor. Perhaps it is this association with new born children that often makes it a color representative of hope. It can however be associated with cowardice, calling someone yellow is to call them a coward, and danger due to its use in police tape and road blocks.

Perfect for: Nature websites such as garden centers  play-groups, nurseries and websites that sell baby products or provide baby related information.

Watch out for: Your site being too wishy-washy if a light yellow is used.

Best used with: Green, white, brown and black.

Around the world: In China yellow is the color of royalty and in Japan, contrary to the western world, it is the color of courage.

Purple:

Frequently called the color of kings and heavily symbolic of royalty, purple speaks of luxury and quality like no other color  It is also a very strong color which feels stable and established. It is probably the use of red and blue within it that means you get a killer combination of these two other colors attributes. Darker purples are generally used where affluence, wealth and quality need to be conveyed. Lighter purples, such as lilacs, are often associated with the vibrancy and beauty of spring, just picture a wood carpeted in blue bells and you will know what I mean! Another facet of purple is its association with creativity; this makes it frequently the color of choice for design studios and artists.

Perfect for: Art & design companies as well as companies selling high end goods and those who want to convey that they have a rich heritage.

Watch out for: Going to dark with shades of purple. Rich and deep purples are best used for text, dividers and borders as opposed to backgrounds as the other content is easy enveloped in deeper hues.

Best used with: Black, white, gold and grey.

Around the world: Widows in Thailand wear purple when in mourning while in some states in America some people paint their fences purple as a sign for no trespassing.

Vicky works alongside creative design agency Hullabaloo and has a keen interest in color theory both on and offline.