5
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).
RGB and primary colours |
---|
Why RGB I hear you ask, we all grew up with the primary colours red, yellow and blue (RYB) and mixing blue and yellow paint gives green paint. The reason is that computer monitors emit certain colours of light as opposed to paint which reflects or absorbs certain colours. The former is referred to as additive (each component is added to the previous), reflected light is subtractive (each component being subtracted from the previous). This is why the central section in RGB is white (all the colours added together), the equivalent section in RYB would be black (all the colours subtracted from each other). Appendix xxx gives a more complete description of this process and some explanation of colour theory. |
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:
100s | 10s | 1s | Base 10 (decimal) | ||
---|---|---|---|---|---|
2 | 4 | 5 | |||
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:
Hexadecimal digit | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | |
Numerical value | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | |
So, the hexadecimal number 1CE is the equivalent of:
256s | 16s | 1s | Base 16 (hexadecimal) | ||
---|---|---|---|---|---|
1 | C | E | |||
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).
RGBA |
---|
The ‘A’ in rgba stands for alpha which apparently is code for opacity |
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.
Brackets has a quick edit facility for selecting and changing colours (see § 6.10.3).