Hack 12 Borrow Color Schemes from Nature

Sample real-world color to capture natural color combinations and schemes.

Using the Color Mixer panel is a rather artificial way of creating new color palettes [Hack #11] . The human eye is relatively poor at discerning color. A dark red set against other dark reds will appear darker if it is viewed around whites and may even appear black. This is to be expected because the human eye has evolved to discern relative differences between currently visible colors and not absolute color.

With this in mind, it is sometimes far easier to choose your color palettes by taking colors from images of real life. For example, Figure 2-9 shows the colors available in a knife blade and flower petals.

Figure 2-9. The scan of a knife blade contains a number of grays in a real-life context, and the flower scans provide real-life vivid colors

Both these images were sampled using an inexpensive flatbed scanner, which is far faster than looking up web-safe color swatches on the Web and less expensive than buying a color process swatch book!

You immediately see the trouble in trying to pick colors from either of these images, though. Adjacent pixel colors are highly variable, so if you try to pick a color from a yellow flower petal, you shouldn't be surprised if you actually sample a light green. To make selecting colors easier, we are better off making the images more friendly to the color picker. We can do this by using some Photoshop filters.

To reduce noise in the sampled image using Photoshop, select FilterNoiseDespeckle. This reduces the problem somewhat, but still leaves us with the problem of accurately selecting colors while maintaining the image as a natural palette. Luckily, we can get to this via a single filter. Select FilterPixelatePointillize. Your image will break up into a series of swatchlike daubs, looking much like an oil painter's paint swatch, as shown in Figure 2-10.

Figure 2-10. A section of the image before (left) and after (right) applying the pointillize filter

Save the image in a lossless format supported by Flash (such as PNG-32 or TIFF) and import the image into Flash.

In Flash, place the image off stage in a guide layer so that it doesn't get exported to the final SWF. Now you have an instant natural palette with colors adjacent to other colors with which it would appear in real life. To select a color from your naturally created swatch, simply use the Eyedropper tool, as shown in Figure 2-11.

Figure 2-11. Picking a color from the swatch bitmap using the Color Mixer and Eyedropper tool

Final Thoughts

Designing color schemes in Flash (and many other applications) can be a little hit and miss, because colors that you choose in isolation look substantially different when placed with other colors. By scanning in an image of a naturally occurring object or scene that already contains your proposed color scheme and then turning it into a swatch, you can make more accurate color selections because you are viewing the colors in context. The Gliftic utility can extract color schemes from an image automatically (http://www.ransen.com/Gliftic/Gallery/NaturalColors/Natural-Color-Schemes.htm).

—Inspired by the work of Joshua Davis and others