Specifying colours

Sixteen colour names are standardised in CSS, and may be referred to by name. These are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

The two main style types for colour are: 'color' and 'background-color'. Note the spelling of 'color' and 'gray' within the CSS files.

However, most browsers are capable of displaying a large range of colours.

To access other colours you must specify the colour as a mixture of red, green and blue values, each in the range 0 to 255 (or hexadecimal #00 to #ff). To specify a colour in hexadecimal simply supply the three colour values prefixed by the # character. e.g. #0033CC is a mixture of #00 red, #33 green and #cc blue or #0033CC

    color: #0033CC;
    background-color: White;

results in the following effect:

This is an h1 element with color #0033CC

To use decimal notation (0 to 255) or percentages (0% to 100%) we need to use the syntax: rgb(redvalue, greenvalue, bluevalue)

for example: rgb(85,190,255) is a mixture of 85 red, 190 green and 255 blue, or rgb(85,190,255)

    color: rgb(85,190,255);
    background-color: Black;

results in the following effect:

This is an h2 element with color rgb(85,190,255)

There is a recommendation that for basic colour work you should restrict yourself to what is referred to as the 'web safe palette' of 216 colours. This is guaranteed to work on all graphical colour browsers. Follow this link to see the web safe colour palette.

Golden rule of Colour

Do not set background colour or foreground colour alone. Use them in combination, and make sure the combination is legible. Reason: If you only set foreground colour, this may not work well with the default browser setting for background colour, as a user could have changed this to a value which makes the text illegible.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera