home links
all content projects tools archive

LAG-HTML "Web Safe" Color Chart




"Web Safe" Color Palette

Around the net you'll probably run into a type of color chart called a Waterfall. This is the result of a very short JavaScript loop that looks something like this: 

document.write("<table><tr>");   

var hexarr = new Array("00", "33", "66", "99", "CC", "FF"); 
var currcolor = "#";  

for(red=0; red<6; red++){ 
  for(green=0; green<6; green++){ 
    for(blue=0; blue<6; blue++){ 
      currcolor = "#" + hexarr[red] + hexarr[blue] + hexarr[green]; 
      document.write("<td bgcolor=" + currcolor + " title=" + currcolor + " height=20></td>"); 
    } 
    document.write("</tr><tr>"); 
  } 
} 
  
document.write("</tr></table>");


This short script outputs the following "Web Safe" Waterfall style color chart.
Note - for these color charts I'm outputing with JavaScript, simply mouse over the color you want to know the code for, and a tooltip will display the hex number.



"Web Unsafe" Color Chart number one:
Thousands of Colors

And now, introducing the 4,069 "Web Unsafe" color chart. Instead of sticking to pairs of only 0-3-6-9-C-F, now we'll use pairs of all the numbers, 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F. Because there are so many of these colors, I've included the color name as a tooltip if you mouse over a certain table cell. The code for this is: 

 
document.write("<table><tr>");    

var hexarr = new Array("00", "11", "22", "33", "44", "55", "66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");  
var currcolor = "#";    

for(red=0; red<16; red++){  
  for(green=0; green<16; green++){  
    for(blue=0; blue<16; blue++){  
      currcolor = "#" + hexarr[red] + hexarr[blue] + hexarr[green];  
      document.write("<td bgcolor=" + currcolor + " title=" + currcolor + " height=20></td>");  
    }  
    document.write("</tr><tr>");  
  }  
}    

document.write("</tr></table>");


And the resulting Color Table is:



This is a lot of colors. Two colors put right next to each other that are only one increment apart result in just-barely distinguishable difference. Therefore, This color palette should be overly-sufficient for anything you do. To illustrate this, here are two squares that are one increment apart.

#3344AA #3344BB


"Web Unsafe" Color Chart number two:
Billions of Colors

I'm sure anticipation has been building. You've been saying to yourself "More colors would be more better! I wants to gets me as many dang colors as I can get!" Well slow down there, grammar machine. Unfortunately, writing a script that does anything over 16 billion times will, as we like to say in the inustry, "Crash Your Browser". At left is a gradient from #000000 to #0000FF in 1 pixel steps.

This color gradient is only about .0015% of the total gradient of over 16 billion colors. So, what am I trying to say? Even though they are at your disposal, 16 billion colors is more than you will need.


Still need more convincing? Here are two squares that are only one increment apart.

#25CC70 #25CC71


Okay, stop squinting at the screen. I'll save you some time - you can't tell the difference between these two colors. If the difference is lost on a regular person's eyes, then, as an web designer, it's a useless feature of hex colors to be able to code these as different colors.

So many colors, so little time...

So, in my opinion, the second palette is all you'll ever need. These palettes were easy to code, but as you can tell the colors don't come out in any useful pattern. What we need is a color chart that is arranged in a logical order - and maybe even interactive for use on web pages. For the longest time I used VisiBone's Web Safe Color Chart - a great free online tool that lets you compare different "Web Safe" colors next to each other with a little interactive application. I also make use of Photoshop's Color Chooser, which has a checkbox you can check to limit the palette to "Web Safe" colors, but this wasn't online.

It was just about when I started to polish up my Caladder program (check it out!) that I realized that I needed an interactive color chart. Deciding that for simple text and background color choosing, the "Web Safe" colors would work just fine. With the help of both Photoshop for colors and Xcel for repetitive HTML coding, I developed my own interactive color chart. Each color has built in hover and click interactivity, making it easy to integrate into any online application.

Well, that's about it for now. Jump on over to the LAG-HTML "Web Safe" Color Chart, or my Caladder Application to see these color charts in action.


This work is licensed under a Creative Commons 3.0
Attribution-Noncommercial-Share Alike License 		Creative Commons License