An unexpurgated color wheel – an interesting challenge

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:

Color Triangle

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:

Single Image with all possible colors

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

All colors

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

Image with all colors

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.


13 Comments on “An unexpurgated color wheel – an interesting challenge

  1. hahaa, man. i’m just working on the same project. no success yet, but i have a lot of ideas. my colleague suggested a mathematical approach, find point permutation that minimizes euclidean distance of colors. finding such a permutation is a pain, as there are extreme number of possibilities. i’m trying it with 4bit depth first, that is a total of 4096 colors. my first approach leaded to a random splatter of irregular blended shapes. strange, but i was able to pick approx colors with some search. tests continue.

  2. The images I’ve generated above are using 5bit depth, for a total of 32768 uniquely colored pixels, although my first attempt had been using 4bit. The only problem with 4bit is that the largest square image you can then generate is 64×64, which is pretty small. Although it would be easy to increase size by repeating some colors.

  3. I think that this is an extremely difficult question, since what you’re asking is “does there exist (possibly) 1-1 mapping of 3D on 2D that is uniformly continuous (in both directions), and possibly with some upper bound on derivation (again, in both directions)”. I guess that’s as close as we can get to “minimum discontinuity from color to color, brightness to brightness”.

    One thing I found quite interesting, thought I have no idea if it’ll be of any help to you, is the following paper:

    I’m quite sure that just as you write, “non standard shape for the image” will be required, but I fear that to get the “nearness preservation” that you’re going for, you’ll have to reach for Riemannian surfaces, or something similar, which in turn is not really 2D compatible, so again you’ll have to search for some mapping to plane.

  4. How do they do it at the paint store? IE display the chips?

    Maybe your trying to be too exact when you only need a “most relevant color”? In paintshop pro I use a slider to narrow or widen my selection of a color, what if that slider were automatically adjusted based on the amount of most relevant objects returned?

    I save my pictures as websafe, IE 256 colors, should I be moving to 256 million in preperation for the future?

    BTW wonderful demo and I see lots of use in our niche.

  5. somehting came up my mind after reading:

    my idea is to pick up your triangle-solution but to use a hexagon instead and color the 3 adittional vertices black. if you now add the extra color fade you should get all colors a screen can draw.

    well i dont have the time nor the muse to check it myself, but if anyone wants to try it out or knows wheather it works or not, id like to know 🙂

  6. I would like to inquire about whether you would give your permission for your impressive design to be reproduced (for educational purposes, with attribution). Please reply off-line to let me know how best to contact you. Thanks!

  7. “Paint” Edit Colors has a two step process in Custom Colors which addresses the initial color, and then a side bar, which addresses the black/white luminosity aspects of the color you select.

    The main custom color selector does show grayed versions of the colors, but does not address the extreme black and white aspects of the colors. The side bar does that.

    Maybe if the main color selector was much longer, it would be possible to have it all in one.

    The problem for me would be that you couldn’t get in tight enough on the color wheel to see the actual pixel of color that you want, hence for me the two step side bar works.

    Color gradations are infinite. How does one make a large enough color selector?? 🙂

    It’s like, how many grains of sand are on the beach?

    Have BFA and took many color classes. Color if fun, especially when you get into color “bending”, color vibrations and after images.

    There are also some meditative aspects of color. Staring at one color for a long time can result on eye brain coordination reception anomalies.

    Here is something else to ponder.

    How can one address the shiny, matte or irridescent aspects of finishes and color on a computer?

  8. One other thing–most people’s eyes see color differently per each eye. Try it yourself. Close one eye, and look, then close the other and look, then do it rapidly. You will see minor variations in colors from one eye to the other.

  9. here’s a rough attempts at expanding the color wheel in final cut pro

  10. Looks extremely interesting. You may be onto something here. Can you point out where in the picture is the combination of (dark-red + dark-blue + light-greeen)?

  11. I think perhaps what’s missing is an inverted version, (going from black at center to white in the distance), w/ a blended grayscale between them.

    “Can you point out where in the picture is the combination of (dark-red + dark-blue + light-greeen)?”

    In my attempts at finding the color you mention a combination of Dark Red + Dark Blue + light Green, the resulting color in photoshop is simply black

  12. here we go – granted – there’s not a pixel available at this resolution for every color. But this was a simple image to create in photoshop. Photoshop also allows you to create ‘actions’ – a series of commands in photoshop that will result in this image. There’s no reason it should be difficult to reduce the color band to it’s simplest representation – an action command – an equation, (a fractal), and then re-expand it into reproduceable image.

  13. “There’s no reason it should be difficult to reduce the color band to it’s simplest representation – an action command – an equation, (a fractal), and then re-expand it into reproduceable image.”

    Unfortunately the solution would be complete only when that step is done and accomplished, and a final picture demonstrated.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: