3.1 Colours
All of the colours of the spectrum are made up from mixing the primary colours of Red, Green and Blue in varying amounts, hence the term RGB colours used in computing. In HTML and CSS, colours are specified by using the # symbol followed by six digits or letters that represent 3 pairs of hexadecimal numbers. The first 2 numbers are for the intensity of Red, the next 2 are for the intensity of Green, and the last 2 are for the intensity of Blue like so: #000000.
Using this logic, Hex 00 is the least intense (value 0) and Hex FF is the most intense (value 255). And by combining these colour intensities, more than 16 million different colours can be produced (256 x 256 x 256 = 16,777216). Some of the basic colours and how they are composed are illustrated below:
| Colour | Rendering | Hex Code | Description |
|---|---|---|---|
| White | #ffffff | Full intensity all colours | |
| Black | #000000 | Least intensity all colours | |
| Red | #ff0000 | Full intensity red only | |
| Blue | #0000ff | Full intensity blue only | |
| Green | #00ff00 | Full intensity green only | |
| Yellow | #ffff00 | Full intensity red and green only |
Web Safe Colours
Not too many years ago, a lot of monitors were limited in the colours they could mix, and so a standard palette of 216 web safe colours was introduced. These days most modern monitors can display several millions of colours and so we aren't limited to these any more (but they can still be useful if you wish to make sure everyone sees your site as your monitor does). There are millions of HEX codes to choose from but the English names can be used for about 150 of the more common colours, like those shown in the table above. As we saw earlier in the section on attributes, the style attribute can be used to specify foreground and background colours for elements. For example:
<h3 style="color:#0000ff;background-color:#ffff00;">A styled heading</h3>
This would turn the contents of the <h3> tags blue with a yellow background like below:
A styled heading
Hexadecimal representation
Whereas the binary system (base 2) is based on 2 numbers (0 and 1), and the decimal system (base 10) is based on 10 numbers (0-9), the Hexadecimal system (base 16) is based on 16 numbers, as shown below:
| Decimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Hex | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Converting decimal numbers to hexadecimal is accomplished by dividing by 16 and multiplying the remainder by 16. Try the number 188 (decimal) for example:
| Division | Result | Remainder x 16 | Remainder (in hex) |
|---|---|---|---|
| 188/16 | 11 | 0.75x16 =12 | C (12 decimal) |
| 11/16 | 0 | 0.68x16=11 | B (11 decimal) |
| Answer | BC |
Therefore 188 decimal is BC in hexadecimal. Confused? Don't worry, you don't actually need to understand hexadecimal to write web pages or to specify colours. Most image-editing software comes with colour mixing palettes that "spit out" the values of hex colour codes. In addition, there are many sites where these codes can be obtained or you can try this handy colour convertor.
As we mentioned earlier, attributes such as colours are now normally specified as CSS properties rather than attributes, and preferably in a separate file rather than by specifying them inline with the HTML. This saves a lot of work and results in lighter web pages that load faster. However, it is still useful to understand these methods before progressing to using CSS properties.