Call (877) SITE-OPT (748-3678)

Automated Color Harmony Tools

Summary: Make your designs sing in four-part color harmony with these automated color harmonization tools. We review a joint effort by Microsoft and Tel Aviv University to automatically enhance the color harmony of an image.

Harmonic colors are color combinations that have special internal relationships that are aesthetically pleasing to the human eye. Professional web designers experienced in color theory can create color palettes that evoke different moods, appropriate to the product or service being sold.

Color pickers, web tools, entire books, and a great body of research have been devoted to achieving color harmony for aesthetic design. There are tools that suggest harmonic color combinations, but until now none offered an automated way of harmonizing the colors of an image.

This article summarizes the work of researchers from Tel Aviv University and Microsoft who have created a tool that automatically enhances the color harmony of a photograph or image, while remaining as faithful as possible to the original colors (Cohen-Or et al. 2006).

What Is Color Harmony?

Color Wheels and Harmonic Schemes

Art theorist Johannes Itten (1960), who co-founded the Bauhaus artistic movement, introduced a new kind of color wheel emphasizing hues and their relative position. He came up with 26 different combinations of harmonic color relationships, including monochromatic (a small slice of the color wheel of adjacent hues), complementary (two-color scheme on opposite sides), split complementary, split, and four-tone chord. Matsuda (1995) introduced a set of 80 color schemes by combining several types of hue and tone distributions. The authors use these expanded schemes in their color harmonization tool.

Harmonic colors are sets of two or more color relationships that have been found to be pleasing to the eye. They are described by their relative positions around the color wheel. Specifically, harmonic colors can be described by the degrees of area around the HSV color wheel and their angle(s) of separation (see Figure 1).

Each type is a distribution of hues that fall within the gray areas and define a "harmonic template." Harmonic colors are not particular colors but colors that hold a specific relationship by their position within a color space. So for a specific type of harmonic color template, the color wheel can be rotated while the radial relationship stays fixed, providing the artist with an unlimited supply of color sets to choose from.


color harmony templates on hue wheels

Figure 1: Color Harmonic Templates on the Hue Wheel

A collection of colors that fall into the gray areas is considered to be harmonic. The templates may be rotated by an arbitrary angle.

From "Color Harmonization," by Daniel Cohen-Or et al., ACM Transactions on Graphics (TOG), Volume 25:3. July 2006. Proceedings of ACM SIGGRAPH 2006, pp. 624 – 630 © 2006 ACM, Inc. Reprinted by permission

An artist can assign harmonic colors by choosing from a pre-defined set in a handbook, or by using an interactive tool. Once the harmonic palette is defined, the artist needs to recolor and redefine areas of their image. This can be time-consuming, especially for complex images. The authors describe an automated recoloring tool that can be used to speed up the process. With a tool such as this one, artists can freely combine multiple images and automatically shift colors of foregrounds and backgrounds to harmonize their colors.

The Psychology of Color

wso color scheme

Figure 2: WSO Analogous Color Scheme

The author's color scheme for Websiteoptimization.com.

You'll read that different colors and schemes evoke different emotions. Red and yellow are warm, while blue and green are cool. Red invokes action while blue is peaceful. Our dental clients tend to avoid red because it may invoke thoughts of blood, which they would like to avoid. For a concrete example I chose purple as the primary color for Websiteoptimization.com, due in part to the color of my book, and that purple is my favorite color. I chose an analogous color scheme rather than a complementary one (yellow and purple didn't work for me), see Figure 2.

Purple is a combination of a warm color (red) and a cool color (blue) so it can yield different interpretations. Purple is sometimes called creative or regal. Presumably this is because only the highest ranking aristocracy could afford the purple (and blue) die that 3,000 years ago came from processing many snails, the Murex. It took about 9,000 snails to make a gram of dye, so it was prohibitively expensive. Fortunately, no snails were harmed in the making of this website.

How the Color Harmonization Process Works

The program first creates a "hue histogram" describing the distribution of colors of a particular image (see Figure 3b top). Then it finds the harmonic template (Tm) that best matches the hue histogram of the image, based on a best-fit optimization technique. The template, along with the associated orientation angle of alpha (α) defines a harmonic scheme. The program then shifts the pixel values to fall within the harmonic scheme's boundaries around the color wheel. The shift is done to minimize the harmonic divergence with the optimum value of alpha (α) (angle of hues off the color wheel) across all possible harmonic templates. So the template with the lowest harmonic divergence wins.

color harmonization process

Figure 3: Overview of the Color Harmonization Process

(a) The original image. (b) The hue histogram of the image before and after harmonization. The top histogram refers to the original image, with best-fitting I-type template superimposed. The bottom histogram shows the hues shifted to match the template sectors. (c) The resulting harmonized image. Note that the harmonization tried to preserve the original colors as much as possible. (d) The user manually rotates the template (top), and the hues are shifted accordingly (bottom). (e) The result of the manual choice of template orientation.

From "Color Harmonization," by Daniel Cohen-Or et al., ACM Transactions on Graphics (TOG), Volume 25:3, July 2006. Proceedings of ACM SIGGRAPH 2006, pp. 624 – 630 © 2006 ACM, Inc. Reprinted by permission

Given a harmonic scheme they measure the color harmony of an image X thus (see Figure 4):

calculating image harmony

Figure 4: Calculating Image Harmony

"where H and S denote the hue and the saturation channels, respectively; the hue distance "|| . ||" refers to the arc-length distance on the hue wheel (measured in radians); hues that reside inside the sectors of Tm are considered to have zero distance from the template."

From "Color Harmonization," by Daniel Cohen-Or et al., ACM Transactions on Graphics (TOG), Volume 25:3, July 2006. Proceedings of ACM SIGGRAPH 2006, pp. 624 – 630.

Given an image X and a template Tm, the value of angle a 2 [0,2π] that minimizes the above expression defines the best harmonic scheme of X under the template Tm (see Figure 5).

optimizing angle alpha

Figure 5: Optimizing Angle Alpha

"Where H and S denote the hue and the saturation channels, respectively; the hue distance refers to the arc-length distance on the hue wheel (measured in radians); hues that reside inside the sectors of Tm are considered to have zero distance from the template." - From Cohen-Or et al. 2006.

The best harmonic scheme B(X) of a given image X is determined by minimizing the F function over all possible templates Tm (see Figure 6).

find best harmonic scheme minimize F

Figure 6: Finding Best Harmonic Scheme by Minimizing Function F

To find the best harmonic scheme of colors that matches a given image X, the algorithm iterates over all the harmonic templates at optimum angles to find the one that best fits the image. - From Cohen-Or et al. 2006

So the algorithm first finds the closest harmonic template (in this case a complementary I-type template) to the hue histogram. It then shifts the hues to match the template sectors (Figure 3c). Users can manually rotate the template to select other color combinations (Figures 3d & 3e). An accompanying video to the published paper on "Color Harmonization" shows the tool in action, complete with a popup of available harmonic templates users can choose from.

Other Color Considerations and Final Result

The authors describe the steps they took to preserve the original colors, spacial coherency (to avoid splitting contiguous regions), and density of hues in the original image. The final resulting image is automatically harmonized without requiring user intervention, although with split areas of contiguous color some user intervention is required (see Figure 7).

color harmonized

Figure 7: Color Harmonization Example

The researcher's algorithm changes the colors of the background image to harmonize it with the foreground.

From "Color Harmonization," by Daniel Cohen-Or et al., ACM Transactions on Graphics (TOG), Volume 25:3, July 2006. Proceedings of ACM SIGGRAPH 2006, pp. 624 – 630 © 2006 ACM, Inc. Reprinted by permission

Color Commentary

Color harmonization is usually a manual affair based on experience and intuition, assisted by color pickers and tools. A tool that automatically enhanced the color harmony of an image (or of a web page) would speed up the design process and allow exploration of different alternatives including combining different images into a unified whole. Unfortunately when we asked about the availability of this color harmonization tool, Microsoft responded that they currently had no plans to release it. Perhaps if enough people inquire, they would respond differently. Fortunately there are other tools available that help artists choose harmonious colors, although I know of none that automatically change images to harmonize colors.

Further Reading

Adobe Kuler
This free color harmony tool helps artists create harmonic color schemes. Kuler lets you browse other users' themes or create your own using a drag-and-drop color wheel and numerical settings. You can create and label your themes, and download them as Adobe Swatch Exchange files for use in Photoshop and other applications. Requires Flash 9. Adobe Systems, Inc. Nov. 2006.
Boyle, C. 2001, Color Harmony for the Web: A Guide for Creating Great Color Schemes on-line,
Gives a brief introduction to color theory, the color wheel, and the history of color. Bulk of book are 2 and 3-color color sets of harmonious colors in various themes, including friendly, bold, and calming. Rockport Publishers, Inc. 2001, ISBN: 1-56496-603-8.
Cohen-Or, D., Sorkine, O., Gal, R. Leyvand, T., and Y. Xu. 2006, "Color Harmonization,"
This paper describes the automatic color harmonization tool co-developed by Tel Aviv University and Microsoft researchers. Automatically shifts the pixel values of a given image or combined images to harmonize the colors according to harmony templates and offset angles around a color wheel. To achieve natural-looking results the algorithm strives to preserve the original colors of the image, spacial coherency of contiguous or same-colored areas, and the density of hues. Unfortunately, according to the researchers the tool is not yet available. ACM Transactions on Graphics (TOG), Volume 25:3, July 2006, Proceedings of ACM SIGGRAPH 2006, pp. 624 – 630, http://doi.acm.org/10.1145/1179352.1141933
Color Matters
Has an introduction to color theory on site.
DeGraeve, S. Color Palette Generator
Enter the URL of an image and this interactive tool gets a color palette that matches the image.
Matsuda, Y. 1995. Color Design.
Asakura Shoten. (in Japanese).
Itten, J. 1997. The Art of Color: The Subjective Experience and Objective Rationale of Color (revised edition)
New York: Van Nostrand Reinhold Company.
Jensen, K. Color Blender
Choose a preferred color and color blender comes up with a matching palette. Free interactive web-based service.
Kaiser, S. 2007, Color Tools
A wide variety of color tools, swatches, reference charts, and software.
Tigercolor ColorImpact
Interactively choose color schemes with this application, website includes color theory section. For Windows.
Tipling, B. 2006, Color Tool 2.0
AJAX-powered interactive color picker tool with a drag and drop interface and real-time changes shown on the page. By Bjorn Tipling.
Whelen, B. (1998) Color Harmony,
A handbook of harmonic color schemes in full color of course. Schemes include magical, energetic, and professional. Rockport Publishers, Inc. 1998, ISBN: 1-56496-066-8.
Zuffi, S. 2006 Readability Tool Survey
This interactive web-based tool measures thresholds for readability of colored text on a colored background. The University of Milano-Bicocca and ITC-CNR is currently conducting a controlled psychophysics experiment to determine this threshold, as described in HPL-2005-216. Concomitantly, the same experiment is being conducted also on the web. The purpose is to determine if uncontrolled psychophysics experiments conducted on the web yield the same predictions as those conducted under strictly controlled conditions. Please help the researchers collecting data by participating in the online test at http://daedalus.itc.cnr.it/readability if possible, with as many repetitions as you can without getting fatigued. The results will be published at the conference Image Quality and System Performance IV, part of the IS&T/SPIE 19th Annual Symposium on Electronic Imaging: Science and Technology, to be held 28 January–1 February 2007, San Jose, California, USA.

By website optimization on 16 Jan 2007 AM

Copyright © 2002-2013 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: August 26, 2013.

Follow us on: Twitter, Google+, Facebook, Linked In