Colour Codes

Web Design Software Colour Pickers

There are several ways to specify colour in HTML documents, the easiest to use and understand are Hexadecimal Notation and Colour Names, although your web design software will usually offer a pallet of the standard colours for you to simply choose from.

  • Remember that the type of monitor and how the colour, contrast and brightness controls are set up will affect what the colours actually look like, so it is not essential to exactly match colours on your web site with colours used on your printed documentation or products, etc.

Hexadecimal Notation

Hexadecimal notation counts in "base 16". Unlike conventional decimal counting that uses ten characters to represent numbers, hexadecimal has sixteen characters. As there are only ten normal numerals hexadecimal counting uses letters to represent the extra digits, so hexadecimal counts from zero to "F" like this:

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

So in the hex triplet (meaning: three hexadecimal numbers) #00ff00 the three pairs of digits refer to the values of RED, GREEN and BLUE used to make the colour.

#000000

#ff0000

#ffff00

#00ff00

#00ffff

#0000ff

#ff00ff

#ffffff

All the above colours are made up from combinations of 100% red, blue and green, but they are not very interesting. To make more variety you can specify intermediate values of each colour. Some computer screens are only able to display 256 colours so it is best to specify colours in equal steps of intensity using the hexadecimal range 00, 33, 66, 99, cc, ff, this way you can achieve 216 different colour combinations.

#003366

#ff99cc

#ffcc00

#00ff33

#00ffcc

#0099ff

#cc00cc

#cccccc

You can use other hexadecimal values (e.g.: #2abe09) but some older screens (that can only display 256 colours) will have to simulate the colour by using combinations of the pallet available (called dithering) or just substitute a similar colour, so results can be unpredictable on some screens.

Limiting the number of available colours makes it easier to make a selection; with fewer options you will spend less time making comparisons.

Inline formatting:

<font color="#ffcc00">

Cascading Style Sheet formatting:

p { color: #ffcc00 }

This system is simple to understand and universally understood by web browsers. It also allows you to experiment by trying different combinations of the basic colours by just varying their values.

  • There is no hexadecimal colour code for "transparent". If you use a table the page background will be visible through the table unless you specify a background colour or image for the table or individual cells. However if you are using Cascading Style Sheets to format your pages transparent is a valid value for the background-color property, but you will only need to use it to override a previously specified colour.

Colour Names (HTML4 Colour Keywords)

The HTML standards also allow you to specify a small range of colours using "friendly" colour names, they are shown below with their hexadecimal equivalents.

black
#000000

red
#ff0000

yellow
#ffff00

lime
#00ff00

aqua
#00ffff

blue
#0000ff

fuchsia
#ff00ff

white
#ffffff

gray
#808080

maroon
#800000

olive
#808000

green
#008000

teal
#008080

navy
#000080

purple
#800080

silver
#c0c0c0

Inline formatting:

<font color="blue">

Cascading Style Sheet formatting:

p { color: blue }

If you are using CSS there are more CSS Colour Names you can use.

If you're stuck what colours to use, try some of these Colour Schemes.