Website Optimization - Automated Color Harmony Tools

Website Optimization is announcing it’s new "speed tweak of the week" illustrating how to 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.

Automated Color Harmony Tools

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.

For the full “Automated Color Harmony Tools” article, see http://www.websiteoptimization.com/speed/tweak/color-harmony/

Web Site Optimization
http://www.websiteoptimization.com

###