Have you ever seen a color picker widget anywhere which shows the entire spectrum of all possible colors in one single image? I mean, sometimes there are separate hue, saturation, brightness selectors, sometimes just two out of these three. The selection of the intended color always requires some interactivity by way of dragging some sliders, or clicking in an image which changes dynamically based upon the selected position in another image. If you have seen anything anywhere which avoids the above by showing all the colors in one single static image, please let me know. There are some clever attempts out there to minimize the number of clicks and the number of elements in the widget, but none of them includes both black and white and all the shades of grey along with all the colors in a logical manner in the same image.

The nature of this problem arises from the familiar difficulty we face in so many other things: there are 3 primary colors, but the computer screen has only two dimensions. We can create all possible colors by combining the three basic colors(red, green, blue) in various proportions, so the most intuitive co-ordinate system for building a color space would be a cube.  Black at the origin, white at the other end of the diagonal, and pure red, blue, green at the vertices nearest to the origin. Feels good, but try representing it on a non-interactive 2d computer screen without loss of information. In general, my test is: if it can be painted on a piece of paper without loss of information, its good.

Even when we have two separate widgets for hue and brightness, the hue widget allows for a lot of flexibility in design. This widget needs to show only the proportion of the 3 component colors in a 2d plane, not the actual values of each. Even with this additional degree of freedom, I have noticed that many applications do not deliver the right solution. A lot of them allow for all possible combinations of either of any of two colors from the three, but not various combinations of all the three colors simultaneously.

Here is one of my initial attempts at creating a complete hue selection image:

Now on to an attempt to solve the initial problem. We need to show all the hues in the above triangle, AND show them with various intensities from dark to bright, in the SAME image, with minimum discontinuity from color to color, brightness to brightness. This is what I got on the first attempt:

Useless, isn’t it? The discontinuity is extreme. Here’s my next attempt:

Much better, but the aspect ratio is pretty wierd. Here’s the next attempt:

This is the best I’ve come up with so far, although I acknowledge it is not even close to being end-user acceptable. The locality of similar colors is still too low. It even looks as if there are lots of duplicate regions or that the entire spectrum is not accounted for, but both of these are optical illusions. Nothing is duplicated, and everything is included.

If anyone has ever seen a better solution, please let me know, I’m all eyes. Meanwhile I’ll continue trying myself. The one direction I am thinking of going next is a non standard shape for the image. Maybe a spiral? A mobius strip? A fractal pattern? Sometimes I think a sierpinski gasket might be the key to the solution, but I can’t quite place how.