"Web Safe" and Hexadecimal colors

Hexa-what-imal?

HTML colors are designated by three double-digit hexadecimal numbers, preceded by the pound symbol #. Maybe the first and most challenging thing to understand about web colors is the hexadecimal format itself.

Regular counting is in a base ten format - or decimal (dec prefix meaning ten). In a base ten counting system you have ten single digit numbers, namely zero through nine. Once you get one past the highest number, a one is added to the tens place and the process starts over again. Easy - you probably learned this before you remember learning anything at all. Hexadecimal format, or hex for short, is a base sixteen counting system, which takes a little mathematical abstract thinking. In hex format you can count your way through sixteen numbers before reaching a double-digit number. Strange, huh? Because there isn't a single digit number above nine that we can easily type using standard keyboards, hexadecimal counting in HTML looks like this:

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

Then we get to the first double digit hex number, which even though it is written as '10', it represents the numerical value of sixteen. With regular decimal counting system, double digit numbers 00 through 99 represent one hundred different numbers. With hex, numbers 00 through FF represent 256 different numbers. To help illustrate hex numbers a little better, below is a decimal grid of numbers, and a hexadecimal grid of numbers.

Decimal Counting System


Hexadecimal Counting System


So with a double digit hex number you can signify 256 different numerical values. Maybe you've seen this number 256 before? It actually kind of helps explain why HTML Web Colors use such a strange counting system. Computer memory, including the memory that keeps track of colors on your screen, is stored on a perfectly square grid. That's why you get things like thumb drives and RAM in increments like 64, 128, 256, and 1024 (one gig). These are all squares.

As I mentioned earlier, when you designate a color in HTML, it's a pound sign followed by three sets of two-digit hex numbers. They end up looking a little something like this:

#3366CC

The first two digits are how much Red color is in this particular color (in this case, 33 out of FF), the second two numbers are the Green content, and the last two numbers are the Blue content. #000000 is black - completely void of color, and #FFFFFF is white, all the colors mixed together.

"Web Safe" Color Chart
and why "Web Safe" is in Quotes

A long time ago, when monitors didn't support gazillions of colors, there was only a very small amount of colors a monitor could display. Very early on all major web browsers and computer monitors decided to support a standard set of hex colors - namely any hex color that had a double digit for each color (like 33 or CC), and that these numbers were limited to 0, 3, 6, 9, C, and F. As it turns out, even this supposedly "Safe" set of colors wasn't represented exactly the same across all browsers and operating systems (this is why I use "Safe" instead of Safe). Even despite this, the "Web Safe" color set was born. This color set was used for so long that some browsers (and I think most browsers today) accepted shorthand colors.

For example, #36C is short for #3366CC

And even though monitors and video cards quickly were able to support gazillions of colors, the "Web Safe" color chart was still primarily used because, as it turns out, the 216 colors to choose from covered most of the design needs of web designers. It hasn't been until recently that web designers have felt secure enough to reach out and use HTML hex number's full 16,777,216 color capability.

In the next section, More Color Charts, I'll use JavaScript to output a "Web Safe" color chart, and two "Web Unsafe" color charts - the latter two of which have 4,069 and 16,777,216 colors.

Color Charts in your MIND

It's sometimes useful, if you are a web developer, to be able to spit out a hex color number and have it be in the ballpark of what you want, without referring to a color chart. There are a couple of ways to visualize this - this is at least what works for me:
  1. Remember: #RRGGBB
  2. White, Grays, and Black are just repetitions of one number. So a gradient from black to white would be #000000, #111111, #222222 ... #DDDDDD, #EEEEEE, #FFFFFF.
  3. Fully Saturated colors only use 0's and F's. Bright red is #FF0000, bright green is #00FF00, and bright blue is #0000FF. Yellow is halfway between red and green, so it would be #FFFF00, cyan is halfway between green and blue, which would be #00FFFF, and magenta is halfway between blue and red, which is #FF00FF
  4. From these super-saturated colors, if you want a darker color, replace the F's with lower numbers, like C, 9, 6, or 3 (like turning down a dimmer switch). If you want lighter colors, do the opposite - replace the 0's with higher numbers, like 3, 6, 9, or C (like increasing the intensity of a dimmer switch).
This works for brief color prototyping, but for a fully developed web color palette, a full color chart is helpful. When I started to learn about JavaScript, I realized that a simple script could cycle through all the different colors with a simple loop, and output them to a grid. This led me to start using JavaScript to output different Web Color Charts.

"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.

A better "Web Safe" Color Chart

Not being satisfied with existing "Web Safe" color charts online, I made my own! You can play with it below, or check it out here as a stand-alone page. Feel free to grab the source code, it has easy functions for both hovering and clicking that you can modify to fit your needs.
Hovered Color
 Clicked Color