The 216 Web-Safe Colors

The 216 Web Safe colors are the colors that any computer, using any operating system, running any browser will display accurately. You can use other colors but they will not always make your page look right on your visitors display. That's why these 216 colors are valuable. They always show up right on anyone's computer. The 216 colors are created by allowing each of the pixel colors (red, green, and blue) to be set at any one of six levels (6 x 6 x 6 = 216). Each color can be turned completely off, 00 or set up through 33, 66, 99, CC, or FF, which is completely on. Obviously these aren't regular base-10 numbers (the decimals, 0-9), they are hexidecimal numbers (base-16). All you need to know about them is that C is more than 9, and F is higher than C. What you need is a good reference so you can find the colors you need quickly, which means they need to be arranged well.

I have seen some of the weirdest arrangements of these colors: color wheels, hexagons, 6 columns with red and blue at top but green buried somewhere in the middle!?!?!? The last seems especially bizarre, but I've actually seen it on the web more than the others combined. All of these layouts are so confusing, it's ridiculous. Now it's got to be perfectly obvious to anyone who suffered through graphing in high school that three variables (like red, green and, blue) should be graphed on three axes. (x, y, and z) This means that the 216 Web Safe colors are most reasonably arranged in a cube.

I've displayed the Colors along the X, Y, and Z axes. Since the colors are always given in a standard order, RGB, I've assigned Red to the X axis, Green to the Y, and Blue to the Z. I've separted each layer enough that you can see all the colors in the layer, but otherwise, I've left them in the cube formation. Each layer you see has a particular fixed blue values. Each layer corresponds to the squares you'll see on the reference page sliced by blue values. This is the best way to get a feel for what the color cube looks like and visualize the underlying relationships. Good for understanding it is, good for finding colors it isn't. Hopefully you'll be more comfortable with the theory, but we recommend these other pages if you just need a reference.

Arrange by Color Values