TutsArena

Color theory basics

by Tom Lynch - Tutorials

When you design a site or a template, how do you pick the colors? Read this short tutorial by Tom Lynch on how to understand which colors work together and why.

Colour is one of the single most important tools any designer can use, and ultimately needs. However, many designers will choose their colours based upon completely personal reasons, such as “it looks right”. While this is by no means wrong, there are different methods to choose colours, that are based upon more scientific methods. I’m going to be explaining some of these methods, as well as the well known colour profiles etc over the course of this tutorial

One – Introduction and Colour Theory

Most of you will be familiar with the traditional colour wheel. You may have been shown it back in the first years of school, and it’s still just as relevant to you now, let’s take a look at it

We can take from this colour wheel, some colour groups, some of which you will be familiar with, others may be new to you. I’ll list each of them and give you a short explanation of each

Primary Colours

Primary colours are the basis of all other colours, and are Red, Yellow and Blue. As you can see, they are all equally spaced on the colour wheel. When used together they tend to give a very contrasting effect, and are often very harsh together

Secondary Colours

Secondary colours are formed when you mix the primary colours together. You get green from yellow and blue, purple from blue and red, etc etc. These colours tend to have a much gentler feel to them than using the primary colours together

Tertiary Colours

The tertiary colours are formed by mixing a primary and secondary hue together. They could be referred to as the “in-between” colours, as they’re just combinations of two other colours. There can be endless combinations of tertiary colours due to the way they’re mixed.

Complementary Colours

Complementary colours are opposite to each other on the colour wheel. Their name can however give off the wrong impression, as when used together they can be anything but complementary. They contrast each other very strongly, which is generally not a good effect when designing. It can be used to our advantage sometimes, when we want that extremely contrasted effect, but you must be careful when using them together

Analogous Colours

Analogous colours are found adjacent to each other on the colour wheel, and as such, go very well together. The one thing to think of when using analogous colours is that if you base your design solely around those colours, you do run the risk of it being somewhat monotonous in colour, as the colours are very similar, but it can give a nice similar effect

Tetradic Colours

Tetradic colours (sometimes referred to as double complementary) is a pair of complementary colours. This opens the door to a huge array of colour possibilities. Again, it is advisable to think carefully about using them in your designs. Generally th best practise is to choose one colour and have that as the primary colour in the design, and to have it backed up by the other three. You can have 70% in one range of a colour and the other 30 split between the other 3 and it will still look together and well balanced.

Two – Colour Systems

Excluding the general Red, Yellow and Blue system, there are a few other main ones, which you’ve probably noticed before but maybe not looked into, again, they’re listed here for you to look into;

RBG Profile (Red, Blue, Green)

The RGB profile is used on anything involving light. TV’s, computer monitors etc etc. The three colours can be blended together to form most other colours, although for design purposes, you most likely won’t need to use this very much.

CMYK Profile (Cyan, Magenta, Yellow, Black)

If you’ve ever designed anything that you intended to print, then this profile should have gone through your mind. It is used by printers worldwide, as it can produce almost all colours needed to print. Unfortunately it cannot produce as many colours as the RGB profile, and thus yellows often come out looking closer to a muddy brown colour. It is also a pretty clever way to mix paints for more classical designs.

Pantone (PMS) Colour

One you may not be so familiar with the Pantone colours, but they are a very useful set of colours if you want something printed with the exact same colour each time. One particular use for these, is in t shirt printing. Pantone make each pigment individually so you are guaranteed to always have the exact colour you had last time. You can access these colours from the swatches panel on your Photoshop workspace, and if you’re designing for such things, I’d strongly reccomend you use them

Three – Shades, Tints and Tones

Shades, tints and tones are three words that are often used wrongly when describing colours. Some people would say they all share the same meaning, but in that case, they would be mistaken. You can make a tint of a certain hue (or tint that hue) by adding white to it. The more you tint the hue, the closer it will get to pure white. The exact opposite is a shade. Shades are made by adding black to a certain hue, and will get progressively closer to black. A tone is a mix of the two, and is made by adding grey to the hue. Very similar words and methods, but with VERY different meanings, examples again are below

Four – Overview

By now, you should be more familiar with the general colour profiles, with the ideas of complementary, analogous colours etc, and how to use them together, as well as the difference between tints, shades and tones. If you take all that into mind when you’re trying to think up your colour schemes, you should be able to get something extremely good going. Of course, if you choose a colour scheme that should work, but you don’t think looks good, then by all means change it, this information is purely here for you to learn from, so you can understand more behind the science of colours and colour theory

As ever, if you have any questions about this or any requests for different tutorials, I’m available on many channels. You can leave me a comment here on Tutsarena, you can email me at tom.lynch23@googlemail.com, you can follow me on Twitter here or contact me on Facebook here and I will get back to you as soon as I can. Take care guys, and have fun!