Colour codes for HTML

Getting Started With Your Website:

For years, we have been told that there are only 216 of the 256 colours that are so-called internet safe. IE: they won’t be altered in some strange way by various browsers. At the bottom of this page is a chart showing the colours that you can be relatively sure will look the same from browser to browser.

Note that the hexadecimal colour code is a six digit number always preceded by # (number sign).

What do the numbers mean? Briefly, they are based on RedGreenBlue. The first two numbers/letters signify how much red is in the colour; the middle two numbers/letters how much green; the last two numbers how much blue. Remember that the colours being mixed are not pigments but light – like the colours cast from a prism – so the traditional pigment colour wheel does not work. (Think of mixing colours with pigments as adding colours and mixing colours with light as subtracting colours.)

This is how the colours mix with light.   red + blue = magenta red + green = yellow green + blue = cyan red + blue + green = white

If all the colours are used fully (signified by the letter "f"), the light becomes white. (Remember when mixing pigment, all colours used fully yields the colour black.) If none of the colours are used (signified by the number "0" zero), there is no light and so it becomes black.

By mixing all the colours (red, blue and green) equally, one gets white, grey or black:

By mixing red and blue equally and eliminating green, one gets a shade of magenta:

By mixing red and green equally and eliminating blue, one gets a shade of yellow:

By mixing blue and green equally and eliminating red, one gets a shade of cyan (turquoise):

See how easy it is to get the primary and secondary colours!

As you experiment with colours, you’ll see that some of them don’t show up well against light or dark backgrounds. Please bear this in mind as you choose colours for your HTML documents.

It is a good idea to specify a background colour similar to the background of your background image if you are using one; occasionally the image does not load.

CSS coding to display a page with black background, white text, green links, yellow visited links, green background/black text hover and focus links and blue active links. (Note that the active spec must be presented last on the list):

body {background:#000000 url('/images/ferns.jpg'); color:#ffffff;}

a, a:link {background:transparent; color:#ccffcc;}
a:visited {background:transparent; color:#ff99cc;}
a:focus, a:hover {background:#ccffcc; color:#000000;}
a:active  {background:transparent; color:#99ccff;}

Here are the colours that you can be relatively sure will look the same from browser to browser.

Often in CSS files, you will see only 3 characters instead of 6 after the number sign for the colour code. This is a shorthand. If the two characters for each of the RGB are identical, one character can be used; for example, #ff00cc will be encoded exactly the same way that #f0c is encoded. (Read more about CSS shorthand Hexadecimal Colors.)

Decimal numbers

           Hexadecimal 00 is equal to decimal   0
           Hexadecimal 33 is equal to decimal  51
           Hexadecimal 66 is equal to decimal 102
           Hexadecimal 99 is equal to decimal 153
           Hexadecimal cc is equal to decimal 204
           Hexadecimal ff is equal to decimal 255

But you will probably want to use hexadecimal colour codes rather than RGB (simply because there are far more pages on the internet about how to use hexadecimal than there are about RGB).

Named Colours

There are also some named colours that deviate from this somewhat restrictive list of 216 colours. They are supported by all major browsers but there is no guarantee that they are supported by all browsers.

Here are a very few examples:

Please read more about named colours at W3Schools HTML Color Names.

For more information about HTML, cascading style sheets and colour, please consult W3Schools Introduction to HTML, W3Schools Introduction to CSS, W3Schools: HTML Colors, HTML Dog: HTML Beginner Tutorial and/or HTML Dog: CSS Beginner Tutorial.