Color In HTML

Colors in HTML

Colors in HTML can be specified using:

1. a color name. HTML used to recognize 16 color names ("black", "white", "gray", "silver", "maroon", "red", "purple", "fushsia", "green", "lime", "olive", "yellow", "navy", "blue", "teal", and "aqua"), but new browsers can recognize 147 CSS3 color names.  
2. a color number, such as "#FF0000", "#FFFFFF" (those are red and white).

Color Numbers

Color numbers are specified using hexadecimal (base 16) values.

The hexidecimal digits are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (where A through F equal the base 10 numbers: 10, 11, 12, 13, 14, 15)

The six digit color number is broken into three groups of two digits which specify the amount of Red, Green, and Blue in the color (using additive color...the way colored lights mix, not the way color pigments mix). Each two digit hex pair can have a value from 00 to FF (FF=256 in base 10). This gives over 16 million possible colors.

For example:

#FF0000 means FF worth of Red, and no Green or Blue. The result is RED.

#0000FF means no Red or Green, and FF worth of Blue. The result is BLUE.

#FFFF00 means FF worth of Red and Green, and Blue. The result is YELLOW.

#000000 means no Red, Green, or Blue. The result is BLACK.

#FFFFFF means full FF amounts of Red, Green, and Blue. The result is WHITE.

#FFEFD5 has high values for all colors, giving a light result: PAPAYAWHIP. (no, I don't know who thought up the color names.)

#556B2F has lower values for all colors, giving a darker result: DARKOLIVEGREEN.

Note that is is OK to use either uppercase or lowercase letters for the base-16 digits A, B, C, D, E, F.

HTML also recognizes color numbers that contain just three hexidecimal digits. This is a shortcut for colors where the red, green, and blue values consist of two identical digits. Example:

#00F is the same as: #0000FF and is BLUE.

#FF0 is the same as: #FFFF00 and isYELLOW.

#6B5 is the same as: #66BB55 and is THIS COLOR.

#000 is BLACK. #FFF is WHITE.

#666 is a DARK GRAY. #AAA is a light LIGHT GRAY.

NOTE! Always remember to put in the # symbol when specifying color numbers. Older versions of HTML didn't care if you left it out, but some browsers are stricter about this, and f you forget the # sign the browser may not display the color you requested.

Web Safe Colors

Nowadays, computers/monitors can display thousands or millions of colors, so the concept of "Web safe colors" is no longer important. But years ago, many computers were limited to displaying "8-bit color" and could only show 256 possible colors. Even worse, different computer systems (PC, Mac, UNIX workstations) don't even use the same 256 colors in their "color palettes," so you couldn't be sure what your color will be shifted to.

To avoid problems for older machines and different system color palettes, early Web designers usually limited their color choices to the 216 "web safe colors" which would display more or less the same on all systems. The web safe colors use only the hex values 00, 33, 66, 99, CC, and FF when making color combinations.

Of the examples shown earlier,

#FFEFD5 (PAPAYAWHIP) and

#556B2F (DARKOLIVEGREEN)

...are not web safe colors. They would get shifted to

#FFFFCC (NOT PAPAYAWHIP) and

#666633 (NOT DARKOLIVEGREEN)

...on ancient systems.

Below are six tables showing all of the 216 "web safe" colors, just to show you a range of colors compared to their hex values.

Within each table, red increases from left to right, and green increases from top to bottom, in steps of 33 (hex).

Blue increases from the first table to the last, in steps of 33 (hex).

#000000	#330000	#660000	#990000	#CC0000	#FF0000
#003300	#333300	#663300	#993300	#CC3300	#FF3300
#006600	#336600	#666600	#996600	#CC6600	#FF6600
#009900	#339900	#669900	#999900	#CC9900	#FF9900
#00CC00	#33CC00	#66CC00	#99CC00	#CCCC00	#FFCC00
#00FF00	#33FF00	#66FF00	#99FF00	#CCFF00	#FFFF00

#000033	#330033	#660033	#990033	#CC0033	#FF0033
#003333	#333333	#663333	#993333	#CC3333	#FF3333
#006633	#336633	#666633	#996633	#CC6633	#FF6633
#009933	#339933	#669933	#999933	#CC9933	#FF9933
#00CC33	#33CC33	#66CC33	#99CC33	#CCCC33	#FFCC33
#00FF33	#33FF33	#66FF33	#99FF33	#CCFF33	#FFFF33

#000066	#330066	#660066	#990066	#CC0066	#FF0066
#003366	#333366	#663366	#993366	#CC3366	#FF3366
#006666	#336666	#666666	#996666	#CC6666	#FF6666
#009966	#339966	#669966	#999966	#CC9966	#FF9966
#00CC66	#33CC66	#66CC66	#99CC66	#CCCC66	#FFCC66
#00FF66	#33FF66	#66FF66	#99FF66	#CCFF66	#FFFF66

#000099	#330099	#660099	#990099	#CC0099	#FF0099
#003399	#333399	#663399	#993399	#CC3399	#FF3399
#006699	#336699	#666699	#996699	#CC6699	#FF6699
#009999	#339999	#669999	#999999	#CC9999	#FF9999
#00CC99	#33CC99	#66CC99	#99CC99	#CCCC99	#FFCC99
#00FF99	#33FF99	#66FF99	#99FF99	#CCFF99	#FFFF99

#0000CC	#3300CC	#6600CC	#9900CC	#CC00CC	#FF00CC
#0033CC	#3333CC	#6633CC	#9933CC	#CC33CC	#FF33CC
#0066CC	#3366CC	#6666CC	#9966CC	#CC66CC	#FF66CC
#0099CC	#3399CC	#6699CC	#9999CC	#CC99CC	#FF99CC
#00CCCC	#33CCCC	#66CCCC	#99CCCC	#CCCCCC	#FFCCCC
#00FFCC	#33FFCC	#66FFCC	#99FFCC	#CCFFCC	#FFFFCC

#0000FF	#3300FF	#6600FF	#9900FF	#CC00FF	#FF00FF
#0033FF	#3333FF	#6633FF	#9933FF	#CC33FF	#FF33FF
#0066FF	#3366FF	#6666FF	#9966FF	#CC66FF	#FF66FF
#0099FF	#3399FF	#6699FF	#9999FF	#CC99FF	#FF99FF
#00CCFF	#33CCFF	#66CCFF	#99CCFF	#CCCCFF	#FFCCFF
#00FFFF	#33FFFF	#66FFFF	#99FF9FF	#CCFFFF	#FFFFFF