RGB and Hex Color Codes

Using color names to specify web page colors is seriously limiting, and really doesn't allow us to fully express ourselves creatively. There is a much better alternative to using color names which gives us access to the full spectrum of displayable colors - all 16 million of them!

HTML RGB colors

This alternative involves specifying the separate Red, Green and Blue components of our colors. The values for each of these components can range from 0 to 255, giving us a total of 256 shades for each component. When we multiply these shades together we get a total of 256x256x256 = 16,777,216 colors to choose from. That's a lot of colors!

It is very simple to specify a color in RGB terms. For example, say we wanted to display all paragraphs with a Red component of 200, a Green component of 100, and a Blue component of 50 (giving a terracotta color). We would simply use the following style declaration:

p {color: rgb(200,100,50)}

HTML Hex colors

Another way to specify RGB colors is to use what is known as Hex codes. This is essentially a different way of doing exactly the same thing as RGB colors, but it is based on the hexadecimal numerical system (don't worry if you don't know what that is). Basically a Hex code provides a shorthand way of writing our RGB colors.

A Hex code is written with a # followed by a combination of six numbers and letters. Each pair of numbers of letters represents one color component - the first two are Red, the second two Green and the final pair Blue. Let's rewrite the above example using Hex codes:

p {color: #CC6633}

As you can see, this is significantly quicker to write, although it is a bit less intuitive, because it is harder to decipher what color the code will actually produce.

Getting color codes

Once you have chosen a way of specifying your colors (name, RGB, or Hex), you need to be able to figure out what code will produce a particular color. The best way to do this is to get a drawing program which displays either RGB or Hex codes. You should find that even the most basic of drawing packages will show the RGB values for any color, and many also show Hex codes. You can use these programs to choose a color you like, and then get the code for it so you can reproduce it in your web page.

Alternatively you can simply use the table on the following page to instantly find the codes for 216 of the most common colors.