triplecode/

Home | Philosophy | Awards

Projects: Prev | Next

Triplecode
Munsell Palette

Picking colors is not an easy task. It is definitely an art. But available software tools don't make the task any easier. This is, in part, because most color models (such as RGB, HSV, and web color palettes) are based on mathematical formulas which have little to do with how the human eye sees colors. For example, if you look at an RGB palette you'll see large areas of very similar colors, and then, in small areas, big color changes. (Ie. uneven color distribution.)

The Munsell system is different because it is based on how people perceive colors. At its core is a set of data from perceptual studies (done in the late 1930's) where people were asked to judge the differences in color pairs. The result is a data set which defines a perceptually uniform color space. (For more information on the Munsell color space, see this article [pdf] from the Adobe site.)

The Munsell Palette software on this page is based on software Triplecode principal David Young encountered while a student at the MIT Media Lab. But that software (originally written by David Small) was developed before The Web, was limited to use within a custom windowing system developed by fellow students, and only ran on high-end workstations. The updated version here uses the same Munsell data, but can be used on any computer that supports the Flash plugin. (Yay The Web!)

Instructions
Play with this tool to find the way it can work best for you. Notice that within a panel, the distance between colors along the same axis is perceptually similar. So if you pick every third color going down a column in the middle axis, you'll have a nice set of similar colors.

• Click on a color to get a popup menu that let's you save the color to the list below or recenter the palette.
• The popup menu also has a 'predict' choice. Use it twice, and you'll get a perceptually-matching list of colors that contains the two chosen colors.
• The most recently clicked-on color gets a soft highlight around it to help you keep track of where you've been. (2d view only)
• Roll over a color to see its hex value at the bottom right
• Use the zoom buttons to see more or fewer colors.
• Click on a saved color to recenter the palette on it.

To have the palette recenter on an arbitrary color: enter a color in the typein field at the top right, and then press the 'go' button. Enter colors as either RGB (values separated by spaces like: 255 12 3) or as hex (like ff00ac or 0xff00ac). The palette will recenter on the closest Munsell color match.

In the 2D view: the left panel contains colors that all have the same hue (with the X axis changing chroma, and the Y axis changing value). The middle panel contains colors that all have the same value (with the X axis changing chroma and the Y axis changing hue). The right panel contains colors that all have the same chroma (with the X axis changing value and the Y axis changing hue).

In the 3D view: the panels are arranged in 3D space. It gives a better sense of how they relate. Although, in this view, many color chips are obscured.

Known Problems
Please note that this is evolving software. It is provided "as is," with no warranty, and with no support. New features may be be added and bugs might be fixed. But no guarantee as to when that might happen. Here are some known problems:

• Some colors seem to visually 'pop'
• Lacks ability to scroll
• Slow
• popup.html doesn't seem to work in some browsers

The URL for this page is: http://www.triplecode.com/munsell

Plugin Required
This requires Macromedia Flash Player 6 plugin. Get it from Macromedia's Download Page »

Popup Version
Here is a version that pops up in a little window. This way you can have the Munsell Palette around while you work. Just bookmark this URL: http://www.triplecode.com/munsell/popup.html »

Links
Here are some Munsell and/or color related resources:
• Adobe on Munsell [pdf]
• Munsell Color Science Laboratory
• Bruce Lindbloom Uniform Perceptal Lab
• GretagMacbeth Conversion/Data
• EasyRGB
• Web Graphics
(Please send suggestions for other links.)