home links
all content projects tools archive

LAG-HTML "Web Safe" Color Chart




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. There is a great, in-depth article here that describes why "Safe" isn't the same as 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, which looked like this: #36C
Which was 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.

Continue to the next section, More Web Color Charts, to take a look at a couple more kinds of (less useful but easier to make) web color charts.


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