Colour Modes

Colours and binary system

Colour mode is the way computer stores or displays colours. As we all probably know, the smallest amount of information is 1 bit, which can have only one of two possible values at a time: "0" or "1". 8 such bits make a byte, (e.g. "00110101") which is enough to represent a character (e.g. in ASCII standard) or store information just about anything that can be described using a range of 2⁸ = 256 (8 bits) possible values.

Let us now consider RGB colour model - a convenient way to store information about RGB colours would be to use (at least) one byte for each of RGB "ingredients". Therefore one pixel (the smallest element of a picture) would need 3 bytes to store the information about its Red, Green and Blue intensity value.

RGB mode allows you to define some 16.7 mln colours.

Computer images in RGB mode

If we have an image stored in RGB mode which is 800 px wide and 600 px high, it will take 3 x 800 x 600 = 1,440,000 bytes (more than one megabyte) to store it in the computer's memory. The reason some graphic files are much lighter than we could expect by computing their capacity is compression used to "squeeze" the information about the image inside. The best example of compressed RGB images is the JPEG format.

Every pixel in this image is definded by 3 bytes with its
Red, Green and Blue intensity stored separately.
A beautiful picture by Blitzz-licht.

Of course we have to remember that not all monitors and not all browsers will support 16.7 mln different colours. However, if we define them in RGB mode we can expect the software (and therefore hardware) will do its best to find colours as close to what we defined as possible.

Web-safe colours and colour palettes

If we want to make sure the colours will be seen exactly as we want them to, we should use a pre-defined palette of 216 web-safe colours. The colour of a pixel will be then described rather by an index in a predefined table than independent RGB values. Unfortunatelly, as real life shows, even that "common" standard can fail us with some older pieces of equipment.

We could mention here another way of storing images: using colour tables, (palettes). If we have an image of a simple logo, there is no need to use such wide a range of colours as 256 x 256 x 256 (which makes up some 16.7 million different colours!). We can use a narrow range of 256 colours (1 byte instead of 3) or even less. All we need to do is to define the palette, for example: colour no. 1 will represent black, colour no. 2 - gray, colour no. 3 - white and so on. Having such a palette we can then describe a pixel of an image using just its index in the palette, that means only one byte for each pixel. A good example of images with colour palettes is the GIF format. The GIF format has another useful feature - it allows you to use one of the colours as transparent, so the pixels represented by that "colour" can be hidden to reveal the background behind the picture.

An example of a colour palette

Colour index	Colour name	Red value	Green value	Blue value	Sample
0	Transparent	-	-	-	-
1	Black	0	0	0
2	25% Gray	63	63	63
3	50% Gray	127	127	127
4	White	255	255	255
...	...	...	...	...
100	Red	255	0	0
101	Orange	255	127	0
...	...	...	...	...
255	Navy Blue	47	0	79
Each pixel of an image stored using this table would be represented by a colour index. During display of the image the browser would look up the RGB values and assign them to it.

Colour definition in CSS

Let us get back to the RGB mode - this mode is actually used widely in web design to specify what colours we use on our web site. It is a good habit to keep our "content" code and our "presentational" code separate, which means that we should use our HTML files only for building the structure and storing the contents of a document, while all the data describing colours, backgrounds, borders, text indents etc. should be kept in a separate CSS file. In that way our code will be clear, flexible and we will save ourselves a lot of time in case we need to make some changes. And so, all the information about colours will be stored in a CSS file and it will look something like this:

color: rgb(127, 16, 80);
background-color: rgb(255, 64, 2);

or this, if we use percentages:

color: rgb(50%, 6%, 31%);
background-color: rgb(100%, 25%, 1%);

or this, if we go into hexadecimal code:

color: #7f1050;
background-color: #ff4002;

or this, if we use short colour format (just like on this page):

color: #715;
background-color: #f40;

or similar to this, if we use pre-defined constants as the names of colours:

color: purple;
background-color: orange;

Hexadecimal code

Now, the first thing is spelling of the word "color" - if you try "colour" it would simply not work. Next thing is the "#" character. In case of using "rgb()" function we don't need it. But imagine creating or modifying a CSS file with tens (or hundreds) of lines with calls to that function - you'll wish you could avoid that. More elegant would be using hexadecimal code - that's where the character "#" comes (of course using pre-defined colour names is the easiest way but then again - you'll be limited by the number of defined colours and will never get above that range).

So, how to use hexadecimal numbers? Is there a way of predicting what colour such a number represents?

Well, at first the hex code for RGB colour definition might not look very convincing. But instead of looking at a hex number like this:

#f48d07

try to see it in this way:

# f4 8d 07

Much easier, isn't it? It takes some time to get used to looking at the hex code in this way, but after a while it will turn out as a faster and more convenient method. Always group the values in pairs and remember they're in an RGB sequence.

Next thing is the hexadecimal system. Since the computer works using the binary system and as we mentioned before it uses bytes for storing any information, we have to remember that each value in the RGB sequence is represented by a byte, and therefore will be described by a number from 0 to 255 (256 different values). We should notice here, that 256 is equal to 16², which makes it possible to represent 1 byte by 2 digits using hexadecimal system. The only problem is our limited range of digits. And so to represent anything above 9 (the highest digit in our decimal system) we use letters ("a" to "f"). In that way hex number "a" will be equal to decimal "10", hex "10" will be equal to decimal "16" (1 * 16 + 0), hex "13" will be equal to "19" (1 * 16 + 3) and hex "ff" will equal 255 (15 * 16 + 15). Two digits, 256 different values - that's all we need to keep our information about colours in a well-organized, effective manner.

How to use it

In fact we don't really have to compute the decimal value from our hex code (or vice versa). It will be enough to remember, that "f" is the highest possible value, and so "7" or "8" will be somewhere in the middle (like "5" and "6" compared to "10"). This is enough to define (or predict) colour by its hex code. Look at this:

# 00 88 00

Nothing red ("00"), nothing blue ("00"), only some medium-high value ("88") for green. We can expect green colour, not too bright, yet not very dark. Something in the middle. In fact it will look like _this_

Let's try tweaking the other values. As we remember, white colour is mix of all colours. The highest value ("ff") assigned to all of them will give us white. On the other hand, black is nothing else than "00" for red, green and blue. There must be gray somewhere in the middle:

# 88 88 88

In fact, _this_ is gray.

That was easy, wasn't it. OK, but how about Yellow? Let's see where yellow colour can be found in the rainbow (it really works). It's somewhere between red and green, isn't it? Let's experiment with red and green so:

# ff ff 00

Here it is, _this_ colour is real yellow.

In that way we can find Cyan (mix of green and blue) and Magenta (red and blue, just look at the rainbow and imagine the colours keep changing forever from red to blue again and again).

Another example: what is orange colour? We could find it between red and green, but much closer to red. That means, the red value for orange will be higher than its green value. Let's try it:

# ff bb 00

In fact, _this_ is orange.

But what would happen, if we tried to change the third value? Remember that going up towards "ff" for all of them will bring us to white. So, we can expect that it will turn out still kind of orange, but a bit pale (since going towards white):

# ff dd 77

And _this_ is a paler shade of orange. In this way we know how to make a colour look pale - just increase two lower values making them closer to "ff ff ff" which is white.

The last example: Brown colour is nothing else than some reddish orange brought down towards zero. Let's see:

# 88 55 00

_This_is_ how brown colour looks in hex.

The long and short format of the hex code

Now you can fine-tune the colours on your website (make it a bit paler, a bit darker, a bit greenish etc). Use the full range of hex values (like: #fdb107) to define them more precisely. Or use the short form of hex code: #fb0 (which equals #ffbb00). It works in the same way, only your range is limited to 16 * 16 * 16 = 16³ = 4.096 colours. Still quite a number, isn't it?

Tip for using web-safe colours

If you want to use so-called web-safe colours, don't use digits other than these six: 0, 3, 6, 9, c and f. The combinations of these digits will give you the 216 (= 6³) colours table, used as a standard in web design. They should always turn out right (in fact sometimes some of them don't) on every system in any browser used. You can put them either in short (#c06) or long format (#cc0066), however, the long format will be limited only to values with doubled digits (00, 33, 66, 99, cc and ff).

That's it. If you want to play some more with the hex code and colours, you'll find a proper tool on the next page. Enjoy the colours on your website!

[Next Page]