Chris Mueller – Visualmotive

Thoughts on maps and visualization

Sorting Colors

Color sorting using RGB, HSV, and YIQ color spaces

Color sorting using RGB, HSV, and YIQ color spaces

We recently needed to sort the pixels in an image by their color. On first attempt, we sorted by simple RGB values: first sort on R, then on G, then B. But it turns out there are many other possibilities for sorting colors. Every permutation of the RGB letters could be considered (RBG, GBR, GRB, etc.), not to mention other color systems HSV and YIQ.

To see all the color sorting possibilities, we wrote a Python script to try every permutation against a common set of source images.  Click here to see every color sorting option. Note that we use a Hilbert curve in the top set of images to provide better grouping of similar color values. The bottom set of images is linear and wrapped: left to right, then top to bottom.

Our goal was to find a sorting mechanism that looked pleasing to the eye, but of course the results are completely subjective.

  • For aesthetics, we prefer the YIQ sort. It highlights trends in value change, but information about hue variation is hidden and sometimes invisible.
  • To communicate more information about hues, HSV sorting is by far superior, but it lacks the pleasant gradient-effect of the YIQ sort.
  • RGB sorting proves inferior to HSV and YIQ, though the results can still be interesting.

Also worth noting: HSV sort is excellent for grouping colors of similar hues, but the IYQ and YIQ sorts also do this well and they can look cleaner than their HSV counterpart.

(with thanks to Steve Witham for his Hilbert curves in Python.)

Sep 14, 2009

Category: Visualization

Tagged: ,

One Comment

  1. Justin says:

    Nice post great to see all those sorting methods compared. I’ve been wondering how to sort some colour data for a while so it’s really useful, I didn’t even know YIQ existed!