Drew's Web Design Site: Colours

The introductory page on styles, and the lecture, illustrated the idea of applying styles in two main ways: through applying typefaces or fonts, and second by applying colours to the text or the background of the screen. I said that I would not go into detail in the lecture about how fonts or colours worked; that is the job of these teaching materials. Fonts have a page to themselves, although you should first read the page which covers some more general information about the handling of text. Colours are dealt with on this page.

The proper way to define colours on a web page is by defining what is known as an RGB code. As you'll see on the colour chart, these codes are all six characters long and preceded by a hashmark character (#). This character can usually be found near the Enter key, to the right side of the keyboard. (Some browsers allow you to get away with missing off the #. However making this mistake can stop your page working in other browsers so you should always remember to include it.) The characters in the codes are all digits (0-9), or the letters a-f. What does this all mean?

The first two define the amount of red in the colour:	... the middle two define the amount of green:	... and the final two the amount of blue.

Each part of the code takes a value of between 0 and 255. 0 is the complete absence of the colour and 255 complete saturation. Because we are talking about light here, and not paint, the colours are additive rather than subtractive. Mixing all the colours gives you white, not black (or muddy brown) as with paint.

However, there is another complication. These are not decimal values: decimal being the base 10 counting system we use everyday. Instead they are hexadecimal (or "hex"). This counts in base 16. When you add 1 to 9 in the decimal system, the units column fills up and we overspill to the tens, giving us 10. But the units column in hex can take more than 9. We use the letters a-f to represent the "digits" 10-15. Adding 1 to f now fills up the column, so we get 10 in hex; which equals 16 in base 10. Here are some other equivalents:

Decimal	Hex	Decimal	Hex
12	c	100	64
20	14	153	99
31	1f	154	A0
50	32	200	c8
75	4b	255	ff

Colours are recorded in this way because 255 is the largest number that can be stored in one byte (a unit of computer memory which corresponds to eight bits: a bit is the digit 0 or 1). 255 is 2 to the power 8, minus 1, or 11111111 in the binary system.

All this may seem rather confusing and to tell the truth it is not something you should worry too much about. It is often sufficient just to learn the codes of a few important colours, and tweak them from there. Have a look at the colour chart if you haven't already done so, and see how the colours are put together, particularly simpler codes like yellow (#ffff00) or the various shades of gray (if all three codes are the same value, e.g. #c0c0c0, the colour comes out as a monochrome shade).

All the colours on the colour chart can also be defined by the name shown alongside them. So the RGB code "#ffff00" and the name "yellow" are identical. When you see a name like "lightseagreen" do note that you need to type it just like that, with no spaces. There are only about 140 defined names, though, whereas there are over 16,777,000 possible RGB colours! (The exact number is 256³, or 256 × 256 × 256.)

Let's just recap how to apply all this knowledge. If you remember, in the lecture we defined the <p> tags on the page Blue.html to appear in blue text instead of the black of the browser default. The code for that particular blue was #00008b (remember the order: red - green - blue). The style sheet property which defines the colour of text is color (remember to use the American spelling). Therefore the style sheet definition we created in cool.css - the style sheet used for the blue page - looked like this (the text size and font family have been removed for clarity):

And the background colour which we defined for the <body> tag was a pale beige. And that's what you do - pick your colours, and define them wherever necessary: usually the style sheet, but sometimes style attributes. Or, you rely on the browser default. It's the same with any aspect of style.

It is, of course, important that you define a readable combination of colours. Please think through and test out the colour combinations you use. Blue background, dark green text, orange links; these might all sound fine on their own, but follow this link for a blindness-inducing combination of all three. Bright backgrounds are, generally, a bad idea; black backgrounds and white or yellow text tend to appeal to Slipknot fans but to be honest aren't that great either. Be subtle, rather than bold. If you want bright colours on your page, do it with images. The best thing to aim for is a good contrast between the colour of text and the background colour. And also be aware that there are colour-blind people out there (some 10% of all men - and that's not a sexist comment, colour blindness is very rare in women) who struggle to distinguish red from green. Having green main text and red links is not a helpful combination for these people and once again, means your site will be difficult or impossible to use for a substantial number of visitors.

appendix: web-safe colours

Some very old monitors cannot render all 16.78 million colours; even newer monitors may, for some reason, have problems (usually this is due to the settings in the Control Panel of Windows rather than the monitor, but this is a moot point). To respond to this limitation, there is a subset of the complete range of colours known as the web pallette. This is a set of 216 colours which are made up only of combinations of the following hexadecimal digits:

Therefore, #cc6699 is a web-safe colour (it's a kind of dusty pink), so is #00ff33 (a bright green).

If an older monitor tries to view a non-web-safe colour one of two things may happen. Either the monitor will try and "dither" the colour; that is, approximate it by "speckling" together two colours it can handle. Often this looks OK. Sometimes it looks awful. Or, the computer might simply shift the specified colour to the nearest web-safe colour. Again this is usually not a problem, but it can occasionally lead to drastic changes: and if text and background are both non-web-safe, you might find them shifting to a hard-to-read combination, where on newer monitors, it was perfectly clear.

It used to be the case that designers of a web page were recommended only to use web-safe colours. You may also notice that if you use Dreamweaver, the colour palette only offers web-safe colours in the first instance. However the great majority of computers are now set up to show the complete pallette, which is why I've mentioned this only as an appendix. However, it is worth, as part of the development process for your site, having a look at how it appears when you reset your monitor to show only 256 colours. (Go to the Windows Control Panel and choose "Display" to do this.) If it looks awful, find a close web-safe colour (particularly for page backgrounds) and you will be fine.

Web Design

colours

main menus

help pages

appendix: web-safe colours