5HTML and CSS: the basics

In CSS colours are specified in RGB (red, green, blue) format. This gives the amount of each of the three colours as a number between 0 and 255 (#00 and #FF in hex, and in CSS, colours without transparency are always given in hex).

Figure 5.20   RGB colour notation

Hexadecimal number use a numerical base of 16 for writing numbers, we normally use base 10 which gives us all the digits from 0 to 9 in our numbers. With base 10 numbers (decimal) each column is 10 times the previous column, like this:

So the number 245 in decimal is:

Hexadecimal numbers use base 16 so each column is 16 times the previous. The problem with this is that we need 16 numbers for each column and we only have 10 (0-9). We get the other 6 by using the letters a-f:

So, the hexadecimal number 1CE is the equivalent of:

or:

I.e. the hexadecimal number 1CE is the equivalent to the decimal number 462.

With CSS hexadecimal numbers are prefixed with #, in the above example it would be #1CE.

A two digit hexadecimal number ranges from #00 to #FF and it represents any decimal value between 0 and 255:

The only colours used so far in our website are the colour green (used for the h1 headings) and the colour red (for h2 headings). These were actually specified with the words ‘green’ and ‘red’, other colours could also be used, ‘blue’ for example. In fact there are 147 of these predefined colours with names like darkgoldenrod (brown), saddlebrown (brown) sienna (brown), oh and brown (brown).

In practice, no one ever uses these colours; colours are always given as a six digit hexadecimal number; the line in our code:

    color: green; 

Should more properly be written as:

    color: #008000;  

(the colour ‘green’ has the RGB value #008000, i.e. no red, 50% green and no blue).

CSS can also apply transparency to a colour (this is a new feature of CSS 3) and this is done by specifying the colour in rgba format as follows:

    color: rgba(0, 128, 0, 0.75); 

Here, the colour is given in decimal RGB, with each value separated by a comma. The last number specifies the transparency (more accurately, the opacity). This is specified as a number between 0.00 and 1.00, a value of 1 gives a completely solid colour, a value of 0 a completely transparent colour (if a colour is completely transparent then the actual colour value is irrelevant, it won’t be seen anyway).

Representing the #008000 green colour in the rgba format gives rgba(0, 128, 0, 1.0).

Some colours can be represented with just three hexadecimal digits; it’s a kind of shorthand and it happens when the two digits in each of the three hexadecimal components is the same. Its best explained with an example:

The standard hexadecimal colour #ee1133 has the short hand #e13. Similarly, white #ffffff has the shorthand #fff.

This shorthand notation is quite commonly used in CSS.

• In CSS the letters in a hexadecimal number (a-f) are always given in lowercase, its #ffffff not #FFFFFF; this is just a convention, CSS doesn’t care which you use—but use lowercase anyway.

Brackets has a quick edit facility for selecting and changing colours (see § 6.10.3).