spacer Interactive Earth - web design, fine art, science curriculum and graphic design

Color Harmonizer

  spacer
spacer
spacer

Portfolio | Tools | Teachers | Artwork | Contact | Home

spacer
spacer spacer spacer spacer spacer spacer
 

 
Background

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.

Registering the Color Harmonizer

The full version is available for five trial uses. Once the five uses are up, you will be asked to register your version of the application.

Examples

Aster

This photograph of a purple aster provides a good example of how colors are harmonized and composed in nature. This color scheme is found in the color harmonizer.

 

Old-growth forest

Although the red-orange component is minimal, this photograph also displays a color scheme found in the color harmonizer.

 

Quilt pattern

This quilt design uses a color scheme found in the color harmonizer. The design itself was derived from a pattern found in GENESIS ONE.2.

 

Tips

Golden Section

This example demonstrates how the golden mean can be applied to a color scheme. The area of the primary color relates to the area of the secondary color by 1:1.618. The area of the resolution color relates to the primary color by 1:1.618.

In music, the resolution chord is essential to complete a cord set within a key. In the example above, without the resolution color the primary and secondary colors would not be complete. Only by adding the third color does the color scheme become resolved.

After you choose a color scheme, study it to determine if it is fully resolved. If there is a color that seems missing, tweak the saturation, brightness and/or hue of one of the colors until the color set seems complete.

 

 
spacer spacer
spacer
spacer
 Interactive Earth
 620 W. 13th Street
 Port Angeles, WA 98362
 (360) 452-4426
 Contact us  
Dove 
Developing interactive media since 1993
spacer
spacer spacer spacer spacer spacer spacer