Doughnut Color Picker

The color wheel is key to both understanding and applying the concepts of color contrasts developed in color theory. Visual artists have a long tradition in successfully applying these concepts. Integrating the color wheel model in a color picker reveals the full potential of color theory to its user.

On a side note: doesn't the circular alignment of hue values offer a much more balanced view compared to linear alignment in other color pickers?

By working a lot with photos I got used to adjust color values by hue, saturation and lightness. Therefore I feel most comfortable navigating in HSL space. After all, these are the dimensions humans perceive color naturally.

During my research I learnd that the order of the dimensions of the H-S-L model is not the same as the order to which stimulus humans are most sensitive for. Due to the physiology of the eye that's light, hue and saturation. This led me to the assumption the 2D-area of a color picker should represent hue and lightness.

The color pickers I got to know don't provide the full range of hue values. Instead the picking area is scaled down to a range of 255 or 240 values. That still leaves an awful lot of colors to choose from, but you can see on the color wheel that some colors have a smaller hue range than others. Yellow for example has a range from about 55° to 62°. That's seven steps. Leaving out almost 1/3 makes a huge difference there.

Color makes a different impression according to the dimension of the colored area. Many times I picked a color for a large area and it looked awful. The Doughnut Color Picker has the advantage that you can evaluate a certain color on a big and a small square when using the clipboard.

Using grey is part of the contrast of hue concept. Aligning color and non-color makes colors seem more brilliant. You achieve best results though by considering the luminance value of a certain color. For example by using grey with an equal luminance value or the inverse.

The luminance value can be calculated from the L value of the CIE-Lab color space. A disadvantage of the L value is the fact that there's a shift in values in terms of RGB grey. An L value of 54% for example results in a 50% value in terms of RGB grey. That's too much to ignore and not convenient if you quickly want to choose a matching grey.

By the way, before I read about color theory I didn't know about color luminance. I remember that I once tried to put white text on an orange background. After all the orange I chose had a lightness value of 52%. I changed to another background color because I felt there was not enough contrast. Today I feel stupid I didn't realize WHY there was not enough contrast. I'm happy the Doughnut Color Picker shows luminance values for the respective color.

Comfortable, isn't it?

I never liked having to click & hold the mouse button while choosing a color. It causes discomforting tension. Please test this effect with another color picker. We got so used to it that it's not obvious. I prefer much more to click when I actually want to pick a color.

The way the color picker behaves at the moment is like diving into color space, which I like. It wouldn't be too difficult to provide an alternative version which uses click & hold though. Send me a message if you think I should make an alternative version.

This is especially useful if look at the process of choosing color as a separate one within the process of composing. Save the results of your work in the application window made for the particular task and come back whenever you need to. This also makes it simpler to use a color palette you liked in upcoming works. You no more need to keep files of experimental compositions of which you just liked the colors.

Moreover, once you chose the colors you want to use you can quickly copy & paste the color information everywhere. It's not tied to an application.

Furthermore it makes it easier to experiment. Let's say you chose two colors and you'd like to compare the same two adjusted by saturation. With the clipboard feature you simply use another two containers and compare before and after.

There are many websites offering color options or providing an application where color is an important element. I experienced that you can't apply color in a satisfactory way if you don't have a good color picker. So from now on every time I'm on such a website I can open the color picker from my bookmarks and use color in a much more sophisticated way.

I also liked the idea of working with another color picker window by simply duplicating the browser window.

Furthermore an online color picker is a portable application. Use it wherever there's an internet connection without installing anything.

Update: the Permalink feature now let's you save the color palette of the clipboard by adding it to your bookmarks. This also makes it easy to share a color scheme with your friends and co-workers.