Getting that just-right color is part art, part science. We’ll show you the easy way.
| || || |
Here’s the situation. We have an academic schedule for a women’s college to design, and for a photo this straight-at-you, red-haired, freckle-faced model. The goal is to look fresh, alive and personal (no building-and-grounds shots), while conveying a sense that the program is serious and businesslike. A note of trendiness will be good. Color is involved in all of it.
No single visual element has more effect on a viewer than color. Color gets attention, sets a mood, sends a message. Working with color should be fun and it is! But what colors are the right ones? We all have favorites, but personal preferences are unreliably subjective. There’s more science to it than that.
The key is that color is relational. Colors don’t exist in a vacuum, but are always seen together and affect one another. To illustrate how, we’ll start from our photo, find its colors, relate them to others, and when we’re done, we’ll have a coordinated, message-making page. Watch:
1 Select colors from the photo
The photo is the foundation for our color choices. What’s here?—skin tones, red hair, blue eyes, blue jacket. Zoom close in on a photo, and if you haven’t done this before, you’ll be astonished at how many colors there are! First reduce the total to a workable number. Then with an eyedropper tool, work from the biggest color—the one you see most of—to the smallest. You’ll need contrast later, so pick up dark, medium and light pixels of each.
Work first on the big colors. These are the ones you see at a glance; her skin and hair colors and blue jacket. Then do the small colors—her eyes, lips, the highlights in her hair and soft shadows. You can see in this image a light side and a shadow side; it’s subtle, but pay attention. Finish each area before moving on. Sort your results by color, then each color by value (light to dark). Discard lookalikes. You’ll be thrilled by what you find.
2 Try each one on
Try the photo on a swatch of each color. (Actually do it; don’t guess. Color perception is affected by adjacent color.) The results are pretty, aren’t they? What’s fun is that no matter what your photo, the results will always coordinate attractively, because the colors you’re using are already there. This is a rule of design. Work with what’s in front of you. Don’t make stuff up.
Warm colors These are the warm colors—pinks, salmons, sepias, browns—of the red-haired model. The warmer colors make her look softer and more feminine. These colors would be good for a cosmetic message or a caring message.
Cool colors The cool colors—blues, mainly—make for a more serious, businesslike relationship, and convey a direct and to-the-point message. Note that as the values get darker, her face gets perceptually brighter and appears to rise off the page toward you.
3 Make a color palette
| || || |
Add colors to the colors! Pick any of the colors—let’s use this blue—and find its location, or at least its general vicinity, on the color wheel. We’ll call this the base color. We already know that the base color goes with the photo. Our job now is to find colors that go with the base color. Keep in mind that if type or other graphic is involved (pretty typical), you’ll need both dark and light colors for contrast. Possibilities:
| || || |
| ||First are the dark, medium and light values of the base color. This is a monochromatic palette. It has no color depth, but it provides the contrast of dark, medium and light that’s so important to good design. |
| || || |
| ||One color step either side of the base color are its analogous colors. Analogous colors share undertones (here, blue-green, blue, and blue-violet), which create beautiful, low-contrast harmony. Analogous palettes are rich and always easy to work with. |
| || || |
| ||Directly opposite the base color is its complement—in this case, the orange range. What the complement brings is contrast. A color and its complement convey energy, vigor and excitement. Typically, the complement is used in a smaller amount as an accent; a spot of orange on a blue field, for example. |
| || || |
| ||One step either way are the complement’s own analogous colors. This palette is called a split complement. Its strength is in the low-contrast beauty of analogous colors, plus the added punctuation of an opposite color. In this case, the blue would most likely be used as a small accent. |
| || || |
| ||In this case, the blue would most likely be used as a small accent. In every case and always, a color can be represented by any of its values. Dark blue, for example, can be combined with light teal (analogous) or medium orange (complement). |
4 Edit and apply
Set type and lay out the page, and now is time to make real choices. With so many beautiful possibilities, how do you choose? Think message. You’ll find yourself naturally favoring some colors. Don’t jump. Whether working alone or with a group, keep weighing everyone’s preferences against the original purpose, which is, what is this design to say? In this case, the goal is to have a look that’s serious, direct and businesslike, while feeling fresh and even a bit trendy.
Do any of the color choices shown here convey those qualities to you better than the others?
ALL BUSINESS Mid-range blue is everyone’s favorite color. What’s interesting here is that blue and orange are native to the photo, giving it excellent natural contrast. The blue background swallows her jacket, allowing her intense gaze to lift right off the page. Handsome and businesslike—and most likely to be chosen.
CASUAL Analogous to the blue—a step toward green—is teal, a beautiful color not in the photo. Its difference adds depth and vibrancy and relaxes the message somewhat; it’s trendier now, more approachable. Her eyes, which against blue looked blue, now look green. Type color, still light orange, is a soft contrast.
PRETTY One step the other way is blue-violet, another color not in the photo. Blue-violet is a shift toward red; the result is a slightly flatter image, because face, hair and background are now more alike. Blue-violet is a cool color normally associated with softness, femininity, and springtime (with undertones of freshness).
INTENSE The highlights in her hair carry this page; the blue accent lends contrast and depth. An unexpected focal point is the yellow headline, which seems cut out of the photo. Dimensionally flat, this mix is intense and engaging (and would win the design contest), but only a daring client would choose it.
SERIOUS This palette began in the deep red of her hair, and for an accent took two steps toward yellow. Her eyes and jacket, which on blue receded into the background, now stand in contrast. Note that the red in her hair is a mere highlight, but filling the page it acquires real weight. Serious, warm, draws the reader in.
This article is excerpted from Before & After, How to design cool stuff, Issue 31, Nov. 2002, and is reprinted here by permission. Copyright ©2003, Before & After magazine, all rights reserved.