You may have learned in Science at school that when different colours of light are projected onto a white background, they produce new and different colours. When red, green and blue are all present together, we get white light. When no light is present, we get black, which is the absence of colour.

In fact, any colour of light can be created by mixing differing amounts of red, green and blue light. For example, the colour orange is achieved by mixing mostly red light, with a lot of green light, and no blue light. The stronger the brightness of red, green and blue light, the closer we get to pure white light. And the weaker the brightness, the closer we get to pure black.

This gives us a system for describing any colour – all we do is specify the relative amounts of red, green and blue light present in that colour. We can use this system for specifying our colour values in CSS.

**Hexadecimal **In CSS, we use a two-digit

*hexadecimal*code to specify the values of red, green and blue light present in a colour. To understand what hexadecimal is, we’ll take a brief detour

into Mathematics…

In our standard system of numbers, we have 10 different number units:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9.

This number system is called *Base 10*, or *Decimal*.

In decimal, 9 is the highest number in the sequence. If we add 1 to 9, we get 10.

It is possible to use a 6 further number units, to get the number sequence:

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

Because there are now 16 number units, this is called *Base 16*, or *Hexadecimal*.

In hexadecimal, we count from 0 to F. The highest number in the sequence is F, which equals 15 in decimal.

If we add 1 to F (which would be 16 in decimal), we get 10. The sequence then goes:

10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F.

The highest number we can express in two digits is FF, which is 255 in decimal. If we include the number 0, that means we can express 256 possible values with a two-digit

hexadecimal number. In CSS, we can use these two-digit hexadecimal numbers to specify 256 different amounts of red, green or blue light present in a colour.

**Writing Hexadecimal Colour Codes in CSS**

So, finally we get back to the CSS…

This is how we use the two-digit hexadecimal values to specify a colour’s Red, Green and Blue (RGB) values:

h1 { color:#036090; }

We use the # hash character to mark the beginning of our hexadecimal code. The first two digits (03 in this case) give the value of Red. The second two digits (60 in this case) give the Green value. And the last two digits (90 in this case) give the Blue value. We can use this system for writing colour values for other CSS properties, such as

background-color and border-color:

body { background-color:#FFD306; }

p { border-color:#3498F3; }

**6-Digit and 3-Digit RGB Values**

The RGB value #336699 is 6 digits long. There is a way to write some 6 digit RGB values as 3 digit values:

If both digits in a two-digit pair are identical to each other, e.g. 00, 11, 44 and EE, then we can express that number in just one digit, e.g. 0, 1, 4 and E.

If the Red, Green and Blue values are all two-digit identical pairs, then we can write each two-digit pair as just one digit. This reduces the RGB value to 3 digits: one for Red, one for Green and one for Blue.

For example, we could write the 6-digit RGB value #336699 as a 3-digit value #369.

In CSS, you can write your colour values in 6 digits or 3 digits -whichever you wish.