Freespace >> Design a website >> Adding colour

Adding colour


HTML (Hypertext Markup Language) is the language used to write pages for the World Wide Web. Basic HTML is surprisingly easy to learn, easier than a human language. We will start with the basic structure that every HTML page follows.

Background colour

The HTML pages you have written so far are probably black and white, with perhaps a blue link that you have written with the 'anchor tag'. (See Linking to other pages and sites.) It is very easy to change all this. You can have a coloured background, differently coloured text and links of yet another colour.

If you want to change the background colour of a page, you need to add the instruction to the <Body> tag, which will be close to the beginning of your page. As an example, if you wanted the background colour of your page to be pale blue, you would write:
<Body BGcolor="#99CCFF">

This command would give your page a light blue background. You might be wondering why "light blue" is written "#99CCFF". Colours are written in this way so that all computers can produce standard colours, because what is "red" to one computer might not be "red" to another. Each six digit number and letter combination explains the amount of red, green and blue (RGB) in a single colour. The first two digits describe the amount of red, the second two the amount of green, and the last two the amount of blue. This kind of number is called a "hexadecimal figure". Don't worry about how complicated this sounds, you will probably never need to convert colours into hexadecimal figures.

Take note here that whenever you write the word "colour" as part of an HTML command, it is ALWAYS spelt the American way, "color".

Where can I get colours from?

There are a few different places you can look for the numbers of colours written in hexadecimal figures if you want to avoid working it out for yourself.
  1. If you see a colour you like on someone else's page, why not view their source code and make a note of the number of the colour they've used.
  2. HTML editors are programs that make writing HTML easier. Two good programs are Macromedia Homesite (trial version available from www.macromedia.com) and Hotdog (trial version available from www.sausage.com). These programs both do the colour coding for you when you select from their chosen palette.
  3. There is a list of a few colours and their corresponding number descriptions at the end of this section. You could print this page out and use it as a reference to start you off.


Converting decimal numbers to hexadecimal numbers

If you are determined to do it the hard way, and learn how to convert from decimal numbers to hexadecimal numbers, you can get the Windows 95 Calculator to do it for you. On the Macintosh, you can use the HTML Picker, which is part of MacOS 8 and can be accessed from wherever you need to pick a custom colour (eg. the Appearance Control Panel).

NB On a Macintosh computer, you can get the "#" character by holding down the Option key and pressing "3".

Changing the colour of the text and links

If you want to change the colour of your text, you need to use the same number descriptions as you used for the background colour. All you do is open the <FONT> tag, and write your colour in. So for example, if you wanted purple text, you would write:
<FONT COLOR="#CC33FF">

If you want to change the colour of your links, for example to green, you would need to write this command:
<LINK="#00FF00">

If you want to distinguish between links that have been clicked through to, you would add the <VLINK> command. 'VLINK' stands for visited link. <ALINK> stands for active link, and you use it in the same way.

Handy Colour Codes

Every colour you might need is listed below in text form with its corresponding RGB hexadecimal figure. Have fun!
Black is:#000000
Red is: #FF0000
Green is: #00FF00
Cyan is: #0000FF
Purple is: #CC33FF
Light Blue is: #99CCFF
Dark Blue is: #330099
Pink is: #FFCCFF
Bright Yellow is: #FFFF33
Light Brown is: #CCCC99
Chestnut is: #CC9933
Bright Green is: #00FF66
Freespace >> Design a website >> Adding colour