Loading

  • Contents
  • Images
  • Styles
  • Scripts

HEX/RGB Colors Explained

A basic primer on hex (hexadecimal) numbers as they relate to color coding for web pages. Use the best system right from the beginning. Write your web pages so that they can be viewed in different browsers and ensure that they achieve more than just being suitable for your own personal viewing.

Why Use Hex Colors?

There are some very simple reasons. You need to be able to set your page background or table background colors on a web page and there are two basic methods of doing this.

The first method is to use color names like ‘lightmajenta’ or ‘darkcyan’ (“Hey! that sounds real easy”) and the second method is to use six digit hexadecimal color codes like ‘#99CCFF’ or ‘#0033CC’ (“Now that sounds really hard”).

Unfortunately there are several problems with using color names and we list some of the here.

  • There is no common standard for specifying what a color name represents. Color is subjective and we might all agree what black or white should look like, but there is likely to be disagreement about many other colors.
  • Color names are not supported by all browsers and one browsers beautiful background color could be another browsers error message.
  • There is no guarantee that a color name, even if recognized by different browsers, would display the same color. A color name that looks good on your browser may be different (and look terrible) on another.

Once you become familiar with hex color codes you will find they are a far better way of specifying a color than using color names. You have far more control over your colors as well as far more comparative control.

Next time you are ‘surfing the web’ take a moment and use your browsers ‘View Source’ facility to see how other people specify their colors. I will bet that the vast majority are using hex color codes, not color names.

If you are new to writing web pages then my recommendation is that you use hex color codes right from the beginning. If you look at the selections in the Tree Menu on the left you should be able to see that we have provided a Web Color Chart (HTML Section) which you can use to select your colors. Corresponding hex color codes are displayed with each color, together with their RGB and CMY equivalent decimal codes.

RGB Explained

Many people will tell the world that their computer has 16 million colors. It’s a really big number and it sounds very, very impressive, but very few people understand how the number is arrived at or what it means.

RGB stands for RED, GREEN and BLUE, and when someone talks about an RGB color they are describing a color that is arrived at by mixing a red color, a blue color and a green color.

Each of the prime RGB colors can be numerically described in 256 different ways (0 … 255), the highest number being 255 which is 100% of the color (e.g. red 255 = 100% red) gradually darkening down to zero which is 100% black in all cases.

In the RGB color system 100% white is made up from 100% red (red:255) +100% blue (blue:255) + 100% green (green:255). At the opposite end of the spectrum 100% black is made up from 0% red (red:0) + 0% blue (blue:0) + 0% green (green:0).

So how do we arrive at the 16 million colors figure? It is arrived at by multiplying 256 reds by 256 blues by 256 greens and my calculator calculates the answer as 16,777,216. Very impressive!

Before you get carried away at the thought of the infinite variety of colors that are going to be available to you as a web author I had better tell you that in reality those 16 million colors are reduced to 216 colors for the purposes of web page creation. However, every cloud has a silver lining and in this case it is the fact that 216 colors are a lot easier to understand and remember than 16 million colors, in both decimal and hexadecimal.