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.

In The News:


pen paper and inkwell


cat break through


What Happened to My Website when I Deleted the Home Page by Mistake?

There is a widespread confusion among lots of new website... Read More

Designing Professional Web Pages

If your Web site doesn't project a professional and polished... Read More

Adding the Right Keywords to Your Website Content

You've made your website, added a great title and keywords... Read More

Web Templates: Replacing Designers?

I've seen articles (and websites) that suggest you can buy... Read More

Hacked Off with CSS?

For those not familiar with CSS Hacks, they are ways... Read More

Don?t Put Your Slogan in the Title Tag - Optimize Your Web Pages

Don't just put your slogan in the title tag when... Read More

How to Choose a Website Design Company

The internet is full of web design companies pleading for... Read More

Why Long Web Pages are Better than Short Ones

Many Internet sites that try to sell you something have... Read More

How to Chose Stock Photography for your Web Site

So you've decided to take the plunge. You know that... Read More

The Right Trigger Words

CNN.com's designers have gone out of their way to make... Read More

Revising Your Site - What Happened To My Search Engine Placement?

As of September, Smartads went through what so many have... Read More

Usability and Considerate Design

I hate to imagine that in your web development project... Read More

Is Your Site Too Slow? Why Image Optimization Is Critical

Graphics are fun, but if you put in too many... Read More

Using Graphic Design on Your Website

Almost everything is available on the web? products, services, e-books,... Read More

Understanding How HTML Color Codes Work

Ever wonder how HTML color codes are put together? For... Read More

Getting Along With Your Web Designer

You're all ready to get started creating your web presence... Read More

Successful Websites Don?t Set Out To Sell

What are websites? Are they sales tools for vendors and... Read More

Building a One-page Website

You've designed your logo, and you're ready to print your... Read More

Top Ten Ways to Increase Web Sales - Part 1

You have only 10 seconds to impress your potential buyer.... Read More

Increase Your Website Sales Instantly

If there's one thing that I've learnt so far, it's... Read More

What Is Your Websites Most Wanted Response?

You spend time and money promoting your website; but what... Read More

Website Woes: Top Five Offenders

I see a lot of mistakes, but here are the... Read More

How Your Business Can Win Online

There are lots of websites out there that do little... Read More

Professional Web Design Companies - How to Avoid Getting Ripped Off

Building a website that is exactly what you want and... Read More

Web Site Accessibility

Making your site accessible means making it available to be... Read More

Web Design: How To Get Your Visitors To Stay

Remember the famous line from the movie Field of Dreams,... Read More

Wording Up Your Website

Back to basics. Forget funky design, good copywriting is the... Read More

How To Use Unsafe Web Colors With Minimum And Safety And Maximum And Profit

Do you want to use unsafe web colors without offending... Read More

How to Design a Search Engine Friendly Web Site

Many web site designers don't design their sites for the... Read More

Appropriate Key Words Choice

What do the key words represent?Key words - these are... Read More

Does Your Homepage Work?

All websites have a homepage. It is the most important... Read More

How Do We Know When Its Time To Redesign Our Web Site?

A question we frequently get asked is, "how do we... Read More

Increase Your Credibility With Web Site Awards

Web Site Awards are given from other sites to reward... Read More