CSS tutorial - Colours and measurements


Skip navigation.

Site search

Site navigation

CSS tutorial


Other tutorials

Colours and measurements


Many styles accept colours as values, or part of their values, such as color, background and border. Note that colours use the American spellings, not the British (or other) spellings (color instead of colour, and gray instead of grey). The CSS 3 colours allow either spelling of grey-based colours, but you may find that browsers expect the American spellings.

There are five main ways to specify colours, #rrggbb, #rgb the two rgb( ) syntaxes and actually typing the name of the colour. You can choose which is best for you. For the first two methods, the colours are defined in hex.

  • rr = 00 to ff for red
  • gg = 00 to ff for green
  • bb = 00 to ff for blue
eg. #b85c4f
  • r = 0 to f for red
  • g = 0 to f for green
  • b = 0 to f for blue
eg. #b54
rgb( cr, cg, cb )
  • cr = 0 to 255 for red
  • cg = 0 to 255 for green
  • cb = 0 to 255 for blue
eg. rgb( 184, 92, 79 )
rgb( pr, pg, pb )
  • pr = 0% to 100% for red
  • pg = 0% to 100% for green
  • pb = 0% to 100% for blue
eg. rgb( 72%, 36%, 31% )
Colour names

Firstly, there are the 16 main HTML colours (plus orange) - I put the black backgrounds in so you could see the colours better aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

CSS 3 also defines many other colours and most current browsers support them. However, there are still browsers in use that do not. Whether you choose to use them is up to you.

Lastly there are are the system colours, which give the colours specified by the operating system. Support for these depends on what is provided by the operating system and browser. Generally, it is a good idea not to rely on these except in controlled situations.

There is also inherit which inherits the relevant colour from the parent element. Backgrounds can also use transparent.

Now for something totally non-standard but fun all the same, here's how to apply colour styles to your scrollbars in IE 5.5+ and Opera (other browsers will just ignore it).


Many styles accept measurements, such as border and font sizes, line and element heights, widths and positions.

Measurements must always be given with units. The following measurement units are permitted.

1em is the default font size for that element
1ex is the default lower case font size for that element (as letters like 'x')
Pixels, relative to the normal pixel size of a normal computer screen
Percentage of defualt size or parent element size
Inches ~= 2.54 centimeters
1 point = 1/72 inches
1 pica = 12 points

in, cm, mm, pt and pc will only make sense if the browser knows how many pixels are on the screen and how big the screen is. Often, this is not the case. Not all computers know how big the screen is, as not all screens tell the computer how big they are. In these cases, the browser must make a guess.

This paragraph element has been defined with border: 3px double fuchsia;. It will have a double lined border 3 pixels wide, that will be fuchsia coloured.

Last modified: 4 September 2008

  1. Previous
  2. Next
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.