Understanding How HTML Color Codes Work

Ever wonder how HTML color codes are put together? For the beginner, it can look like lots of numbers and letters that make no sense. In reality, HTML color codes are written that way for a specific reason that we'll look at in this article.

Introduction to the Hexadecimal System

In mathematics, the hexadecimal or simply hex is a numeral system with a base of 16 usually written using the symbols 0-9 and A-F. The numbers 0-9 have the same value as in the decimal system but starting with the letter A, the value keeps going up one up to the value of 16. A is worth 10, B is worth 11 and so forth until you get to F which is worth 16.

How the HTML Color Codes are put together

HTML Color codes are composed of six hex numbers that represent a possible 16.7 million color combinations. The hex color codes are built on the RGB color model. R stands for red, G for green, and B for blue. With your typical html code that looks like this: #FFFFFF it breaks down as follows. The first two hex digits #FFFFFF represent 'red'. The second set of two hex digits #FFFFFF represent the color green. The third and final set of two hex digits #FFFFFF represent the color blue.

A brief overview of the RGB model

The RGB color model, like the HTML color model can represent a total of 16.7 million colors. By varying the amoung of red, green, and blue, one can come up with any of 16.7 million colors. Each RGB value is represented by a number from 0 to 255. So a set of RGB values for the color white for instance, would look like this: 255, 255, 255.

Putting HTML and RGB Together

We've already established the hex numeral system with it's number range between 0 to 16. Now, when you combine two hex numbers, you can represent any number between 0 and 255. As you can see, RGB and HTML color codes represent the same color model.

Websafe Color Palette

Years ago, monitors could only display 256 colors. These monitors were still popular when HTML was first put together. As such, it was necessary to put together a list of colors that web designers could be sure any given monitor could properly display. Web safe colors are the result. The websafe color palette is made up of 216 colors.

It is always good practice to pick standard colors across the board, but it is no longer absolutely necessary to stick with web safe colors. Doing so now is more for purposes of holding to standard than it is for necessity. One exception to this rule may be developing websites for cellphones and PDA's. Having said that, these devices are now surpassing this barrier as well.

#FFFFFF represents the color white. #000000 represents the color black with every other color in between. I hope you now have a much better idea of why HTML color codes are look the way they do.

Joe Duchesne is the president of Yowling.com. They specializes in business web hosting and also offers you the ability to design a website online using their easy to use ecommerce website builder. Reprint freely as long as you provide a keyword rich clickable link back to our website.

More Web Design Articles

Let Your Website Make You $$$ While You Sleep! and All That Other B.S.!
Well, you've got your product, started your home business, and even have your website up on the internet. Only one problem, where is that money you were supposed to be making? Nothing! No one is knocking down your door to buy your product! Well, here is the real world answer.

Graphic Design Can Make or Break Your Web Site
We all want high impact graphics for our Web sites - Right.Sometimes it is easy just to pick a template that comes included with a site builder and or hosting package.

3 Tips For Writing Content That Will Make You Sales
Content is king. Without content your website is an empty shell, a skeleton with no flesh, an empty vessel.

Website Sales: 10 Strategic Tips To Maximize Your Profits
If you?ve a website but not making a lot of profit from it, cheer up because I have 10 website sales secrets that can help you maximize your sales and profits, starting now:1. Tell people the point or focus of your web site.

Website Design: 10 Smart Tips To Improve Your Ad Copy
Your website design may be affecting your sales in ways that you may not believe.Here are a few website design tips to help you improve your website and ad copy for greater profitability:1.

Website Advertising: 10 Dynamic Tactics To Super-Charge Your Sales
Here are 10 dynamic website advertising tactics to super-charge your sales, starting now:1. Test different web site color themes to see which combination will sell your product better.

Owning Your Own Web Site Is A Must
Owning your own website is a must if you are doing business on the Internet.There are so many factors involved in creating a web site layout and or design that there is really no right or wrong design.

Website Promotion Ideas: 10 Tips On How To Use Your Picture Effectively To Increase Your Sales
Seeing is believing.One trick to increase your visibility as well as your credibility is to use your photo at your website.

Website Design: 10 Web Site Design Pitfalls To Avoid
If you?ve a website that is not generating a lot of sales, it may be due to some design flaws.Below are website design flaws you should correct now, to empower your website:1.

Website promotion Ideas: 10 Web Site Add-Ons To Increase Your Traffic
If you?re not getting a lot of traffic to your website anymore, must implement these Website promotion ideas immediately.1.