![Picture](/uploads/4/0/0/5/40057743/7274442.png?131)
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 color wheel fits together like a puzzle - each color in a specific place. Being familiar with the color wheel not only helps you mix colors when creating artworks, but in adding color to all your designs. Below is how it looks when empty.
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 color wheel fits together like a puzzle - each color in a specific place. Being familiar with the color wheel not only helps you mix colors when creating artworks, but in adding color to all your designs. Below is how it looks when empty.
a. Colour wheel with primary colors. Primary colours are not mixed from other elements and they generate all other colors.
• Red
• Yellow
• Blue
• Red
• Yellow
• Blue
b. By mixing two primary colors, a secondary color is created.
• Red + Yellow = Orange
• Yellow + Blue = Green
• Blue + Red = Purple
• Red + Yellow = Orange
• Yellow + Blue = Green
• Blue + Red = Purple
c. Tertiary, colors are created by mixing a primary and a secondary.
• red-orange
• yellow-orange
• yellow-green
• blue-green
• blue-purple
• red-purple
• red-orange
• yellow-orange
• yellow-green
• blue-green
• blue-purple
• red-purple
Color 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 colors meaningfully communicate with each other. The source of these meanings can be as simple as those found in nature — red is the color of blazing fire and blood, blue the color of cooling waters and the sky; or meanings may be more complex in certain cases.
Color theory is a set of principles used in order to create harmonious color combinations. With the use of color theory, you can combine colors together perfectly every time. As per the principles, the following colors are harmonious:
(1) 2 Colors Opposite of Each other on the Color Wheel are harmonious.
(2) Any 3 Colors Equally Spaced Around the Color Wheel Forming a Triangle are harmonious.
(3) Any 4 Colors Forming a Rectangle, Each Opposite of Each other on the Color Wheel are harmonious.
Colors 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 grays in between.
Hue: A hue is a pure color with no black or white added. A hue is the feature of a color that allows it to be identified as the color by it’s name; for example red, blue, yellow, green, purple, etc.
Pure/Natural Hue: A pure hue is the base color at its full intensity level, in other words, no shading, tinting, or tones have been added to the color yet.
Shades: Shades are the relative darkness of a color. You create a shade of a color by darkening the pure hue with black.
Successful design requires an awareness of how and why colors meaningfully communicate with each other. The source of these meanings can be as simple as those found in nature — red is the color of blazing fire and blood, blue the color of cooling waters and the sky; or meanings may be more complex in certain cases.
Color theory is a set of principles used in order to create harmonious color combinations. With the use of color theory, you can combine colors together perfectly every time. As per the principles, the following colors are harmonious:
(1) 2 Colors Opposite of Each other on the Color Wheel are harmonious.
(2) Any 3 Colors Equally Spaced Around the Color Wheel Forming a Triangle are harmonious.
(3) Any 4 Colors Forming a Rectangle, Each Opposite of Each other on the Color Wheel are harmonious.
Colors 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 grays in between.
Hue: A hue is a pure color with no black or white added. A hue is the feature of a color that allows it to be identified as the color by it’s name; for example red, blue, yellow, green, purple, etc.
Pure/Natural Hue: A pure hue is the base color at its full intensity level, in other words, no shading, tinting, or tones have been added to the color yet.
Shades: Shades are the relative darkness of a color. You create a shade of a color by darkening the pure hue with black.
Tints: Tints are the relative lightness of a color. You create a tint of a color by lightening the pure hue with white.
Intensity (Also Known as Saturation or Chromasity): Intensity describes the identifiable hue component of a color. 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 gray color 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 color added.
Value / Luminance: Basically, value is a measurement of how close to black or white a given color 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 color wheel below, you will see that it is full of different color values. The outer band is the natural hue meaning that it is the original color. 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.
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 color added.
Value / Luminance: Basically, value is a measurement of how close to black or white a given color 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 color wheel below, you will see that it is full of different color values. The outer band is the natural hue meaning that it is the original color. 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.
Color values are the lights and darks of a color you create by using black and white (‘neutrals”) with a color. This makes hundreds of more colors from the basic 12 colors of the wheel.
• white + color = tint
• color + black = shade
The principles of color mixing let us describe a variety of colors, but there are still many colors to explore. The neutral colors contain equal parts of each of the three primary colors. Black, off-black, white, off-white, gray and sometimes brown are considered "neutral”.
• white + color = tint
• color + black = shade
The principles of color mixing let us describe a variety of colors, but there are still many colors to explore. The neutral colors contain equal parts of each of the three primary colors. Black, off-black, white, off-white, gray and sometimes brown are considered "neutral”.
Warm colors are found on the right side of the color wheel. They are colors found in fire and the sun. Warm colors 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.
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 colors, split-complementary colors are also opposite each other, but include three or four colors, not just two.
Split-complementary contains the actual color (hue) and the two colors on either side of its complement.
Like complementary colors, split-complementary colors are also opposite each other, but include three or four colors, not just two.
Split-complementary contains the actual color (hue) and the two colors on either side of its complement.
The analogous color scheme is 3-5 colors adjacent to each other on the color wheel. This combination of colors 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 colors. Most large companies and corporations have a recognizable brand that must be adhered to and few stray from their 'locked in' colors. Although it is a great idea to keep to a specific corporate identity and color scheme, some large establishments go overboard and don't allow for any variations on their color set. Every large company should have many variations of their color 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.
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 colors. Most large companies and corporations have a recognizable brand that must be adhered to and few stray from their 'locked in' colors. Although it is a great idea to keep to a specific corporate identity and color scheme, some large establishments go overboard and don't allow for any variations on their color set. Every large company should have many variations of their color 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.