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?
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.
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
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.
Given a harmonic scheme they measure the color harmony of an image X thus (see Figure 4):
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).
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).
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 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.
- 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,
- 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.