I find the idea of sorting a set of colors in interesting ways. It’s very much a perceptual problem. Different people will sort a color palette in different ways.

“web” palette sorted by saturation. (Some of these examples are truncated for formatting, see the sortpal pages for fuller versions)

People organize colors differently. Lots of ways to sort them mathematically. Some map well to what people perceive as correct. Some do not.

web palette sorted by proximity in rgb colorspace

Sortpal is project to try to visualize what some of these different methods look like, and how they compare to each other. It shows a set of color palettes, sorted by the various attributes like it’s redness, or brightness, or saturation. For example, in the “red” row, the reddest colors are at the far left and decreasingly red colors to the right. The width of the color depends on the number of colors in the palette.

web palette sorted by redness

Different color palettes can be chosen, including the 216 “web safe” palette (wiki), the X11/css “named” colors (wiki), the xkcd color survey (xkcd color survey), a rough approximation of the spot colors often used in print, a Hilbert curve through rgb space (wiki), misc artistic palettes, etc.

The sort methods fall into a couple of sorts (ha!):

Sorting by one component of a color space, the most obvious being the red, blue, green values of RGB:

web palette sorted by red, green, blue respectively

Hue, saturation, and value (HSL and HSV) is another color space, that maps a lot more naturally to how people understand colors.

web palette sorted by hue, saturation, value, lightness, respectively.

Hue or Saturation are probably what most people think of as the natural way to sort colors.

Another approach is sorting by proximity in the 3d color space. The idea being to start at the origin, and find the closest colors in 3d.

Hue, Saturation, Lightness 3d

Hue, Saturation, Value 3d

Red, Green, Blue 3d

The code is up at github. No promises to it’s correctness or functionality.

Note that for the most part, all of the methods shown here are described as being one parameter sorts, but in some cases there are secondary and tertiary sorts as well (hsv3d, and chroma ) mostly just to stabilize the sorts.