Color Wheels

(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.)

Color wheel from Shake’s Colorwheel node. Note the red along +X and green to top-left.
Shake Color editor widget. Uses basically the same wheel plus extra widgets. There is an odd antialiasing issue around the border of the color wheel in the widget that is not present in the one generated by the node, so for some reason they are not identical, despite using the same layout and orientation

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.

The first version of my own color wheel widget generally matches up well with Shake’s. A difference between the two is not exactly zero. As near as I can figure, Shake and I use slightly different math for transforming between HSV and RGB color spaces.  The difference is what inspired me to pay more attention to the variations.
Nuke PLE Color Wheel Node. (Ignore the confetti – that’s just because I took the screen shot from the free demo.) Red still along +X, but green is at the bottom-left, so Nuke uses a vertically flipped color wheel compared to Shake.  As you rotate clockwise around the Nuke wheel, you get the same colors on the Shake wheel by going counter-clockwise.
The Nuke Color Picker. It uses a 70% value band around the color wheel so that you can always see the colors, and a ‘live’ inner wheel that darkens and lightens as you adjust the value slider.

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.

The Final Cut Pro 3-Way Color Corrector. These wheels have the biggest break from what we’ve seen so far. The colors go in the same clockwise/counterclockwise order as in Shake, but the orientation is such that Red isn’t on a major axis. Nothing specifically seems to be oriented to a major axis, but red has been rotated so that it is up and a little bit left. Also, the saturation falloff is no longer linear. It appears to be a quadratic falloff based on Saturation = Radius Squared. This results in a much larger area in the middle which is completely blown out and almost colorless.
Apple Color’s Primary Color Corrector. In contrast to the bright white blown out region of the FCP 3-Way wheels, the entire center of this color widget is the dark, neutral background color. The actual color is only visible at the rim of the wheel. We also have another new orientation. Colors are the same clockwise order as Shake, but rotated -90 degrees so that red is now situated at the +Y axis.
Screen shot of a later version of my own work.

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?

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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