Color theory is really, really complex. Our goal isn’t to explain the entirety of color theory, but to provide you with a few broad concepts that you might be able to leverage in your UI designs immediately. Broadly, remember that colors can be useful for:

1. Creating hierarchy
2. Evoking certain emotions
3. Conveying meaning

Think in Black and White first

To start off, even before you start thinking about color, it’s really instructive to design in black and white. It forces you on spacing and laying out your elements, and results in cleaner layouts.

There are sites that need to portray a specific attitude — sporty, flashy etc. which might require the use of color from the get-go. These sites are much harder to pull off, and you will get there with practice.

When it comes to colors, less is more

Once you have a usable, clean and simple gray-scale design, only then add color — and that too only with purpose. The easiest way to add color is to add one color to a Black and White design, and then if needed a second color and then a third.

The more colors there are, the less impact each individual color will have. A great example is Instagram’s recent redesign:

The reduction of color not only makes the photos stand out more, but it increases the effectiveness of the notifications as well because they aren’t competing with the colors in the top and bottom navigation bars anymore.

Cool colors vs. Warm colors

Warm colors like red come towards you, while cool colors (like blue) fade into the background.

Let’s take a look at this in a UI example:

In the design above, we can see how the designer is using a warm red to bring the call-to-action (Update Now) forward, while using a cooler blue to recede the navigation farther into the background. The same happens in the illustration on the left. The red lightning icon immediately stands out among the rest of the interface.

Colors have meaning

Think of the colors Green, Yellow and Red. These colors have cultural meanings, and our designs should stay consistent with them. If there were three buttons with these colors, they might be: confirm, cancel, and delete. If they were indicators on a fuel tank: full, half, and empty. Or if they were on a stove: cold, warm, and hot.

Colors for grouping similar elements

You can also use colors to group similar interface components together:

Color can work really well with the concepts we learnt in Visual Hierarchy and White Space. Something big is noticeable, but something big and red can’t be missed! Make your errors and warning labels red and high-contrast. Or, if you’re just confirming what the user did, something a little smaller in a receding green might be perfect.