One of my recent projects involved creating some sort of a color picker. While I eventually used one jQuery for this purpose, I ran into a nice illustration of hexagonal color palette.

Download the high resolution version here.

In the hexagon, or hexagonal, palette color codes are abbreviated with only a single digit representing each pair of digits. An axis for each of the three primary and three secondary RGB colors radiates out from the pure white in the center to one of the points of the hexagon on the outside edge. Each axis is terminated on the outside border with an extra color chip showing the color that “governs” that axis, so it’s easy to find the appropriate axis. For instance, locate the blue chip at the very bottom, and follow it upward. First, you cross the shades of blue on the outside, then primary blue around the middle, then tints of blue toward the center, and, finally, white in the dead center. Tones are in the outside diamonds that span each axis.

The black-outlined larger hexagon of chips halfway out on the palette displays the hues of full saturation. Inside that hexagon are the tints/pastels, and outside are the more sophisticated tones and shades, with blacks and grays showing up in a repeated pattern on the outside border. Colors evolve as we rotate around the wheel, such that red blends into orange, and orange into yellow, and yellow into green, and so forth. It now becomes effortless to pick several colors that are related in some fashion to each other, such as a red, a dark red, and a pink. The hexagon palette is more artistically intuitive than most available palettes, and it’s mathematically correct as well. Each color code transforms into the code of the adjacent colors by following a mathematical progression.

Tweet