Lesson Introduction - Add Colour to a Web page

In this HTML lesson you will learn that although 10 colours can be used by name e.g. black, blue, white etc. the accepted and safer method is to use the RGB colour system when writing HTML code, which gives you a choice of a few million different colours, of which only 216 are regarded as safe colours. In this HTML tutorial you will learn how to add colour to your Web page to brighten it up, and the safe colours it is better to use to avoid dithering.

John McGuinn

RGB Colour System

Question 1

Which of the following answer is correct, when using light the three primary colours are

1. Red Blue Yellow
2. Red Blue Green

Check your answer

If you did not take physics at school you may remember from art classes that when mixing paints the three primary colours are Red Blue Yellow.

However when using light such as on a computer monitor, TV screen or theatre lighting the three primary colours are Red Blue and Green. Hence the term RGB.

Question 2 How many colours can be represented in the RGB system?

Check your answer

The settings of your computer, your type of monitor and video adapter determine the maximum number of colours that can be displayed. If a colour can not be represented then the nearest available colour will be used. How this can be done is described in the next section.

Dithering

Depending on the computer system being used and how it is set up will depend on how many colours can be displayed. If the computer is set to 256 colours then only 256 colours can be displayed. The computer may try to simulate additional colours by dithering. This is a process where different colours are displayed on adjacent pixels in a chess board pattern. If we coloured the chess board with black and white squares then reduce the size of the board so that each square consists of a single pixel, then because the pixels are very small, this check board pattern gives the impression of a medium grey. Looking very closely at screen the pattern can be seen. Looking normally the eye blends the pattern into, in this case medium grey. This does not look as pleasing as a screen that displays all the pixels as medium grey.

A different pattern could have say 2 black pixels to every white one, producing the effect of a darker grey.

This patterning is very similar to how a TV screen works. Look at the screen through a reversed pair of binoculars with the eye piece held against the screen to see the individual red green and blue sectors. Look at a white area of the screen for the best effect where all 3 colours are at there brightest.

Most modern computers, with there improved memory, and hardware, can usually display in 32 bit true color, that does not require dithering.

Safe Colours

Out of 16.7 possible colours, there is a list of only 216 web safe colours that should give the same true colour on PCs and almost the same colour on Macs.

Starting at 0 the values are increased by 51 denary to 255. You may wonder why a strange number like 51 is used. If you calculate it out then 51 is 20% of 255.

Converting 51 denary, to hexadecimal you get 33 hex, so the values are increased from 00 by 33 hexadecimal to FF). Learn more about hexadecimal numbers

This allows combinations of the following hexadecimal numbers.

00, 33, 66, 99, CC, FF.

Safe Colour Chart. This very neat chart has been produced by Jim Taylor, another student in the same Tutor Group of the Open University as myself.

Question 3 From this list of 6 allowable numbers, how do we work out the total number of web save colours?

Check your answer

If you do not want strange colours or dithered colour patterns stick to these safe colours for your web page, text, background and graphic colours.

Question 4. Test you grasp of the RGB theory and attempt to place the following safe RGB values

#006633, #66FFFF, #FFFF99, #990000, #999999, #9933FF

to the Samples 1 to 6. The colours are sufficiently different for you to do this accurately. Looking at the Colour Wheel diagram should help.

Named Colours

The use of stipulating colours by name is not supported by the W3C standards. There fore to write correct HTML you should use the RGB Colour Hex values.
Please note

• Using named colours could result in unexpected results in some browsers.
• That the majority of named colours are NOT web safe colours.
• The names given to named colours may not be as expected. In named colours the the colour #00FF00 that I have called green is actually named as lime.
• In named colours a darker green with the value #008000 is actually named as green.

Named Safe Colours

Black, blue, cyan, magenta, red, white, yellow.

Let's Add some Colour

How to Change the default Background and Text Colour

Alter the <BODY> tag as follows:

 <BODY bgcolor="#CCCCCC"  text="#FF0000">

How to Change the colour of a single word.

 Change the <FONT color="#FF9900"><B>colour</B> </FONT>of a single word.

• This example is using the FONT element that is now deprecated.
• I have also made the word colour Bold by the use of the B element
• You can include several words or even paragraphs instead of the single word colour used in this example.
• Try to do this now
• Don't forget to use the American spelling for color