HEX/RGB Web Colors Tutorial
Web 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 'lightmagenta' 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 nightmare background.
- 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.
Explaining Hex Codes
To ensure that you can relate to this section in a practical manner we are going to explain hex color codes being used to set the background color on a web page. The script below gives you an example.
You set the background color for your web page by specifying the required color code in the 'bgColor' attribute of the 'BODY' tag. There are likely to be other attributes in the BODY tag but we are going to ignore these altogether for this exercise.
It is important to remember that hex color codes are describing an RGB color to a Web browser and the color code must therefore have a Red section, a Green section and a Blue section. On the basis that a picture is worth a thousand words we have prepared the adjoining graphic to explain each component of a hex color code.
This is beginning to look really simple but to fully understand hex color codes we still need to talk about RGB and Hexadecimal, and we then have a really useful tip about specifying browser safe Hex color codes.
Many people will tell the world that their computer has 16 million colours. 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 colours 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 colours 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.
I make the presumption that anyone who has navigated their way to this place will have an understanding of the decimal numbering system. but for comparative purposes I will start by defining decimal.
Decimal is a mathematical numbering system that is base 10. This means that you have a set of base numbers (1,2,3,4,5,6,7,8,9,10) and all decimal numbers no matter how large, are made up from these base numbers. Note that decimal starts at number 1.
Hexadecimal is a mathematical numbering system that is base 16. This means that you have a set of base numbers (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) and all hexadecimal numbers no matter how large, are made up from these base numbers. Note that hexadecimal starts at number 0.
Browser-safe colors are declining in importance as the number of computers that have graphics cards that support mare than 256 colors is increasing. However, browser-safe colors are still an important feature of web design so finally, I am going to give you a useful tip, a way to identify and use browser-safe Hex color codes. It is beyond the scope of this tutorial to explain why these particular colors are browser-safe but they are and you can use them with confidence.
We previously explained that Hexadecimal color codes are made up of three components, a RED value, a GREEN value and a BLUE value and each of the two-digit Hexadecimal color values are in the range 00...FF Hex (0...255 decimal). To give an example, the Hex color code #FE6136 (254, 97, 54 decimal) is a valid RGB Hex color code containing the three RGB elements, FE, 61, 36 Hexadecimal but #FE6136 is not a browser-safe color.
All browser safe, two-digit Hex color codes fall into the following range: 00, 33, 66, 99, CC, FF Hex (0, 51, 102, 153, 204, 255 decimal). We have already said that our previous example #FE6136 is not a browser-safe Hex color code but an example such as #FF6633 (255, 102, 51 decimal) is a browser safe Hex color code because each of the three RGB two-digit components fall into the range specified for browser-safe colors, 00, 33, 66, 99, CC, FF Hexadecimal. To help you select browser-safe colors we have provided a 216 Browser Safe Colour Chart which displays the Hex value, the decimal value and the CMY (Cyan, magenta, Yellow) percentages on each swatch.
Link Directly To This Page ...
help support free information on the Internet ...
Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.
the link displayed ...
select/copy the link Markup ...