There once was a time went I went merrily about my business, designing graphics and color-schemes for Web-pages without any concern other than how small the resulting file was. I took full advantage of my (then) top-notch video card, offering hundreds-of-thousands of colors.

Then, one day, someone dropped this 216-color browser-safe palette on me.

I'll admit, it took some months of griping, and complaining about people who were slow at updating hardware, before it sank in that use of the 216 palette was a thing to be joined rather than beaten. This finally hit home the day I showed one of my sites to my parents, using my father's laptop. With all the dithering (replacing a solid color that the browser cannot display because of palette limitations with a similar color and a spattering of lighter or darker dots), it looked like my pages had broken out in some horrible skin disease.

I've grown to love the 216, as it helps to narrow down the choices for new color-schemes, but one problem has always nagged at my happiness. While I found the default swatches palette in Photoshop to be fairly well organized, I could not seem to track down a version of the 216 palette that made sense to look at. Frequently there seem to be two or more copies of the same color, which on closer examination (by viewing the RGB values) turn out to be slightly different. But these similar colors are generally scattered around the squarish swatch-set with what appears to be no rhyme or reason.

What I have attempted to do is to lend a bit of organization to the presentation of these swatches. Using a splash of remembered color theory I was able to find some patterns in the numbers and then set those patterns into the swatch order. While the resulting palettes (one is simply a more compact version of the other) are up to three times larger than the standard "Here are all the 216 colors, have fun" palettes, they offer the user a clear view of the colors as they relate to each other.

The first two lines of 'triangles' contain the six primary colors of the additive (Red, Green, Blue) and subtractive (Cyan, Magenta, Yellow) sets, as well as the six "K" values (Black to White). The "pure" color in each set fades to white in one direction and to black in the other. This presentation comes in handy when you are trying to blend a primary color into a black or white background.

Figure A: The first of six color blends (red and yellow) as they would appear in a more perfect Photoshop

The last six lines of 'triangles' represent the blending of an additive color with a subtractive color. Figure A shows how they would appear (if the Photoshop swatch palette was not laid out as a strict grid). The upper corner of the largest triangle is mostly Red with a little Yellow. As you move to the lowest point, Yellow replaces Red as the dominant color. Two neighboring colors on a vertical line combine to create the color touching both to the right. The triangles to the right increase in K value (density or "blackness"). Notice that the darker triangles offer fewer color choices, until you reach the last "triangle," which is just a single color.

Figure B: The 216-color palette (at 75% actual size)

As I mentioned above, these are 3 sets of two blended colors. Each of the RGB values is blended two CMYK values. Notice that the colors matched vertically are not blended. As a result we have three sets: Red with Yellow, Red with Magenta; Green with Yellow, Green with Cyan; Blue with Cyan, Blue with Magenta.

Figure B shows the new palette (216a.ACO).

Download this palette here: 216a.zip

After you download a file, unzip it and save the files into your Adobe/Photoshop/palettes directory. Then, click on the arrow at the left of the Swatches window (just below the "X" button) and click Replace Swatches from the pop-up menu. You can also choose Load Swatch, which will add whatever palette you choose to the swatch window.