Results per page:

Match: any search words all search words

Page Contents - How to Add Colour to a Web page

Colour Introduction

Hexadecimal Colour System


Safe Colours

Named Colours

Answers to Questions


Colour Systems used for Computer Screens

Question 1

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

1. Red Blue Yellow
2. Red Green Blue

Check your answer

Lesson Introduction - How to Add Colour to a Web page

In this HTML tutorial you will learn that there are different ways to specify which colour to display on your Web page. This can be done by using:

  • Colour Names
  • Hexedecimal Colour System
  • RGB Decimal Colour System System


Colour Names

Although 140 colours can be used by name e.g. black, blue, white etc. the accepted and safer method when writing HTML code, is to use the, either the Hexedecimal Colour System or the Decimal RGB Colour System System which will give you a choice of a few million different colours, of which 216 are regarded as web safe colours.

See Full list of Web Colour Names & Web Safe Colours


Hexedecimal Colour System

The Hexedecimal Colour System uses the intensity of only three colours Red Green & Blue.

Hexedecimal number are base on 16 rather than 10 AS in the decimal system

They are 0 1 2 3 4 5 6 7 8 9 A B C D E F

Hexedecimal - Decimal Conversion Chart

RGB Colour Wheel diagram
Diagram: Colour Wheel

Imagine a Red spotlight, a Green spotlight & a Blue spotlight, all at full intensity in a theatre so that they slightly overlap as shown above.

  • Where they dont overlap you have a red,  green & blue section
  • Where 2 spotlights overlap there lights combine producing another colour
    • Red + Green produces Yellow
    • Green + Blue produces Cyan (almost turquoise)
    • Blue + Red produces Magenta (a lighter purple)
  • Where all three lights overlap white light is produced.
  • If the three spotlights are turned off, #00 (0 decimal) the stage is black

These spotlights can be slowly dimmed in #FF steps (256 decimal steps)

Imagine only the Red spotlight being turned on

  • At full intensity of #FF (255 decimal) the red spot is a bright red
  • As the intensity is reduced say to #8B we get Dark Red, #80 Maroon
  • At a setting of less than #09 there would be very little light displaying being virtually black with a hint of very dark red.
  • #00 is the equivalent as turned off producing Black

Each of the three colours Red Green and Blue, has this range in values #00 to #FF in the Hexedecimal Colour System (0 to 255 in the decimal RGB system), this produces 256 values to each of these colours.

This system is capable of displaying over 16 million colours. (256 x 256 x256)

This concept may be a bit hard to grasp, but if you think of the reverse process when white light is split up into the colours of the rainbow by a prism understanding is easier.

What you need to remember

  • Is that the red, green and blue colour values in the diagram are at the highest value.
  • Lowering any value from #FF / 255 towards 00 will darken that colour and the corresponding overlapped colours. You are reducing the amount of light therefore moving away from white, towards black.
  • Raising any number to #FF (255 decimal) is increasing the amount of light, therefore brightening the affected sections, and moving towards white.



RGB Hex Colour System System



Question 2

How many colours can be represented in the RGB system?

Check your answer


Old Computers

Old Computers may only be able to display 256 colours

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.


Safe Colours

Out of 16.7million 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.

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 Hexedecimal Red Green Blue theory and attempt to place the following safe RGB values

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

to the Samples 1 to 6 below.

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








Check your answers




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.

Let's Add some Colour

How to Change the default Background and Text Colour

Alter the <body> tag as follows:

 <BODY style="background: #CCCCCC;  color="#FF0000;">

This will give you a lightish grey background and coloured text. The colour value for the text is a nice easy one and you should be able to work it out. You can experiment with the Hexadecimal colour values if you like.

Remember that you require the #  and that you each CSS rule with ;


How to Change the colour of a single word.

<p>How to Change the <span style="color: #FF9900;"><strong>colour</strong> </span>of
 a single word.</p>
  • I have also made the word colour Bold by the use of the Strong 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
  • Ensure you use the American spelling of color & not the British spelling colour

Colour Pickers

Most HTML editors have colour pickers built into the software.

Handy Colour Picker

Click within the box below

Click within the Popup Colour Selector holding down the mouse button

The triangle next to the small section on the right controls light colours towards the top, dark colours towards the bottom

Copy and paste the colour code into your web page source code.

Click in the Box: 





Answer 1.

Red Blue Green.

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.

Return to Question 1.


Answer 2.

Just over 16.7 million.
We have 3 primary colours with 256 possible values for each colour. Therefore the calculation is 256^3,
or 256 x 256 x 256


Return to Question 2.


Answer 3.

We have 3 primary colours with 6 possible values for each colour. Therefore the calculation is 6^3,
or 6 x 6 x 6 = 216

Return to Question 3.


Answer 4.









The following, not very scientific, but give some clues on how you can visualise a number as a colour.

No 1. #990000
Only Red of the RGB numbers has a non zero value, FF would be a bright red, so 99 a must be a darker red.

No 2 #66FFF
Two numbers are FF, Green & blue which produces Cyan. The third value is 66 a middish range in the Red band. This will push the colour turquoise towards white, therefore resulting in a bright and light turquoise.

No. 3 #999999
If all three numbers are the same then the colour must be white #FFFFFF, black #000000 or a shade of grey. #999999 is almost midrange there fore results in a mid grey

No 4. #006633
A darkish green, lightened with a touch of blue.

No 5. #9933FF
Probably the hardest to guess, but blue and red, results in magenta, lightened up more with green giving a brightish magenta.

No 6. #FFFF99
Red and green give yellow, adding some blue lightens it.

Return to Question 4.