CSS 2.1 Colours
Colours in in CSS 2.1 are defined as a combination of red, green and blue light. Each of the 3 primary colours is given a numeric value from zero to 255, the higher the value the greater the amount of that primary colour in the finished colour.
This value is known as an RGB value - RGB from the initial letters of Red, Green and Blue and this can be written either in either the decimal(0 to 9) or hexadecimal(base 16 - from 0 to F) numbering system. The table below shows the three primary colours with their Decimal and Hex values and the resulting colour displayed.
| Colour name | RGB value | Hex value | Resulting colour |
|---|---|---|---|
| Red | 255,0,0 | #FF0000 | |
| Green | 0,255,0 | #00FF00 | |
| Blue | 0,0,255 | #0000FF |
Hex Format
The hexadecimal format is a '#' followed by either 3 or 6 digits. i.e. #FF0 or #FFFF00 - they both represent the same colour. In the three digit format the first digit is the red value, the second is green and the third is the blue value. In the six digit format the first pair represents red, the second green and the final pair give you the blue value.
rgb format
Additionally colours can be set using the 'rgb' notation with the letters 'rgb' followed by brackets containing three different values for each colour using either three numbers from 0 to 255 or three percentages i.e. rgb(255,51,102) or rgb(100%,20%,40%).
Colour names
In CSS 2.1 there are also 16 colour names which are universally supported and can be used in place of RGB values. The following table lists these colours with their hex and rgb values.
| Colour displayed | Colour name | Decimal rgb value | Hex rgb value | Colour displayed |
|---|---|---|---|---|
| aqua | 0,255,255 | #00FFFF | ||
| black | 0,0,0 | #000000 | ||
| blue | 0,0,255 | #0000FF | ||
| fuschia | 255,0,255 | #FF00FF | ||
| gray | 128,128,128 | #808080 | ||
| green | 0,128,0 | #008000 | ||
| lime | 0,255,0 | #00FF00 | ||
| maroon | 128,0,0 | #800000 | ||
| navy | 0,0,128 | #000080 | ||
| olive | 128,128,0 | #808000 | ||
| purple | 128,0,128 | #800080 | ||
| red | 255,0,0 | #FF0000 | ||
| silver | 192,192,192 | #C0C0C0 | ||
| teal | 0,128,128 | #008080 | ||
| white | 255,255,255 | #FFFFFF | ||
| yellow | 255,255,0 | #FFFF00 |
Coding colours
So including colour name there are five different notations you can use to apply the same red background colour to a <div> element:
div{background-color: #FF0000;}
div{background-color: #F00;}
div{background-color: rgb(255,0,0);}
div{background-color: rgb(100%,0%,0%);}
div{background-color: red;}