Monday, 3 August 2009

Thoughts on Colour

Colour is a fascinating thing. As a child there was always that wonder of discovery that went with mixing colours to make new colours... always resulting in that grimy brown in the end.

I have since learned that as a child I was playing with subtractive colour, the mixing of pigments to subtract from white and make black. Meanwhile your computer monitor uses additive colour, mixing light to add to black and make white.

It gets even more interesting when you introduce colour wheels and start to notice the relationships between primary, secondary and tertiary colours. Or the difference between tint, hue and shade, or complementary colours and colours in common.

16 Million +

Computers make mixing colours so easy, in fact, with the right tools it becomes less about art or aesthetics and more about mathematics. Did you know for instance that the 16 million or so colours your monitor can display are made up of just 3 colours, red, green and blue? Each of these is called a channel, a red channel, a green channel and a blue channel. In fact your computer can display 256 increments (levels of colour strength) on each channel and by mixing those colours in different amounts you get all the colours available to your monitor.

Just think about it, 3 colour channels, 256 increments of each to mix:

256 x 256 x 256 = 16,777,216 possible colours

Decimal v. Hexadecimal

In decimal we count from 0 to 9 before starting over, giving us 10 increments. like so:

0 1 2 3 4 5 6 7 8 9

Using decimal to define colour we start with 0 as the lowest colour value, and end with 255 as the highest, giving 256 increments.

However, HTML (and at times Flash) prefers hexadecimal which differs from decimal in that we count from 0 to 15 before starting over, giving us 16 increments. Like so:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Using hexadecimal to define colour we start with 00 as the lowest colour value, and end with FF as the highest, giving 256 increments also.

We can say that a decimal 255 and a hexadecimal FF are of equal value. They represent the same number. Likewise a decimal 0 and a hexadecimal 00 are also equal.

Defining Colour Values Numerically

A present we are looking at specifying RGB colour, that is colour defined by the amounts of Red, Green and Blue in their makeup.

When defining RGB colour numerically, it is vital to remember the order of the colour channels. It is always Red, then Green, then Blue. Take the following decimal example:


Knowing the order of the colour channels means we can understand that this means the Red channel is on full blast at 255, the green channel is at three-quarter strength at 192 and the blue channel is at about half strength at 128.

Using hexadecimal we would write the same colour as:


The first 2 digits are the red channel, the second 2 digits the green channel and the last 2 digits the blue channel.

Fascinating stuff.

Anyway, as a result of my interest in digital colour, I have decided to take the plunge and see how Flash can be used to manipulate colour. From my initial reading an understanding of the above will be vital to colour manipulation with Actionscript.

No comments:

Post a Comment