HTML PRIMER
by Jim Gordley
2008 HomeSpun Internet Enterprises

WEB SAFE COLORS

With the many different browsers and operating systems using different color palettes not all colors render exactly the same on each one. While a particular shade of blue looks just the way you want it to on your home computer using Windows XP and Internet Explorer, it might look different to another viewer using the same operating system along with Netscape Navigator. Viewers of your web site may be using a completely different platform such as a MAC.  The solution was to find the colors that rendered the same way regardless of platform, operating system or browser. These colors are referred to as web-safe or browser safe colors. Of all the available colors, some 16.7 million, 216 have been shown to render the same on all platforms and browsers. The only difference would be in the way a particular monitor has been adjusted.

The most straight forward way to display a color is to use a color name as the value in the color or bgcolor attribute. For example:

<p style="color:blue;">

changes the color of the displayed text to blue

</p>

ends the color value assignment and your text goes back to the original color assignment.

Style sheets use a slightly different format. the two examples below will set background color, a background image, and the font color.

body
{background-color: #cccc99;
background-image: url('file');
color: #000000;}

Web Safe Color Names

  black
#000000
  yellow
#ffff00
  white
#ffffff
  lime
#00ff00
  green
#008000
  aqua
#00ffff
  maroon
#800000
  fuchsia
#ff00ff
  olive
#808000
  silver
#c0c0c0
  navy
#000080
  red
#ff0000
  purple
#800080
  blue
#0000ff
  gray
#808080
  teal
#008080
  orange
#ffa500
   

Most major browsers support the use of 140 color names. The 17 color names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, and orange) and the colors represented by them above are the only color names that can be validated by the World Wide Web Consortium (W3C) and should be the only "names" that you use in your HTML or CSS documents.

If you don't see the color that you want to use in that very short list of color names you will have to use a different color notation method to display color choices.

HEXADECIMAL VALUES FOR THE 216 WEB SAFE COLORS

ffffff ffffcc ffff99 ffff66 ffff33 ffff00
ffccff ffcccc ffcc99 ffcc66 ffcc33 ffcc00
ff99ff ff99cc ff9999 ff9966 ff9933 ff9900
ff66ff ff66cc ff6699 ff6666 ff6633 ff6600
ff33ff ff33cc ff3399 ff3366 ff3333 ff3300
ff00ff ff00cc ff0099 ff0066 ff0033 ff0000
ccffff ccffcc ccff99 ccff66 ccff33 ccff00
ccccff cccccc cccc99 cccc66 cccc33 cccc00
cc99ff cc99cc cc9999 cc9966 cc9933 cc9900
cc66ff cc66cc cc6699 cc6666 cc6633 cc6600
cc33ff cc33cc cc3399 cc3366 cc3333 cc3300
cc00ff cc00cc cc0099 cc0066 cc0033 cc0000
99ffff 99ffcc 99ff99 99ff66 99ff33 99ff00
99ccff 99cccc 99cc99 99cc66 99cc33 99cc00
9999ff 9999cc 999999 999966 999933 999900
9966ff 9966cc 996699 996666 996633 996600
9933ff 9933cc 993399 993366 993333 993300
9900ff 9900cc 990099 990066 990033 990000
66ffff 66ffcc 66ff99 66ff66 66ff33 66ff00
66ccff 66cccc 66cc99 66cc66 66cc33 66cc00
6699ff 6699cc 669999 669966 669933 669900
6666ff 6666cc 666699 666666 666633 666600
6633ff 6633cc 663399 663366 663333 663300
6600ff 6600cc 660099 660066 660033 660000
33ffff 33ffcc 33ff99 33ff66 33ff33 33ff00
33ccff 33cccc 33cc99 33cc66 33cc33 33cc00
3399ff 3399cc 339999 339966 339933 339900
3366ff 3366cc 336699 336666 336633 336600
3333ff 3333cc 333399 333366 333333 333300
3300ff 3300cc 330099 330066 330033 330000
00ffff 00ffcc 00ff99 00ff66 00ff33 00ff00
00ccff 00cccc 00cc99 00cc66 00cc33 00cc00
0099ff 0099cc 009999 009966 009933 009900
0066ff 0066cc 006699 006666 006633 006600
0033ff 0033cc 003399 003366 003333 003300
0000ff 0000cc 000099 000066 000033 000000
           
ffffff cccccc 999999 666666 333333 000000

HEXADECIMAL NOTATION

Hexadecimal notation is simply put a different way of counting. Using the numbers 0-9 and the letters A-F with F being the largest value of them all.

0 1 2 3 4 5 6 7 8 9 A B C D E F

Using a set of these numbers we can assign a value to a color attribute. In much the same way an artist mixes different colors of paint to come up with just the color they are looking for, we can mix our colors. Which differs from the artist using paints and the subtractive color method. Mixing colors that happen to be web safe we are going to have to narrow the field of possibilities down. The only web safe combinations of color use 00, 33, 66, 99, CC, and FF as values.

Each color is a combination of three paired bits (2 hexadecimal numbers) which will define the amount of RED, GREEN, and BLUE, combined to render our color.


Additive Color Model

MIXING COLORS

 

R

G

B

RESULT

RED FF 00 00 #FF0000
YELLOW FF FF 00 #FFFF00
GREEN 00 FF 00 #00FF00
CYAN 00 FF FF #00FFFF
BLUE 00 00 FF #0000FF
FUCHSIA FF 00 FF #FF00FF
PURPLE 80 00 80 #800080
BROWN 88 55 33 #885533

The color red results from the hexadecimal number #FF0000. The pound sign (#) is a way of letting the browser know it is looking at a hexadecimal number. The pound sign is required. The next two characters (FF) assign a value for the amount of red to be used, the next two characters (00) assign a value for the amount of green to be used, and the final two characters (00) assign a value for the amount of blue to be used.
 

2008 HomeSpun Internet Enterprises