By Tanya Riseman, August 2023

Load an image & see the pure hues in the color wheels.

Where is this web app, anyway?

https://swsrn.github.io/image-color-wheel/

which was developed using P5.js, a simple version of java script intended for making dynamic and interactive graphical web applications by students and artists. This web app (with its code) can also be accessed at

https://editor.p5js.org/risette/full/MGd3G6dnl

About this Web App

This web app loads an image and then creates two color wheels, one based on the modern Red-Green-Blue system and the other on the traditional Red-Yellow-Blue system. They are shown with 24 color bins each, as opposed to the usual 12 colors. The relative size of the pie-slices for each of the hues in the image reflects the portion of the image with that hue.

This web app is intended to be better than just eye-balling an image and guessing the appropriate color harmony (shown in the right hand side column).

Some parts of images can be tricky, because our brains interpret some things using prior knowledge. For instance, parts of the dark green foliage actually have yellow hues, as seen in the next screenshot. (Other images can be worse, with solid yellow and even orange hues for dingy foliage.) Also, the hues for flesh tones for people are always orange, while our brains think of them as basically neutral colors —- the desaturation slider is of no use!

Where are which hues?

In addition, the image can be viewed as pure hues, posterized by the 24 different color hues, either in the RGB or RYB systems. Select the “RGB Zones” or “RYB Zones” button.

Refine and select the corresponding color harmony

You can’t really make out the hues in very dark, very light, or desaturated regions. So adjust the three sliders to exclude those regions when calculating the color wheels. The regions affected will show up as black, white, and gray respectively.

Some diagrams of common “color harmonies” are along the right-hand edge, for the purposes of comparison with the color wheels. The color harmonies have been developed over time for the traditional RYB color wheel on the right.

Here, the color harmony is the complementary-analogous scheme, which is the fourth one down.

Color Clips option

If you check “Color Clips”, the regions excluded from the color wheel show up as blue, red, and green instead of black, white, and gray. Just like the exposure clipping warning on your camera!

An extra feature:

A five-stop grayscale zone image, inspired by Ansel Adam’s zone system, is also available. Select the “Gray Zones” button.

Saving

Want to save your analysis? Either make a screenshot or press the save button.

Development of the Color Wheel(s)

Wikipedia has a great page https://en.wikipedia.org/wiki/Color_wheel on the evolution of the Red-Yellow-Blue (RYB) color wheel, starting with Sir Isaac Newton in 1704. The purpose was to make sense of both the mixing of paints to reproduce colors and the order of the colors in the rainbow. The color harmonies organize and make sense of the use of colors in paintings and photographs.

In modern times, people realized that the Red-Green-Blue (RGB) color system (https://en.wikipedia.org/wiki/RGB_color_model) better represents the way that the eye actually collects light (with three different color cones). The RGB system is used in our monitors and light emitting screens and determines the selection of ink colors in printing.

Mixing pure colors

What is amazing is that using only three wavelengths of light reproduces most of the colors that we can see, even though the rainbow has a continuous range of different wavelengths of color. This image is of light painting with a red laser and a green laser and we see the result as a continuum from red to orange to yellow and then to green.

Pink is not a color

Moreover, we can see colors such as pink or magenta which are not even in the rainbow, because they are a mixture of two colors of light— red and blue. Sorry, Barbie, some people say pink is not a real color.

Selecting a Color Palette from a Color Wheel (for designers)

A related app from Adobe for selecting a color palette from a color wheel (using harmonies) or from an image is

https://color.adobe.com/create/color-wheel

You don’t have to log in to Adobe to get most of the features.