The basics of Colour Theory

What is colour?

Colour is tricky is what it is. White light is split up into colours, which when combined, form white again.

Everyone knows this – when you shine white light through a prism, you get seven colours – Red, Orange, Yellow, Green, Blue, Indigo, Violet.

The seven colours of the rainbow.

… Assuming you discount the Near UV and Near IR shades of course, and limit yourself to the visible spectrum that humans enjoy (Other animals can see more UV, but less red, for instance), and you’re not colour blind…

And you discard all the other colours that are between those seven colours.

And if you accept that Orange should be there. But why shouldn’t it? Well let’s see:

Here’s a colour wheel:

As we can see, there’s the three primary colours in light. Red, Green and Blue. They’re at the centre of our wheel. If we mix them we get the second ring – Red, Yellow, Green, Light blue (Cyan), Blue, and Violet (Magenta).

It’s only when we start mixing that second ring of colours to make a third ring that we get to orange!

Let’s label the rings:

• Primary.
  The ‘elemental’ colours.
• Secondary.
  The colours you get by mixing the primary colours.
• Tertiary.
  The colours you get from mixing secondary colours.
• Everything else.
  The colours you get by mixing each subsequent ring. Each time you add a ring the number of colours doubles: 3,6,12,24,48,96,192… You’d either need a huge ring or colour blocks that are too small to be useful, so after Tertiary colours it’s basically a handwave.

Saturation

Saturation refers to how pure the colour is. Pure red is 100% red, accept-no-substitutes, eyeball vibrating, top of it’s game red.

A de-saturated colour is grey. Let’s look at a handy graphic:

Starting at the top we have that gorgeous vibrant, fully saturated “Jewel tone” set of colours, then moving down they shade through pastel, lose their vibrancy and become grey.

The lower edge isn’t straight though. It appears  that some colours remain stronger than others, which fade into grey a lot earlier.

This is because the human eye isn’t sensitive to all colours, to the same amount – we’re a lot better at seeing Green than we are at seeing Blue, and women can (often) see more Red than men!

Complements.

”My what a fine colour that is!”

Ah, that’s a compliment. A complement is an opposite. In colour theory, we use a circular model so we can show each of the three primary colours blending with the other two, to get a full range of colour.

Each colour has an opposite, which when mixed with it, will form white (Or black or grey, depending on how saturated the colours are).

Black, white and grey are “Neutral” colours. They aren’t biased towards any one of the primary colours, they have equal amounts of all three! So… who cares?

Well, you don’t want to look like a clown when you get dressed, or decorate your room in a way that looks bad do you?

Let’s pull up the colour wheel again:

Here I’ve labelled the three rings, and drawn in a line from Red to Cyan. The circle at the end is filled with red, which is mixing with Cyan to make white.

This is because red and cyan are opposite – Complementary – colours. I’ve also added two more sample lines showing what red looks like when blended with the colours either side of Cyan – we get pale yellow and violet.

Analogous colour

Instead of picking opposites, what if we picked colours that went together? Orange, Red and Magenta for instance? They line up nicely on our colour wheel.

Let’s take a look at three colour schemes:

• Analogous
  Orange, Red & Magenta
• Complementary
  Red & Cyan
• Split Complement
  Red and the two colours either side of cyan.

In the first, the colours are too similar – they wash out.

In the second, the colours are too antagonistic. They look horrible! They have great contrast but they’re also kind of eye hurting…

… But not as eye hurting as split complement, which is a crime against vision.

But then if we start to de-saturate and darken the colours, they begin to work with each other – in other words the closer they get to neutral, the easier on the eye they are.

If you have a neutral background, you can apply brighter colours to it. Red or yellow on black or blue on white look quite nice. Due to the way monitors tend to be set up, blue on black on-screen tends to be a little harder to see and requires a lighter colour.

For example – Blue and Cyan and Sky Blue.

If you use one colour, you can use the complement or complementary analogous colours for contrast – rule of thumb is that if one colour is saturated, the other colours have to be dark and/or de-saturated – otherwise they will clash.

Colour-blind

The most common type of colour-blindness is Red/Green colour-blindness. Let’s look at our ‘full spectrum’ colour wheel under the filters of Protanopia and Deuteranopia colour-blindness simulation:

Green and red becomes yellow, blue becomes a series of blue shades – Cyan becomes white. Certain colour combinations would then become very hard to distinguish – Green on yellow, for instance, or Cyan on white.

In the next tutorial we’ll take what we now know about shading, highlights, colour bleed and colour theory and start applying them all together in a horrible travesty that will blight your soul until the sweet release of death.

In the meantime, here’s a reptile. I am assured reptiles make everything better.

Comments

[Anonymoose]

Primary colors I was taught were red, blue, and *yellow*, not green.

[Peter Boughton]

Don't trust anything you were taught at school. Well, not without checking it out fully for yourself.

This article is correct - in so far as it's describing the natural light spectrum, involving actual lightsources emitting colours (like a monitor).

The Red-Yellow-Blue primaries, where Red=Magenta and Blue=Cyan, are called subtractive primaries, because they apply to things that reflect light rather than produce it themselves. Paint being the obvious example. This is why printers use CYMK (Cyan,Yellow,Magenta,blacK) inks (although newer ones also include Red and Blue, and a dozen different blacks, because it lets them mix inks less, and charge consumers more).

Anyway, yeah, Cupro can probably explain it better, but hopefully I've made some sort of sense?