Advertisement
FastClick Ad Network

  

  

THE WEB SAFE COLOR TABLE

  
           
000000 000033 000066 000099 0000CC 0000FF
           
003300 003333 003366 003399 0033CC 0033FF
           
006600 006633 006666 006699 0066CC 0066FF
           
009900 009933 009966 009999 0099CC 0099FF
           
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
           
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

           
330000 330033 330066 330099 3300CC 3300FF
           
333300 333333 333366 333399 3333CC 3333FF
           
336600 336633 336666 336699 3366CC 3366FF
           
339900 339933 339966 339999 3399CC 3399FF
           
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
           
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

           
660000 660033 660066 660099 6600CC 6600FF
           
663300 663333 663366 663399 6633CC 6633FF
           
666600 666633 666666 666699 6666CC 6666FF
           
669900 669933 669966 669999 6699CC 6699FF
           
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
           
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

           
990000 990033 990066 990099 9900CC 9900FF
           
993300 993333 993366 993399 9933CC 9933FF
           
996600 996633 996666 996699 9966CC 9966FF
           
999900 999933 999966 999999 9999CC 9999FF
           
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
           
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

           
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
           
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
           
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
           
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
           
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
           
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

           
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
           
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
           
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
           
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
           
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

 

NAMED COLORS

  
In addition to the 216 web safe colors.  HTML specifications also recognizes the following 16 colors, and they are also considered web safe.  These colors are originally used as the standard EGA color palette. 

  Red FF0000      
  Green 00FF00   
  Blue 0000FF   
  Yellow FFFF00   
  Purple 800080   
  Fuschia     FF00FF   
  Navy 000080   
  Teal 008080   
  Aqua 00FFFF   
  Olive 808000   
  Lime 00FF00   
  Black  000000    
  Silver 008000   
  Gray 808080   
  White FFFFFF   

WHAT ARE THE WEB SAFE COLORS?

  
Web safe colors are sets of colors that will not be altered (dithered) when shown on browsers running on a 256-color browser.   These sets of colors are initially selected by Netscape for use on their browsers.   

Web safe colors seem to be irrelevant for today's computers, but back when the web was invented, many people still use graphics card which supports only 256 colors (or less).  In fact, even today (April 2000), Netscape browsers seems to still have some problems when displaying colors; while Internet Explorer seems to have better color handling (for more on this discrepancy, see the last section on this document).   

You might be wondering what is so special about the number 256.  This is a topic that I won't get into, but the short answer is because 255 is the maximum values for an 8 bit number (i.e.: 255 is 28).  

Of the 256 possible colors, there are 216 that is designated to be web safe colors; they are shown on the table above.   The remaining 32 colors are used by the operating system (such as Windows 95, or MacOS) and are reserved for the color of title bar, desktop, menu bar, etc.   

INTERPRETING THE NUMBERS

  
A web color is usually specified as a 6-digits hexadecimal number.  The 6-digits represents the Red Green Blue value of the color, commonly referred as the RGB values.  Even though there are 6 digits on each number, these six digits are actually three separate pairs of numbers, specifically:
     The first two digits are the Red (R) value of the color.
     The next two digits are the Green (G) value of the color.
     The last two digits are the Blue (B) value of the color.
You might attempt to interpret all six digits as a whole, but that will be meaningless.   Instead, you should always break up the six digits into RGB values like this RRGGBB. 

So for example, if a hex value is FF6699, then RR=FF, GG=66, BB=99. 

Here are more examples:

  FF0000
The Red value for the color is FF (full red).
The Green value for the color is 00 (no green).
The Blue value for the color is 00 (no blue).

So:
Full Red + No Green + No Blue = Full Red
(I.e.: Red mixed with nothing is always red.)
The result is this color.

00FF00
The Red value for the color is 00 (no red).
The Green value for the color is FF (full green).
The Blue value for the color is FF (no blue).

So:
No Red + Full Green + No Blue = Full Green
(I.e.: Green mixed with nothing is always green.)
The result is this color.

0000FF
The Red value for the color is 00 (no red).
The Green value for the color is 00 (no green).
The Blue value for the color is FF (full blue).

So:
No Red + No Green + Full Blue = Full Blue
(I.e.: Blue mixed with nothing is always blue.)
The result is this color.

FFFF00
The Red value for the color is FF (full red).
The Green value for the color is FF (full green).
The Blue value for the color is 00 (no blue).

So:
Full Red + Full Green + No Blue = Full Yellow
(I.e.: Red mixed with green produces yellow.)
The result is this color.

FF00FF
The Red value for the color is FF (full red).
The Green value for the color is 00 (no green).
The Blue value for the color is FF (full blue).

So:
Full Red + No Green + Full Blue = Full Purple
(I.e.: Red mixed with blue produces purple.)
The result is this color.

At this point, realize that each Red, Green, and Blue values represent the amount of tint/hue for each component.  The bigger the value of the component, the brighter that particular component will be.  00 means no tint at all, FF means full tint.
For example:
000000 is a complete black.  If we add some Red tint (for example set the Red value to 33), then we get something like this:
330000
(this is actually reddish black, but you might not notice it on the monitor)  If we keep adding Red tints, then the brightness of the Red will increase:
660000
990000  
CC0000 
FF0000
 

You can apply this principle to other colors.  For example, if you want to create the color yellow, you can mix red and green, like this:
666600
Now if you find that too dark, you can increase the values until you find the one you like without having too consult to a color table every time:
AAAA00
FFFF00

So, the most important thing to remember is that the 6 digits hexadecimal color value aren't meant to be taken as a whole.  So, let's say you want to know what FF0099 means; you don't try to interpret the whole number (FF0099); instead, break it up into the the Red, Green, and Blue values as shown in the examples below.  So, in this case:

FF0099 should be interpreted like this:
The Red value for FF0099 is FF (full red).
The Green value for FF0099 is 00 (no green).
The Blue value for FF0099 is 99 (some blue, but there's less blue tint than the red tint).

So:
Full Red +  No Green + Some Blue = Reddish Purple
(Remember that red mixed with blue produces purple.)
FF0099

Consequently,
9900FF can be interpreted as
Some Red +  No Green + Full Blue = Bluish Purple 
9900FF

How about trying to create an orange?
Well, yellow is Red+Green.  Adding more red tints than green tints will produce orange.  For example:
FFAA00, FF9900, CC6600.  As the tint decreases, the colors becomes closer to black, as you seen in the case of CC6600 (dark orange - brown).

HOW TO DETERMINE IF A COLOR IS WEB SAFE

  
This is actually quite easy.  All you need to do is to break up the RRGGBB values into the RGB components, and make sure each component are multiples of 33 (hexadecimal).  So, to be web safe, the RR, GG, and BB values must be one of these numbers:
Hexadecimal:      00  33  66  99  CC FF
So, for example: 0033CC is web safe (because RR=00 which is a multiple of 33; GG=33, which is a multiple of 33; and BB=99, which is also a multiple of 33)

More examples:
666666 is web safe
FF9900 is web safe
FFCC99 is web safe
339900 is web safe
329900 is not web safe  (RR=32, which is not a multiple of 33)
010101 is not web safe (no multiples of 33)
339902 is not web safe (BB=02, is not a multiple of 33)

Note: Additionally, the 16 named colors shown above are also web safe.

 

HEXADECIMAL NUMBER

  
Hexadecimal number, or commonly referred as "hex" number is a popular numbering system in Computer Science.  It may seem very complicated, but it's actually not.  It's very similar to the decimal numbering system.  The difference is that in decimal, a single digit is always between 0 to 9; but in hex system, a single digit can be between 0 to 15.   Since the alphanumeric character goes only up to 9, hex system uses the alphabet A through F to represent 10 to 15, such as below:

Decimal: 0  1  2  3  4  5  6  7  8  9  10 11 12 13 14 15
Hex:     0  1  2  3  4  5  6  7  8  9  A  B  C  D  E  F

For example:
Decimal 0 is equal to 0 in hex.
Decimal 5 is equal to 5 in hex.
Decimal 10 is equal to A in hex.
Decimal 15 is equal to F in hex.
Decimal 16 is equal to 10 in hex.
Decimal 17 is equal to 11 in hex.
Decimal 255 is equal to FF in hex.
etc...

Noting this difference, hopefully you can see why decimal is is sometimes also referred as base 10 numbering system, and hexadecimal is base 16 numbering system. (FYI: Most scientific calculator has a function to convert decimal to hex and vice versa.  Even Windows Calculator has this capability.) 



  
Please be aware that you might not always get what you expect, even with web safe colors.   To illustrate this point, please put your attention to the blue table cell above this text.  The cell has a background color of 0099CC.  At the center of the cell is a nontransparent .gif image with the same background color (0099CC).  If this page is viewed on Netscape 4.7 (PC), the border of the image is clearly visible (if you use a different browser, you might not notice it).   Here is the snapshot:

In Netscape 4.7 PC:


(This is an actual size snapshot.  Clearly, something funny/strange is going on.  The background color of the image has the same color value as the background color of the cell; they should have been displayed with the same color, but they aren't.)


(When zoomed in, there does not appear to be any dithering, but clearly there are some shift in the colors.)

In Internet Explorer 5 PC:


(This is actual size, the edges aren't as visible as in Netscape 4.7.)


(When zoomed in, clearly, there're some dithering.)

0099CC is a web safe color, so it's not obvious to me why it's dithered.  And, the color shift does not seem to occur on Netscape3 Gold (very strange).  

This example is to show that even when using web safe colors, it is a good idea to test on as many browsers as possible.   It's not to discourage from using web safe colors.  Chances are, it's always better to use web safe colors that not.   

<<INDEX>>
 
(C) F. Permadi
April 2000

permadi@permadi.com