Color winnows humanity’s perception regarding the world and alters their relationships with their surroundings. Colours have an enhanced effect on human perception, preference, and psychology throughout their lifespan. The preferences about color can be observed in infants as young as three months old, and typically change with age.
A few responses to color are innate, and some are learned from nature or culture. It has been long observed that cool hues acts as relaxants, and they are generally preferred over their more arousing warm counterparts.
Source: Color psychology
Colours, though subtle, are pervasively influential element in graphic design. It penetrates graphic representations in packaging, advertising, and branding. Even the most infinitesimal variations in color can enhance or devastate the design effectiveness and
have conclusive economic implications for companies and products.
The relationship between humans and colours has been around for eons and evolution has embedded it so deep into human subconscious that its dormant yet active hypnotic potential makes it a worthy asset for any visual communicator.
The Colour Theory
Color theory can be termed as both the science and art of using color in the right way. Colour theory helps in determining how humans perceive color; and the visual effects of how colors mix, match or contrast with each other. The theory also involves the messages colors communicate; and the methods used to replicate color.
Let us understand this very basic first.
In color theory, you will find that the colors are organized on a color wheel and are grouped into 3 most fundamental categories: primary colors, secondary colors and tertiary colors.
Color theory helps entrepreneurs build a strong brand. There is reason behind the Coke choosing red! And this colour theory will help you get more sales and return on investment. A major part of your branding should be focused on colour.
Even if that bright red tin-can is sitting on the rack facing backwards or lying in the corner of the road crushed entirely with no logo visible, you still know its Coke. Just by perceiving the colour, your mind knew already. How? A very large portion of the company’s success goes to the colours they chose for their branding.
The Colour Wheel
It is said that the first color wheel was designed by Sir Isaac Newton back in 1666. Artists and designers still use it to develop color harmonies, mixing and palettes.
A color wheel or color circle can be termed as abstract illustrative organization of color hues around a circle, depicting the relationships between primary colors, secondary colors, tertiary colors etc.
The color wheel has three primary colors (red, yellow, blue), three secondary colors (colors created when primary colors are mixed: green, orange, purple) and six tertiary colors (colors made from primary and secondary colors, such as blue-green or red-violet).
When you cut this circle from the centre or draw a line in between, you will get the difference between cool colours and warm colours, which we discussed in the beginning of this article.
Choosing Colors for Apps
Source: Express Colour
At its most foundation level, the Primary Colors, Yellow, Red and Blue, sit at the top of any color structure. These three Primaries are the original parents of all the future generations of colors.
The next in line are the three Secondary colors, Orange, Purple and Green. These three secondary colours can be considered as the children of the three Primaries shown above.
Fundamentally, secondary colours are obtained by mixing the primary colours.
Yellow + Red = Orange
Red + Blue = Purple
Blue + Yellow = Green
In the end, the rest of the six colors are referred to as the Tertiary Colors. You can consider them as the six grandchildren of the Primary Colors.
Color Theory teaches us that each Tertiary color is the result of one Primary Color mixed with one of its nearest Secondary colors. Therefore we end up with a new color that stands somewhere in between both of them.
Yellow + Orange = Yellow/Orange
Red + Orange = Red/Orange
Red + Purple = Red/Purple
Blue + Purple = Blue/Purple
Blue + Green = Blue/Green
Yellow + Green = Yellow/Green
Let us dive deeper into the world of colours and assimilate how they affect the designs around us
You might have naturally heard about the words hues, tones, tints, shades etc. What do they actually mean? How designers can use these terms? How are they relevant to web and app designs?
In general terms, both these words, hue and colour are used interchangeably. Even though it is right to do so, in technical terms they have a slight difference.
Colour is the general term that is used to describe every hue, tint, tone or shade we see. What we call White, Black and Gray, are often referred to as a color.
A Hue pertains to the dominant Color Family of the specific color we’re looking at. White, Black and Grey are never referred to as a Hue.
Hue is the origin of the color we see. You can think of the Hue as one of the six Primary and Secondary colors. So, technically, any palette you see, or a beautifully painted canvas that you are awestruck with, or a mesmerizing app that lies in your mobile, the underlying base color of the entire mixture which you are looking at is either Yellow, Orange, Red, Violet, Blue or Green.
According to the Color Theory, a true Tint can be defined as any Hue or mixture of pure colors which has only White added to it.
Source: My Bluprint
When you add both black and white to a hue, the resulting output is called tone. You can look at it this way, you are fundamentally adding grey to the hue. It all depends upon the proportions of black, white and the hue you’ve chosen; the resulting tones can be darker or lighter than the original hue.
Tones have the ability to reveal subtle and complex qualities in a hue or a combination of hues. Moreover, they are more true to the way we see colors in the real world.
Source: My Bluprint
If you add black to a hue and you get a shade. Shades tend to be richer, darker and more intense than the original color. There are many black pigments which are overpowering, hence adding black to a hue is tricky and sometimes frustrating.
Now that we understand the most basic workings of colours, let’s simply get down to how these colours can be used in web and app design.
The colour red promotes the emotion of importance, power, and youth.
It is one of the stimulating colors and can grab a user’s attention immediately; commonly used for warnings and important notices. It is so energizing it has been found to increase blood circulation. It represents passion and power.
Red is very appropriate for Pizza Hut website and brand. Users perceive the brand as youthful and passionate. Using red is not always advisable as it can incite anger, or at least overstimulation. That is exactly why they have used it sparingly or at least in a lighter shade.
Orange is a highly vibrant and energetic color where its muted forms it can be associated with the earth and with autumn. Since it is in association with the changing seasons, orange can represent change and movement in general. The colour also represents creativity.
Another way orange is associated is with the fruit of the same name, hence it can be associated with health and vitality. Orange commands attention without being as overpowering as red. It’s considered more friendly and inviting, and less in-your-face.
Blue is used extensively to represent calmness and responsibility. Light shades of blues can are found to be refreshing and friendly. The darker blues on the other hand are more strong and reliable.
See how Deepmind’s website uses different shades of blue to their benefit.
The overall meaning of blue is largely affected depending on the exact shade and hue. In terms of design, the exact shade of blue that you select will have a huge impact on how your designs are perceived. The dark shades of blues, like navy, can be excellent for corporate sites or designs where strength and reliability are important.
Also, look at how social media mobile apps use blue to invoke a sense of trust and strength in their users. Be it Facebook, Twitter, LinkedIn or Skype, they use various shades of blue to establish their branding.
In this way one can easily consider the effect of colours on user’s mind before they opt for iOS application development services or Android application development services. You do not have to be Picasso or Michelangelo before you start building a website or an app. However, a basic understanding usage of best colors for apps can be a solid prerequisite for web design.