Colour Theory

Colour is one of the most crucial aspects of any design (that includes your Website, Creative Design or Mobile App interface design).

However, we often don’t consider colour as part of our thought process at all. Unfortunately and shockingly, most of the UX/UI designers or developers consider colour application as very later part of their design process. The primary reason may be that when someone looks at your Website or App, they are always prone to give judgment on layout, navigation, gestures or content. It is rare for someone explicitly tell you that your website’s colour applications are very cool. Truth is, no matter whether someone explicitly talk about colour or not, colour plays a very big role on liking or disliking a design; and it all happens mostly in your sub-conscious mind.

In this article, I will try to give you some idea about basics of colour and its application in your designs in the world of digital media (such as Website, Mobile App, Social Profiles etc.).

Let’s start with the basics of colour theory.I would like to talk about a.how we see colour and b.how it affects our mood or mind.

The way we see colours in physical and digital world is bit different. In physical world, colours are nothing but wavelengths of lights reflected back by physical objects and when it strikes your eyes, based on the wavelengths of light, we see different colours. If Sun light hits a red umbrella, all colours or wavelengths of light are absorbed except for red, which has about 700-630 nm wavelengths. Red is the only colour reflected back and you see the umbrella as red.

But in digital world, things work differently. As digital monitors (Computer, Cell Phone, TV etc.) radiate their own light, they need to generate their own colours also. Usually the three basic colours that are used to generate all the colours displayed by a digital monitor are red, green and blue. So depending on which colour to produce, monitor lights up the combination of colour pixels in a particular area.

Before I take you deeper into the detail, lets talk about Colour Wheel. Colour Wheel is a general guide on how to mix and use different colours based on certain logic and theory. Certain rule of thumb has been created around the Colour Wheel to give general guidance to the designers about what set or colours to use on what type of scenarios.

The colour wheel fits together like a puzzle - each colour in a specific place. Being familiar with the colour wheel not only helps you mix colours when creating artworks, but in adding colour to all your designs. Below is how it looks when empty. 

a. Colour wheel with primary colours. Primary colours are not mixed from other elements and they generate all other colours.

•       Red

•       Yellow

•       Blue

b. By mixing two primary colours, a secondary colour is created.

•       Red + Yellow = Orange

•       Yellow + Blue = Green

•       Blue + Red = Purple

c. Tertiary, colours are created by mixing a primary and a secondary.

•       red-orange

•       yellow-orange

•       yellow-green

•       blue-green

•       blue-purple

•       red-purple

Colour influences our mind in two primary ways - natural associations and psychological impact. For example, a aqua shade of blue triggers associations with the still water and a psychological sense of calm.

Successful design requires an awareness of how and why colours meaningfully communicate with each other. The source of these meanings can be as simple as those found in nature — red is the colour of blazing fire and blood, blue the colour of cooling waters and the sky; or meanings may be more complex in certain cases.

Colour theory is a set of principles used in order to create harmonious colour combinations. With the use of colour theory, you can combine colours together perfectly every time. As per the principles, the following colours are harmonious:

1. 2 Colours Opposite of Each other on the Colour Wheel are harmonious.

2. Any 3 Colours Equally Spaced Around the Colour Wheel Forming a Triangle are harmonious.

3. Any 4 Colours Forming a Rectangle, Each Opposite of Each other on the Colour Wheel are harmonious.

Colours that are available to us without any variation are called natural hues. Each of these natural hues can have a variation in tint, shade, or tone. The way that these variations work are by combining natural hues with black, white, and all the greys in between.

Hue:A hue is a pure colour with no black or white added. A hue is the feature of a colour that allows it to be identified as the colour by it’s name; for example red, blue, yellow, green, purple, etc.

Pure/Natural Hue:A pure hue is the base colour at its full intensity level, in other words, no shading, tinting, or tones have been added to the colour yet.

Shades:Shades are the relative darkness of a colour. You create a shade of a colour by darkening the pure hue with black.

Tints:Tints are the relative lightness of a colour. You create a tint of a colour by lightening the pure hue with white.

Intensity (Also Known as Saturation or Chromasity):Intensity describes the identifiable hue component of a colour. A blue with RGB numbers Red - 0, Green - 255, and Blue - 0 (0,255,0) is considered 100% saturated and is intense, high in chromaticity, and completely saturated. A grey colour has no hue and is considered achromatic with 0% saturation.

Tone:A tone is a hue that has had grey added to it. A tone can also be a hue with a large percentage of its complementary colour added.

Value / Luminance:Basically, value is a measurement of how close to black or white a given colour is. In other words, value is a measurement of how much light is being reflected from a hue. Those hues with a high content of white have a higher luminance or value. If you look at the colour wheel below, you will see that it is full of different colour values. The outer band is the natural hue meaning that it is the original colour. The 2nd band is a tint of the original hue and has a higher content of white or luminance than the original hue. The inner bands are shaded versions of the natural hue and are closer to black than the original hue.

Colour values are the lights and darks of a colour you create by using black and white (‘neutrals”) with a colour.  This makes hundreds of more colours from the basic 12 colours of the wheel.

•      white + colour = tint

•      colour + black = shade

The principles of colour mixing let us describe a variety of colours, but there are still many colours to explore.  The neutral colours contain equal parts of each of the three primary colours.  Black, off-black, white, off-white, grey and sometimes brown are considered "neutral”.

Warm colours are found on the right side of the colour wheel.  They are colours found in fire and the sun.  Warm colours make objects look closer.

How you combine colours is the most important aspect of colour theory. Personal taste remains the key but there are guidelines that can be used to make a colour combination that is interesting and aesthetic to the eye. These are called colour schemes or harmonies and they consist of two or more colours, which have a fixed relation in the colour wheel. Colour schemes are create using symmetrical shapes around the wheel; they make combinations that are balanced and harmonious. As the shapes rotate, the combinations change, but the spacing of the colours in each combination does not. It is the symmetrical spacing that consistently ensures a harmonious combination.

Now let’s talk about how colour stimulates our nervous system.We will begin with a small experiment. Find a block of yellow colour and look at it for about a minute. Now close your eyes and try to see a colour while your eyes are closed. The colour you will most probably see is purple. Why? Because purple is the opposite colour of yellow. The reason our brain shows us the opposite colour is to balance our nervous system. If we work in an environment where we see red colour most of the time, we should look at grass or plants more often than others. This is the theory used by interior designers to choose colours that is most appropriate for certain types of interiors. That is the reason often hospital interiors have lots of green colour hue. Same rule applies to digital designs. So it is important to know what are the opposite colour pairs. To make it simple for you, I am including a basic colour wheel here. Colours, which are in opposite directions of each other in this wheel, are the opposite or complementary colours. Designers to either stimulate or calm our nervous system cleverly use complementary colours. 

So how do I select my colour palate for my design? The rule of thumb is to select a base or primary colour and then select a set colour with decreasing hues. For example, if I choose Blue with hue 330, my colour palate could contain colours with hues of 300, 270, 250 etc. Practice of selecting triads or selecting these hues in groups of three is widely followed by designers around the world. In order to understand better, I am attaching a hue clock here. 

But design world is not as simple as this in many cases. So how do I work on multiple colour pallets? I believe that easiest way is to draw a rectangle over the colour wheel and choose a base hue from each corner of the rectangle. Now form triads of hues by selecting base hues from each corner of the rectangle. Now you have a set of four complimentary colour pallets, Out of these four, use two complimentary sets more widely over other two. This will keep your design from looking like riot of colours fighting with each other.

Like complementary colours, split-complementary colours are also opposite each other, but include three or four colours, not just two.

Split-complementary contains the actual colour (hue) and the two colours on either side of its complement.  

The analogous colour scheme is 3-5 colours adjacent to each other on the colour wheel.  This combination of colours provides very little contrast.

Colour plays a big role stimulating our emotions. Warm colours pull forward higher than cool colours. That’s the reason darker warm colours look as bright as lighter cool colours.

Examples of warm colours and what they represent:

• Red: Energy, Passion, Love, Power

• Orange: Happiness, Enthusiasm, Success, Attraction, Wellness

• Yellow: Stimulation, Attention, Cheerful

Examples of cool colours and their psychological representation:

• Green: Refreshing, Prestige, Cool, Calm, Fresh

• Blue: Dependable, Trustworthy, Restful, Reliable

• Purple: Mystery, Royalty, Transformation, Spiritual, Celebration

Black and White is colour neutrals and has the following representations:

• Black: Sexy, Submission, Danger

• White: Pure, Innocent, Refreshing, Sterile, Respect

Apart from hues and tones, saturation and lightness also affects our perceptions and so must be considered in our designs. Manipulating saturation and lightness, we can create focus areas of our designs.

So once you identify the purpose and target audience of your website or design, apply the above theories to create the tone of it. Depending on the colour application coupled with content and graphic placement, the design could be lively, cool or conservative based on the design goal that you have set. All it takes is to understand the basics of colour, some imagination and proper planning.

If designing a website or other publication for a corporation, large company, or similar establishment, you will need to handle working with branded images and colours. Most large companies and corporations have a recognizable brand that must be adhered to and few stray from their 'locked in' colours. Although it is a great idea to keep to a specific corporate identity and colour scheme, some large establishments go overboard and don't allow for any variations on their colour set. Every large company should have many variations of their colour schemes, but if they don't, you will just have to follow their rules and be as creative by following the principles of colour. Another great way of finding out how designers work around the colour restrictions is to browse different corporate websites such as; pepsi.com , adobe.com , ge.com etc.