Colours
In this section, we will look at the numerous methods available for specifying colours [spec 6.3]
By name
The specification suggests sixteen colour names, taken from the MS Windows VGA palette:
| Name | Example | Name | Example | Name | Example | Name | Example |
|---|---|---|---|---|---|---|---|
| aqua | black | blue | fuchsia | ||||
| gray | green | lime | maroon | ||||
| navy | olive | purple | red | ||||
| silver | teal | white | yellow |
These names are just suggestions, and browsers may implement any names they please, and map them to any colour they want. This makes using named colours a little unsafe, as you don’t know exactly how they will be implemented, if at all.
By RGB values
Read my page about images and RGB values first. Finished? OK. CSS allows you to specify colour using a three-number syntax, expressing the mix of red, green and blue in the colour, each with a range of 0 to 255.
p.classname { color: rgb(0,127,255); }
This colour has no red, half-intensity green and full-intensity blue. It looks like royal blue. You will get used to visualizing colours from their RGB values, but you can always play with the palettes in an image editing package to get the numbers. Even the venerable Windows Paint application will give you the values: double-click on a palette colour and select “Custom Colors”. Ignore the Hue, Saturation and Value figures.
You can also use percentage figures instead of the 0–255 range. The example above could (nearly: 127 is not exactly 50% of 255) also be expressed as:
p.classname { color: rgb(0%, 50%, 100%); }
By hexadecimal code
A shorter way to write the codes is by converting each of the numbers to hexadecimal. As 255 is the hex “equivalent” of 99 (that is, the largest two-digit number), the hex range is from 0 to FF. CSS accepts hex colour codes as a six-hex-digit string preceded by a hash sign:
.classname { color: #007fff; }
This is the same colour as above: 0 becomes 00, 127 is 7F and 255 is FF. The Windows calculator (in Scientific mode) will convert decimal to hex for you.
To shorten this even more, hex codes that are made up of three numbers each containing the same two digits may be abbreviated thus:
.classname { color: #e93; } /* short for #ee9933 */
This is a special exception for codes of the form #xxyyzz, and cannot be used unless all three hex values are made up of repeated digits. #e93 is a rich orange colour.