Color Harmonizer

Full Window


The Color Harmonizer is designed to emulate basic music theory principles to produce a harmonious color scheme. It uses the I, IV, V Progression to produce a 'key' of color 'cords'. Of course, there is a great variety of color combinations that will produce balanced color sets, but this tool will get you started developing a color scheme for a design project. And as with the various keys in music, each color set emits a different emotional feel.

Since design and illustration are nonlinear rather than sequential in their organization, a good composition of the three harmonic colors will be essential to a good design. Consider using the golden mean (1:1.618) to compose the colors.

Using the Tool

First, move the main scroll bar to choose the primary color within your color scheme. This may or may not be the color with the most surface area in your design. It is simply the color that is intended to be the 'leader'. Next, adjust the brightness and saturation for each the primary, secondary and resolution colors.

The offset allows you to change the location of the secondary and resolution colors with respect to the primary color. The I, IV, V Progression is represented by the offset values of Progression 1. If you find interesting offset positions (progressions), please e-mail them to Interactive Earth and include a name for it and an example of its use. If it seems appropriate and functional we will add it to the dropdown list of progressions.

At the bottom of the viewing area, a window displays a draft composition of your three color choices. The preferred alternative is Comp #1, where the central square represents the focal primary color, the lower right square represents the secondary color and the background color represents the resolution color. Press the Comp button to toggle through the six alternatives compositions.

Additional color "Key Notes" found within the color scheme are available at the bottom-left of the harmonizer. These colors (in music, like notes within a key) can be used to accent your design, but the brightness and saturation for these cannot be modified with this tool.

Hexadecimal values of the colors are displayed. Move your cursor over the accent colors for their hexadecimal value to appear below them.

Compare final colors with a Pantone color guide to create designs for process printing. If using these colors for the Internet, remember to choose web-safe colors.

You may also press Ctrl + Alt + Prnt Scrn to capture the colors to the clipboard and paste into your design or image manipulation software (such as PhotoShop) for color extraction by a color picker. The right and left arrow keys will toggle the main scroll bar. Right-click if you wish to zoom into the harmonizer.

Use the Preset buttons to store your favorite color schemes. Click once to set a preset. Double-click to clear a preset.


Point Horizon
Too Far to Wander