Copied to clipboard

←  Colorpicker

Color Template

How do you choose the right colors for your designs?

1 - The Color Wheel

The color wheel is ideal for learning how to combine colors. White light consist of all visible colors, which form an infinite spectrum illustrated by a rainbow. The chromatic circle renders this infinity as 12 basic colors, very similar to your first pencil box.

2 - Color definition

The color wheel contains 12 basic colors.


First, the three primary colors (blue, yellow, red)

Primary colors combine to create secondary color



Which combine to produce the tertiary colors.

3 - Color relationship

Monochrome colors

First, we find the shades, tints, and tones of the same color. These palettes are called monochrome. They have no color depth but provide contrast value. So essential to the success of a graphic design!

Analogous colors

Adjacent colors are called analogous. They share the strong colors (here blue and pink) and create a pleasant harmony and low contrast. Analogous color palettes are always rich and easy to use !

Complementary colors

The diametrically opposite colors are called complementary. (Pink & Green)
Complementary colors create contrast. A color and its compliment radiate a sense of energy and vigor.

4 - Color Harmony

These color relationships allow to create harmony

Harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order, a balance in the visual experience. When something is not harmonious, it's either boring or chaotic.
At one extreme is a visual experience that is so bland that the viewer is not engaged. The human brain will reject under-stimulating information.
At the other extreme is a visual experience that is so overdone, so chaotic that the viewer can't stand to look at it.

The human brain rejects what it can not organize, what it can not understand.
The visual goal requires that we present a logical structure. Color harmony delivers visual interest and a sense of order. - Source

5 - Warm and cool colors

The color circle can be divided into warm and cool colors.

Warm colors are vivid and energetic, and tend to advance in space. (right)

Cool colors give an impression of calm, and create a soothing impression. (left)

White, black and gray are considered to be neutral.

6 - How Many Colors?

It is hard to give an exact answer to this question, but in general one can say that the risk of using too many colors is greater than the risk of using too few.

Too many colors will make the page feel too busy and it usually makes it harder for the viewer to find the information he wants. It is also more tiring to the eyes.

A page with too few colors, on the other hand, risks being seen as a bit boring, but this need not always be the case. - source

One commonly used rule in these matters is to use 3 colors.

7 - Triadic Colors

At number 3, we have seen three major reports that can have two colors on the color wheel. (monochromatic, analogous, complementary). However, there are other combinations like triadic colors, which is to use colors that are evenly spaced around the color wheel.

A three color combination is a good starting point. This is enough to create variation and visual interest.

Triadic color sheme tend to be quite vibrant even if you use pale or unsaturated versions of your hues.

8 - Rationing Color

Apply the 60 - 10 - 30 rule for success

You should not use equal amounts of the three colors. An old designer's rule is to divide the colors into percentages of 60, 30, and 10.

60% 10% 30%


The primary color should cover about 60% of the space and create the overall unifying theme of the design. Then add about 30% of the secondary color to create contrast and visual interest. Finally use about 10% of the accent color to provide that final touch of elegance. A good example of this distribution of color is a man's business suit: 60% of the outfit is made up of the slacks and jacket. The shirt represents 30%, and the tie 10%. - source

9 - Example

1 - Choose a color first

To begin, choose a color.
often when working for clients, the first color is imposed to follow the corporate identity of the company.

2 - Seek its relations

Then look for the relationship that your color can have, you can use the color wheel depending on the color number you want.

3 - Apply on your design

Finally apply the color on
your design (keeping in mind the 60% rule). And get an harmonious creation !

10 - Useful links

Here are some useful links to choose colors

Looking for a particular emotion, style or atmosphere from your colour palette? Pictaculous is a clever tool that allows you to pick out colours from an uploaded image.

Kuler is a community driven web app that lets your browse color palettes created by others. You can also create your own by using the color wheel, harmony rules, and color sliders.

Color Scheme Designer has been around for a while, but was just recently updated with a brand new interface and a new color scheme generating engine.

You liked this tutorial? Share it on your social networks!

It does not save pandas but it will make us happy.

You can also visit Rocket Design