(This started as a post many years ago on an old blog. In those days it was fashionable to install every plugin on your self hosted word press instance, and then never update any of it, so naturally that blog needed to get taken down. A colleague reminded me of this in a conversation, so I decided to dig it out of an old MySQL backup since I don’t think anybody else on the Internet was ever bored enough to document this many color wheel widgets in various applications. At some point perhaps I’ll more actively revisit the topic with some screenshots of software from the current decade. At this point the post is mainly interesting for having documented long obsolete color wheels like Shake and “Apple Color” from the old Final Cut Studio.)
Have you ever noticed how many variations there are on color wheels? It’s basically a very simple idea. Different colors go around the edge of a circle. Different saturations go from the edge to the center. Most saturated is at the outermost edge of the circle. Easy, right? Couldn’t be simpler. So you’d think… While making a color adjuster widget for an application recently, I have been pondering them with more attention than I ever thought I would. Here are some well known examples of color wheels and color wheel type adjuster widgets… (Click images to get them full-sized, in all their utilitarian glory.)
This Shake wheel widget is ‘live.’ So, as you adjust the value slider, it will get darker or lighter. If value is set to 0, you will just see a big black square with no wheel in it, which can be counter-intuitive the first time you try to select a color.
For some reason, the wheel in the Nuke color picker uses Shake ordering for the colors, despite the fact that the color wheel node doesn’t. (It’s shown in thumbnail in the DAG view to the right of the color picker window in case you don’t believe me.) The button you click to bring up the color picker has an image on it with the same ordering as the node, despite the fact that this means the wheel on the button doesn’t match the wheel on the window it brings up. Also notable are the radius-circle and vector line in the color wheel pointing out exactly where the current selected color is.
That last one was inspired in part by the visual softness of the FCP wheels with their nonlinear saturation falloff, I am experimenting with a biased cubic falloff for the saturation in my color wheels. This results in a slightly smoother appearance than straight linear falloff, but the biasing prevents the center from being completely blown out, so you can always see what you are doing, even if you zoom in on the widget so you can’t see the fully saturated edges anymore, because you want very fine adjustments. It’s intended for a color adjuster for color correction, rather than a true color picker, so it wasn’t important to me to have the color of the clicked spot map precisely to the resulting color. Also new in this version is that the widget will paint itself with the selected color as the background, giving you a local, live preview as you adjust.
Personally, I think red along +X makes the most sense from a correctness standpoint. In mathematics, we define a unit circle such that this is the direction of zero degrees. In HSV color space, we define zero degrees as red. It seems like a simple, learnable convention. I can’t see why having red in some other direction would specifically be more intuitive or easier for the user, but I’m willing to be proven wrong if somebody has a good argument. Without that, I’ll stick to +X = red for reasons of comfort with the mathematics.
As far as order around the circle, the unit circle in mathematics goes counter clockwise from +X. In optics, we learn the Roy G Biv color ordering according the frequency of colors in the spectrum. Logically, we should match increasing frequency to increasing angle. Consequently, Orange should be next after red as you go counter-clockwise. This is a “green up” or “Shake” orientation. (And contrary to the most recent screenshot I have posted of my own widget. It’s still a work in progress…)
I therefore declare that a Standard Color Wheel ought to be red at +X, and green at top-left. So, why are there so many variations when it seems like there is a correct answer? I dunno. I guess a lot of these color wheels were made pretty much independently by people who weren’t particularly concerned about matching up with some other standard. Some may have intentionally wanted to differentiate themselves from existing color wheels that they had seen just for the sake of novelty. Most of the details are presumably now lost to time.
So, just from the apps that I had handy to check on, there are four different layouts for the colors, and four different saturation calculations for the middle. What do you prefer? Do you know of any other interesting variations on a simple color wheel? Is one or the other more intuitive or functional for you?