Intended Audience: Entrepreneurs, Product Developers, UI Designers

Intended Industry: Web and Mobile Apps / IT / Digital

We often see the combination of colors as something random which artists have put together because it just feels right. Some people with inherent talent can achieve this but it does follow theory and science.

Let’s go through some basics to understand how we can arrive at a color combination for our products.

SELECTING THE MAIN COLOR

When we come across media, either still or digital, colors play one of the most important parts in not only whether we like what we see, but also how we subconsciously perceive the brand and its message. There are few things more important in design than color. The theory of color is a science and art unto itself.

Let’s start with what we symbolize colors as: 

Now let’s take a few brands and relate it to the meaning of the colors in them:

Ikea is blue and yellow, symbolizing strength and dependability in their brand and furniture, and warmth and happiness in your home.

MacDonald’s is a mix of yellow and red, bringing happiness and youthfulness to you.

Most financial firms (banks and insurance companies) will have blue in them showing trust and dependability. Think Citibank.

A lot of brands that want to portray luxury will have purple and gold in them. Take Cadburys for example.

Green and Yellow is the choice of companies in the healthcare sector and also the food industry.

Cosmopolitan magazines use pink for obvious reasons and to bring about a feeling in their customers of self-love and respect.

So these meanings of color help us in identifying what we want to use as the primary color in our brands based on the meaning that we would like to portray.

In saying this, very often people choose colors in their brand very arbitrarily and there may be no link between the message they want to portray and the meanings in the chart above.

COLOR COMBINATIONS

Now that we’ve selected the main color, how do we go about selecting complementing colors?

Well first let’s understand a few color terms:

Hue: A hue is the underlying base of the color that we see.

Tint: Tint happens when white is added to a hue.

Shade: Shades are when black is added to a hue.

Tones: When grey is added to a hue you get a tone. Note that grey is a mix of black and white.

You may not grasp the context of these terms just by reading these definitions, but let’s go through the google material design color and you will understand the significance.

I have used an illustrative of just one color here. You can get the full range from the google material design site/color.

To make things easier google has numbered the range from 50 to 900.

500 is the hue and are mostly used as the main color of the site.

50 to 400 is a tint and 600 to 900 are a shade. So to use a similar second color on your site, you would use a tint or a shade.

If you want to use another color as the second or even third color, then we need to visit the Color Wheel. The color wheel was developed by Sir Isaac Newton by taking the color spectrum and bending it into a circle. The color theory is based on the factors of this color wheel.

The color wheel can be split in half and divided into Warm and Cool Colors as seen in the illustration above.

• Complementary Colors are when you use colors on the opposite side. These colors are used when you want a higher impact and it to be more prominent.

• Split Complementary Colors are again used for high impact but when you want an extra third color.

• Triad Colors is when you use three colors that are evenly spaced out. Again they are high impact.

• Tetradic Colors are used to choose four colors that are again spaced out evenly.

• Analogous Colors are when you use 3 colors that are side by side on the color wheel.

• Monochromatic Colors is when you use one single color and complement it with a shade and a tone of the same color.

Typically you would use one color in Hue and the others as shades or tones. Using more than 3 colors is not advised since it becomes difficult to balance out. Ideally, you would like to use 2 to 3 colors.

COLOR QUANTITY

Once you’ve selected your colors the next question is how much of each to use. Over here we can use the 60 30 10 rule.

This is a rule created in the real world but works just the same in the digital space.

The larger color in terms of space should occupy 60% and should typically be a neutral color like a white or black or a tint (though it need not be limited to this). Shades are used here sometimes, though very rarely a hue. It is used to build negative space.

30% would be the main color behind your theme which would typically be a hue.

10% would be a complementing color. This could very effectively be used for a call to action buttons.

So these sections in the theory of color should give you enough knowledge to understand where to start while selecting and using colors for your web and mobile apps. After this, it’s more of art that will play a role in the outcome.