Colour plays a critical role in design. According to Colourcom, it takes 90 seconds for someone to make a subconscious judgment about a product and about 90% of that judgement is based on colour alone. (UX Planet). This is why every web designer should know the basics of colour theory so that the website design can look attractive.
Colour theory is both a science and art. To understand how to mix and match different colours you must know how to use a colour wheel.
A colour wheel is a circle comprising different colours arranged in a specific order. It was first created by Isaac Newton in 1666 and has remained the main tool for colour combination (Wikipedia). A colour wheel helps you understand how colours relate to each other and how they form different combinations.
The colour wheel has 3 colour groups i.e.: primary, secondary and tertiary colours. Primary colours include red, blue and yellow. By mixing the primary colours with each other, secondary colours are formed. For example, mixing blue and yellow creates green colour. Similarly, mixing the primary and secondary colours, tertiary colours are formed. An example of this is magenta which is formed by mixing red (primary) and purple (secondary).
Learning about the nature of colours is crucial to understand how colour combinations work. Colours have two basic natures:
Tangible colours – the colour at the surface of an object
Digital colours – the colour produced by light
These two natures of colours combine two create two colour models that form the colour wheel. These are:
1.Additive Colour Model
This colour model has Red, Green, and Blue as the primary colours and is also known as the RGB colour system. This model is used in all display screens and light is added into different secondary colours to make new colours. For example, mixing Red and Blue (primary colours) creates Magenta (secondary) but adding light to magenta will create the colour French Rose.
This colour model creates different shades by the subtraction of light. It consists of two different colour systems i.e., RYB (Red, Yellow, Blue) and CMYK (Cyan, Magenta, Yellow, Black). The subtractive colour model is the basis for the modern scientific colour theory that tells which colours are the most effective for digital media and print media.
As a designer, remember that the colours on the screen will never look the same in print. This is why designers should use an additive colour system for digital designs but for print media they are recommended to change the project to a subtractive colour system.
Colour combination or colour harmony means putting together different shades to create pleasing combinations of colours. It is about arranging colours in an aesthetic and attractive way to get the user’s attention, rather than provoking because disharmony or mismatch in the colour design scheme will give users a feeling of disgust and unease.
Further reading:The Difference Between UI And UX
This is why colour balancing is important to make a good first impression of the website. For example, if the site colour is orange with parrot green text, it will leave the user with a bad impression. On the contrary, a monochromatic theme will look more pleasing to viewers.
To help you design your website, here are some basic colour schemes that work effectively:
The monochromatic colour scheme includes different shades and tints of a single colour combined together to create a harmonious colour theme. It is the safest theme in the colour design workbook that is always effective.
To create analogous themes combine colours located right next to each other on the colour wheel like yellow and green. Such colour combinations work where no contrast is needed. The colour and design of analogous websites deliver rich nuances as compared to monochromatic.
Complementary colours are placed opposite to each other on the colour wheel like purple and yellow. They produce high contrast combinations to create a vibrant looking website.
Colour psychology studies how the human brain perceives different colours. Being in web design and hosting business understanding colour psychology is a great skill because it can allow designers to communicate through colours.
To use colour psychology one must know the meaning associated with different colours. So, let’s decipher the meaning behind the most commonly used colours in web designer portfolios.
The colour red represents attention and is associated with energy, strength, love, passion and power. This is why using red in the flat design colour of a website can be powerful and extremely effective.
Yellow is the brightest colour on the colour wheel associated with youth, joy and happiness. This colour symbolizes confidence, hope, and optimism. It is an excellent choice for websites that want to communicate positivity and radiance.
Blue is the colour of calm, loyalty, trustworthiness, and stability. This is why most financial institutions and social media platforms have blue colour dominant in their website. For example, Facebook, Twitter, Standard Chartered Bank etc.
Green reflects growth, renewal, nature and life. This is why green is commonly associated with inner peace and harmony. This is why many nature based businesses like agriculture, organic products and eco-friendly products use green.
Pink is considered a feminine colour and evokes emotions like innocence, nurturing, affection and sensitivity. This is why many businesses with a dominant female demographic use the colour pink in the website design process. For example, makeup, skincare and lingerie brands.
COLOUR PALETTE FOR WEBSITE DESIGN
Having a proper colour palette is important to create website design. A colour palette contains dominant, secondary and accent colours.
The dominant colour is majorly displayed in the website design. It could be a monochromatic, triad, contrasting or complementary theme. For example in the image below the dominant colour is purple.
These are the second most used colours in a colour palette. This is where colour theory comes into play and designers should know the different combining techniques (complementary, analogous, and monochromatic) to select colours that are in harmony with the dominant colour.
In this picture, the secondary colours are dark blue, light blue and white.
Accent colours are associated with backgrounds, whitespaces, buttons, links, and icons. For example, bright colour accents against neutral designs will look pleasing to the eye. Most websites use primary colours in accents with a simple white background.
Further reading:Web Design Guide for Beginner
There are many colour schemes available for designing a website. Create a custom colour palette for your website by using the information in this article.