Graphics on the Web 2 - Colour System Primer

Now that you have a basis for understanding where these strange computer numbers come from, we can apply that knowledge to colour systems.

Back in the old days, monitors were black and white only. Okay, they were black and green, or maybe amber, white didn't come along for a while. But hey, if you want to get picky, the really old systems were lines of blue text on white paper. But, in any event, the systems were “monochrome” or one colour. Monochrome can either be on or off, white or black; it’s a binary system that has only two possible states. This means that it takes 1 bit of storage for each dot on the screen. A screen dot is called a “pixel”

It looks something like this: (note, for printing clarity, I've made on = shaded)

The Screen					The Data
					0	1	1	0
					1	0	0	1
					1	0	0	1
					0	1	1	0
					0	1	1	0

In words, for a screen that was 4 pixels across and 5 pixels down, it would take 20 bits of data to store the image.

Now, This is pretty boring so someone came up with the idea of having variable intensity levels for each pixel. Each dot on the screen could be black (off), dim (33% on), medium (66% on), or white (full on). In other words, each pixel had 4 possible states and this requires 2 bits per pixel to store. For the same number of pixels, our bit count now stands at 40. It looks like this:

The Screen					The Data
					00	11	11	00
					10	00	00	10
					01	00	00	01
					00	11	11	00
					00	11	11	00

Then someone thought, wouldn't colour be nice, and 16 colour mode was born. In 16 colour mode, each pixel can be, you guessed it, one of 16 possible colours. Of course, 16 possibilities require 4 bits per pixel to store. It looks like this: (note that the colours won’t print on a black and white printer, they may appear as shades of grey. Also, I've randomly picked values for each colour.) Note that our bit count is now running at 80.

The Screen					The Data
					0000	1010	1010	0000
					1001	0000	0000	1011
					0101	0000	0000	0111
					0000	1100	1100	0000
					0000	1111	1111	0000

But still, 16 measly colours does not a perfect world paint. How many colours do you thing you would need to create realistic scenes? Well, getting realistic colours requires a lot more: millions more. Thus, 24 bit colour was born. This colour system uses 8 bits for each of the 3 primary colours (red, green, and blue). Remember that 8 bits gives you 256 possible combinations, and that’s 256 possible shades of red, 256 possible shades of green, and 256 possible shades of blue. By mixing each of the primary colour together, we get 256 * 256 * 256, or 16777216 possibilities. Now, for realistic colour, our bit count, for the same 20 pixel display, now runs at 480. 24 times more information than 16 colour mode. It looks like this:

The Screen					The Data
					R=00000000 G=00000000 B=00000000	R=00000000 G=00000000 B=11111111	R=00000000 G=00000000 B=11111111	R=00000000 G=00000000 B=00000000
					R=00000000 G=11111111 B=00000000	R=00000000 G=00000000 B=00000000	R=00000000 G=00000000 B=00000000	R=11111111 G=00000000 B=00000000
					R=11111001 G=00111011 B=11100110	R=00000000 G=00000000 B=00000000	R=00000000 G=00000000 B=00000000	R=10001101 G=00000110 B=00111110
					R=00000000 G=00000000 B=00000000	R=00000000 G=11000110 B=11011100	R=00000000 G=11000110 B=11011100	R=00000000 G=00000000 B=00000000
					R=00000000 G=00000000 B=00000000	R=11111111 G=11111111 B=11111111	R=11111111 G=11111111 B=11111111	R=00000000 G=00000000 B=00000000

Now, 480 bits is still pretty insignificant but you have to realise we’re talking about a 4x5 pixel array. Nowadays, most people run their monitors at 800 x 600 pixels. A full 24 bit colour image on this display requires 800*600*24, or 11520000 bits. That’s 11 million bits of information. Now, recall that computing people use bytes instead of bits when talking about storage space, so 11520000 / 8 = 1440000 bytes (or 1440000 / 1024 /1024 = 1.37Mbytes in computerised metric.) One screen image takes nearly 1 and a half million bytes of storage space.

Back when storage space, in hard drives and RAM, was very expensive, someone came up with a way of compressing this information down. The idea was that, while 16 colours is very limiting, most of the time you don’t really need 16 million colours. Why not have something in between? Thus, 256 colour mode was created. 256 colour mode is actually still 24 bit colour but limits the possible range of colours to 256 by using what’s called a “pallet.” At the beginning of the file for each image, or within a video card, there is an area called the pallet. It is a list of 256 possible colours and their corresponding 24 bit red/green/blue (RGB) values. A pallet looks something like this:

Pallet Entry	Colour	RGB Values
0		R=11111001 G=00111011 B=11100110
1		R=10001101 G=00000110 B=00111110
2		R=00000000 G=00000000 B=11111111
3		R=00000000 G=11111111 B=00000000
4		R=11111111 G=00000000 B=00000000
5		R=11111111 G=11111111 B=11111111
6		R=00000000 G=00000000 B=00000000
…
255		R=00000000 G=11000110 B=11011100

Then, the actual pixel info just references the pallet rather than storing the full 24 bits for each colour. It looks like this:

The Screen					The Data
					00000110 (6)	00000010 (2)	00000010 (2)	00000110 (6)
					00000011 (3)	00000110 (6)	00000110 (6)	00000100 (4)
					00000000 (0)	00000110 (6)	00000110 (6)	00000001 (1)
					00000110 (6)	11111111 (255)	11111111 (255)	00000110 (6)
					00000110 (6)	00000101 (5)	00000101 (5)	00000110 (6)

So, we have a bit count of 160, not including the overhead for the pallet, or roughly one third the size of the same pixel area in 24 bit colour. In general 256 colour mode works very well for graphic images but, even with 256 possible colours, does not work well for photo-realistic content.

The very same system is also used for a newer form of 16 colour mode. In this system, rather than using the stock 16 colours, a pallet containing 16 possible 24 bit colour values is used. It provides a little more flexibility than the old 16 colour system, with very little extra bits. When using this system, the original 16 colours are sometimes referred to as “Windows colours.”

There is one more system worth mentioning: it’s “greyscale.” Greyscale is kind of like the old 2 bit variable intensity black and white, but with 8 bits per pixel. Thus, each pixel can be one of 256 possible shades of grey. I won’t bother with the table as it’s pretty similar to the ones already shown.

Now, with storage space still at a premium, engineers figured out other ways to compress the pixel information down. Thus, we will get into file types.

Part 1 - Binary Numbers

Part 3 - File Types