learn web technologies, the easy way

HTML Colors

As is the case with images, too much of a good thing actually hurts. In other words, use color to the extent that you need to implement your design, but if you overdo it, your users won’t be able to see your links, or other things that you want to have stand out.

Colors can be specified by their name (if one of the standard colors) or by codes indicating how much Red, Green and Blue (RGB) this color should contain.

If you want to use colors by their name, you are limited to the sixteen (16) values allowed by HTML, which are (in alphabetical order):

A Standard Color Reference

nameappearancergb valuehex value
aqua rgb(0,255,255)#00FFFF;
black rgb(0,0,0)#000000;
blue rgb(0,0,255)#0000FF;
fushia rgb(255,0,0)#FF00FF;
gray rgb(128,128,128)#808080;
green rgb(0,255,0)#00FF00;
lime rgb(50,205,50)#32CD32;
maroon rgb(128,0,0)#800000;
navy rgb(0,0,128)#000080;
olive rgb(128,128,0)#808000;
purple rgb(128,8,128)#800080;
red rgb(255,0,0)#FF0000;
silver rgb(192,192,192)#C0C0C0;
teal rgb(0,128,128)#008080;
white rgb(255,255,255)#FFFFFF;
yellow rgb(0,255,255)#00FFFF;

 

What is this hex stuff?

Hex, or more properly "hexadecimal", is a representation of a number that is better understood by computers than by people. But because the hex form is shorter than the associated rgb form for colors, we prefer hex.

The way to look at hex numbers is to look at the digits separately. The first digit is the number of "16"s and the second number is the number of "1"s. That is "80" means "16 times 8 plus 1 times 0", ((8 * 16) + (0 * 1)) or 128 in decimal. The trickiest part of the hexidecimal number system is that it is based on 16, not 10 like decimal, that means we need to represent those digit after 9, through the number 15. This is done by, you guessed it, using the letters "A" through "F" like this:.

A = 10, B = 11, C = 12, D = 13, E = 14 and F = 15

So take the color yellow for example. The table show a hex value is 00FFFF for yellow. We separate into pairs like this: 00 FF FF, and perform the same calculation as shown above, which is sixteen multiplied by the first digit plus one multiplied by the second digit. So, for the first pair "00", this means (16 * 0) + (1 * 0) which equals 0. The second number means (16 * 15) + (1 * 15) which equals 255, and the third number is the same as the second, so that is also 255. Now we have 0, 255, 255 as the decimal digits for yellow. Take a look at the rgb value for yellow in the table above and you'll see it has a value of rgb (0,255,255).

Here is a reference for gray scales (with only hex values, because there aren't any official names, other than for three of them: black #000000, regular grey #808080, and silver #C0C0C0):

A Greyscale Reference

appearancergb valuehex value
 rgb(0,0,0)#000000;
 rgb(16,16,16)#101010;
 rgb(32,32,32)#202020;
 rgb(48,48,48)#303030;
 rgb(64,64,64)#404040;
 rgb(80,80,80)#505050;
 rgb(96,96,96)#606060;
 rgb(112,112,112)#707070;
 rgb(128,128,128)#808080;
 rgb(144,144,144)#909090;
 rgb(160,160,160)#A0A0A0;
 rgb(176,176,176)#B0B0B0;
 rgb(192,192,192)#C0C0C0;
 rgb(208,208,208)#D0D0D0;
 rgb(224,224,224)#E0E0E0;
 rgb(240,240,240)#F0F0F0;