Basic colour theory for programmers

Alright, this is a crash course in basic colour theory. If you’re a game programmer, or web developer or anyone who will deal with colour at some point in his programming career, what you will read here is crucial. Let’s begin.

Colour models

You will most often deal with the RGB model, where red, green and blue are the primary colours. It’s an additive model. This is the traditional “adding” of colours together to produce new colours.

There’s also the CMYK model, referring to cyan, magenta, yellow and black. K is for key colour, and black was used. It’s also a subtractive model. It’s subtractive because mixing colours together prevents certain wavelengths of light from being reflected.

[Short digression]
When you see a blue cup, what happens is only wavelengths corresponding to the blue colour is reflected off the surface of the cup. All other wavelengths are absorbed by the cup. That’s why you see blue. You might find it helpful to review your science lessons…
[End digression]

Then there’s the HSV model, referring to hue, saturation and value. Some similar notations are HSL, HSI and HSB. The difference is lightness (HSL), intensity (HSI), and brightness (HSB). There are some differences between them. We’ll concentrate on HSV here, and you’re encouraged to read up on the others.

Hue refers to the colour itself. Saturation refers to “how much” of that colour. And value is “how light” is that colour. It’s a bit hard to explain. I’ll show how this looks like in a section further down.

What’s the deal with red, YELLOW and blue then?

If I understand it correctly, it’s basically a misunderstanding (read more about RGB and RYB). RGB is used in light-related situations, such as television and computer monitors.

The RYB model is a simplification of the CMYK model (as I understand it). It’s not easy for mortals to associate cyan with blue, or magenta with red… Can you imagine teaching a 6 year old to say “magenta” instead of “red”?

The RYB (or CMYK) model is used in pigment-related situations, such as printing and painting. Our water colour and crayon art classes fall into this.

Why do you need to know this? Normally, you don’t need to. Unless you’re writing code for a printer driver. Then this difference is crucial to your understanding.

Colour representations

You might have created colour wheels in your science class or art class (I created mine in an art class). It looks like this:

Colour wheel
[original image]

Then there’s the colour cone.

Colour cone
[original image]

This is the usual HSV representation. Hue refers to the edge of the circular plane containing the “pure” colours. Saturation refers to how far the colour tint is from the centre of the circle. The closer a tint is to the centre, the whiter the tint. The closer a tint is to the edge, the more saturated the tint is with that particular “pure” colour.

Value refers to how light the colour is. Visually, it’s how close a tint is to the circular plane. The lower the value (close to point of cone), the darker the tint. The higher the value (close to circular plan), the lighter the tint.

You might find it useful to play around the colour control in Paint.NET:

HSV controls in Paint.NET

And then we have the colour cube, which might be easier to understand:

Colour cube

Red, green and blue values are used as the 3 axes, similar to our 3D X-, Y- and Z- axes.

We see more than is representable

Humans see a greater range of colours than is represented. Have a look at this:

Visible colour range
[original image]

You see that triangle there in the centre? That’s the representable range of colours. We see a whole lot more colours than our computers can represent.

Notice how much more green we can see? A possible reason is our ancestors lived in an environment surrounded by plant life (no citations… remnant from my early student days…). Maybe we needed to distinguish more variations of green…

It’s also a reason when colours are stored in 16 bits, green is given more priority. 5 bits for red, 6 bits for green and 5 bits for blue. We’ll look at this in a future post.

Colour temperature

This section deals with subjective opinions about colours. As a programmer, you’re probably not too interested in this. But if you’re a web developer, or a programmer pressed into design work, you should care about this.

So, there are warm colours and cool colours. Warm colours typically include the reds, oranges and browns. Cool colours typically include the blues, greens and greys. Warm colours incite feelings. Cool colours calm feelings.

There’s this internal web application I’m maintaining. The user interface is almost totally “warm”. The header is red. The datagrids are red. Buttons are pinkish. Oh my goodness, how can a user come to a screen like this and not get angry?

On a usability point, how can an error message be displayed so the user takes notice of it? Error messages are typically in red, or highlighted with red (or warm colour) backgrounds. Since everything is reddish, nothing stands out.

There’s no excuse for making a simple design mistake like this, even if you’re “only a programmer” and not a designer.

Colour contrast

A basic contrast principle is this: 2 colours opposite each other on the colour wheel form a contrast pair. For example, blue and orange form a contrast pair.

It doesn’t mean they form the best contrast pair. But it does give you a starting point. Orange and green is fine too (I didn’t say they’d be pretty…).

For web design, 3 base colours are usually chosen. (Sorry, I can’t find any reference on this. Purely from a vague memory in the recesses of my brain…) A rule of thumb is to choose 3 colours on the colour wheel such that they form a triangle. For example, red, yellow and blue. Or orange, green and magenta.

This way, the 3 colours form enough of a contrast to each other. But it will look terrible if every colour on a web page contrast with each other. Which brings us to…

Complementary colours

Complementary colours enhance each other. For example, red, orange and brown. Or green, blue and yellow. How do you choose them? They are next to each other on the colour wheel, give or take a couple of colour steps.

How does this work with contrast colours? Choose a predominant colour out of the 3, then choose complementary colours based on this predominant colour. Use the predominant colour and its complementary colours throughout the web page/application, and use the other 2 for contrast.

End of crash course

This has been quite long already, so I’m wrapping up. Understand the different colour models, colour representations and basic colour relations. This is ground work for future posts.

My plan is to slowly work towards 3D programming, and I needed to start off with basic colour theory. It’s going to be hard to explain diffuse colours, ambience, and specular highlights without this. Which are used in understanding 3D rendering. Which is used in games.

Exciting, right? Stay tuned.

Comments are closed.