Hexadecimal Color Notation on the Web

By Stephen Bucaro

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.

<span style="font-family:verdana; color:yellow;">Text</span>

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.

<span style="font-family:verdana; color:rgb(100,149,237);">Text</span>

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.)

Decimal Hexidecimal Equivilants

decimal	hexadecimal
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

	decimal	hexadecimal
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.

<span style="font-family:verdana; color:#6495ed;">Text</span>

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.

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed