intro | design software | page elements | site structure | measurements | fonts | images | colours | layout | tables | templates

the studyzone | web design | course tasks: 1 | 2 | 3

the basic principles

colours

or should I say colors ?!

Yes, I'm afraid the web uses US English so you'll see reference to color in code and on most application menus.

page background

The default page background is white. You can change this in Dreamweaver using Modify>Page properties. There you can choose a colour or an image. If you use a dark background then text may be difficult to see unless you also change the default text colours too.

Background images need to be chosen with care as they will tile, or be repeated to fill someone's screen. So a small image will be repeated lots of times and a large one may or may not be repeated or be displayed in full. Ideally, until you have learned some advanced techniques for controlling how images are repeated or positioned, only use solid background colours or images specifically designed to tile properly (i.e. repeat without the joins showing).

default text / link colours

The default colour for text is black. Links in text will appear blue. Links that have been visited will appear purple and active links (seldom noticed) are red. These are unlikely to suit your colour scheme and can be changed using Modify>Page Properties in Dreamweaver. Remember that if you have a blue or purple background, links will be virtually invisible if you do not change the defaults!

In the old days, monitors may only have been able to display a limited range of colours and there were 256 for Windows and 216 for Mac software. These are called web-safe colors. Use these and there's a pretty good chance that users will see the comparative colors as you intend.

I say comparative because it is simply the case that everyone seems to have a different setting these days - some bright and clear, others less so. Different monitor or screen brands present colours slightly diffrently and, of course, people can adjust them too! So even careful use of the web-safe palette may lead to some surprising displays when you see your site on someone else's screen.

These days most of your viewers will have monitors that can display millions of colours and I don't think you need to worry. Use whatever colours or colors you want.

Color names

There are sixteen color names that browsers will recognise and which will be approved by an HTML or CSS validator. These are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If such approval is important (e.g. you are designing for an organisation whose brief specifies that your site must comply with these international standards) then you should use the code for any other colour.

If validation isn't vital then there are a further 131 colour names you can use. Some designers like to use names if they can't visualise the shade represented by a color code. You can see the list of all 147 at this link.

Color codes

In most design applications you can choose a colour from a palette and the software will insert to corresponding code for you. Occasionally, though, you may wish or prefer to use the codes directly.

Web color codes use the hexadecimal notation to specify the combination of red, green and blue. There are six characters preceded by #. Each pair relates to each of red, green and blue in that order.

The minimum value is 00. The maximum value is FF.

So #FF0000 is red, #00FF00 is green and #0000FF is blue.

#00000 is black and #FFFFFF is white.

A useful application to help identify the hex code for a colour is available free at this link.