CSS Color

Color is the American spelling, and colour is British. In CSS you must use American spelling.

This tutorial will cover how colour is defined in CSS. As this is quite technical, it is highly recommended that you do read it.


In CSS you specify the value of colour using hexadecimal or RGB; the majority of the time you are likely to be using hexadecimal. There are three colours, red, green and blue (RGB), and together these colours can generate around 16 million different colours.

When you specify a colour using hexadecimal you use the # symbol first followed by the colour code. The colour code can be a maximum of 6 characters long, like this:


Hexadecimal uses 16 symbols (base 16 numbering) to represent the colours. It uses the numbers 0 – 9 and letters A – F (A- F represents numbers 10 – 15). In the above example there are 6 characters (excluding the #).


  • The first two characters (26) represent RED
  • The second two characters (FF) represent GREEN
  • The last two (A8) represent BLUE

Just remember that if your colour value includes letters after F or is over 6 digits (excluding the #) then it’s an incorrect colour value.


Using the terms red, green and blue is another way to specify CSS colour, like this:

color: rgb(red, green, blue)

You specify the amount of red, green and blue, and the numbers go from 0 – 255. If you go above 255 then you have made an error, as that is not a valid colour.

Colour name

HTML has 16 different colour names you can specify instead of the hexadecimal value or RGB. For a list see this Wikipedia article.

Lastly, here are a few tips:

  1. Make sure that your chosen colour blends in nicely with the background
  2. If you use a background image, make sure that the text colour blends in, in case the device does not support images
  3. Make sure the colour is suitable or readable for colour-blind users