Hexadecimal Color Notation On The Web

When designing elements for your webpage, you will often be called upon to specify a color. For example, the code for a span shown below specifies that the color of the text within the span will be yellow.

Text

Colors can be specified according to their names, for example "yellow", "green", or "blue". In many cases, these simple color names will work. But what if you want to specify a more sophisticated color like "cornflowerblue"? A particular browser may not recognize a particular color name. It's more reliable to specify colors with an "RGB triplet".

An RGB triplet specifies a color based upon the amounts of red, green, and blue, on a scale from 0 to 255, required to create the color. For example, to create the color cornflowerblue you need red=100, green=149, and blue=237. We could then specify the color of the text within a span using the rgb function as shown below.

Text

This will work fine with style notation, but what if you want to use straight html. Html doesn't recognize the rgb function. In that case, you can specify color using "hexadecimal" notation. Whereas the decimal numbering system uses the characters 0 through 9 to get 10 values, the hexadecimal numbering system uses the characters 0 through f to get 16 values. (After 9 the characters a, b, c, d, e and f are used, as shown below.)

Sample colors

Decimal Hexidecimal Equivilants

dec hex
0 = 0
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

On first appearance, this looks pretty simple but you need two hexadecimal characters to represent all decimal values from 0 to 255. When you increment decimal 9 by 1, you change the 9 to 0 and put 1 in the ten's place. When you increment hexidecimal F by one, you change the F to 0 and put 1 in the "sixteens" place. Sometimes it's not easy to convert between decimal and hexadecimal in your head.

RGB Triplet for Cornflowerblue

color dec hex
red 100 64
green 149 95
blue 237 ED

We could then specify the color of text within a span using the hexadecimal notation as shown below.

Text

Note that when we indicate the use of hexadecimal notation by placing a pound (#) sign in front of the number, and we don't use commas to separate the color components.

If it's not easy to convert between decimal and hexadecimal in your head, then how do you do it? You can use a calculator that has a decimal to hexadecimal coversion function, or you can learn to think in hexadecimal. For example, what's the next number after CE? That would be CF. what's the next number after CF? That would be D0. Which hexadecimal number is higher 99 or B2? B2 would be higher than 99. It gets easier with experience.

Here's Java Script code for a simple decimal to hexidecimal color converter

function convert(decvalue)
{
var num = parseInt(decvalue);
if(num >= 0 && num < 256)
{
var hexnum = num.toString(16);
alert("#" + hexnum);
}
else {alert("Error!");}
}

It's important to use hexadecimal notation to specify colors when you use DHTML with visual effects, because to create a dynamic color change you have to increment or add a value to a color. The vast amount of color specification on webpages is in hexadecimal notation, so it would be wise to become familiar with it.

About the Author:

Copyright(C)2002 Bucaro TecHelp. To learn how to maintain your computerand use it more effectively to design a Web site and make money on theWeb visit Bucarotechelp.com To subscribe to Bucaro TecHelp Newsletter Send a blank email to bucarotechelp-subscribe@topica.com.

An Easy Way to Choose Attractive Color Combinations
Lots of people struggle to come up with attractive color combinations when designing logos, banners or web sites. So, heres an easy technique that only takes a few minutes...
Web Safe Colours
Web Safe A web safe colour is one that will display correctly on any screen, irrespective of the operating system or graphics card. There are only 216 web safe colours. You can use other colours, but you cannot be sure they will display correctly. A general rule of thumb is: if possible use
Colour Theory
The colour wheel below consists of 20 basic web safe colours, and is a helpful tool that shows the basic organization and relationships between colours. By choosing the colour opposite a particular colour you can match colours more effectively...
Using and Converting to Color-Safe Palettes
When you design web pages in HTML, as you probably know, you can use a tremendous range of colors (over 16 million) for fonts, tables, backgrounds and so forth using the COLOR attribute of the various HTML tags...
Understanding HTML Color Codes, Explained in Plain English
When I help people with web pages, I always encourage them to edit the HTML directly and not rely on programs like Microsoft FrontPage or Adobe GoLive to layout their pages. One of the first things that people have a hard time grasping is what
Basic Shoutbox
This is an interesting and helpful tutorial for designing an Advanced Shoutbox. The author explains in this two part article that your blog or website can have a place for visitor comments. The author starts by showing you how to....
Form Email
Learn to send mail with the php mail(); function.
Color Adjustments: Color Theory (Video Included)
Lets proceed to the color adjustments. To work with color efficiently you have to understand the foundations of the color separation. If you know this theory, feel free to skip this page. If you dont, please read this at least once.
CSS Link Specificity
Love Hate is how I taught myself to remember the order. The acronym for the order (LVHA) just wasnt terribly easy to remember on its own. It didnt spell anything, or really give a sensical meaning to me. But Love Hate works. So what is LVHA?
Graphic Design Using Color
Color is everywhere and conveys a message even if we dont realize it. While this message can vary by culture it pays to know what colors say in your own corner of the universe, and even what color means to your target market.