Color Tutorial

THE BASICS

Color has three basic qualities: hue, saturation (purity), and value (lightness or darkness). By adjusting saturation and value, we can force any combination of colors into an effective color scheme. The first quality, that of hue, is shown in the color wheel:

Color Wheel

This is the traditional, pigment-based wheel. Though ProShow uses colored light, not paint, this is the wheel most of us are familiar with, and it will work for us just as well as a wheel based on colored light.*

The wheel isn’t in the least mysterious. If you’ve ever mixed paint, you know that if you mix red and yellow, you’ll get orange. Mix in half again more red, and you’ll get red-orange. If you keep going, mixing in ever more red, you’ll eventually end up with a smooth gradient between red and orange. You can see a miniature version of this in ProShow’s color editor where a circle of colors surrounds the center triangle.

The single most important part of the color wheel is the concept of opposites or complements, colors that complete each other. These are the colors that, when mixed, produce a hue containing all colors. There are only three basic or primary colors–yellow, red, and blue–and if we mix them, they all cancel each other out, leading to gray. If we mix actual paint in this same way, we’ll get a blob that looks like mud because paint simply isn’t pure. (I made my first mud blob in kindergarten. It was quite disappointing.)

Why are complements so important? It’s because they’re used to reduce a color’s saturation. You can tame pure red with a dab of green or add a spot of yellow to violet to soften the latter. Using saturation levels plus value adjustments (light to dark), you can make any single color look good with any other color. You can even turn that strong Christmas combination of green and red into something sophisticated enough to wear to a queen’s coronation.

*Note: The wheel we’re using is for “additive color” where adding one color to another creates a third color. ProShow uses “subtractive color,” which refers to all colors being absorbed (subtracted from light) by a surface except for the one we see, the one reflected back at us. These two systems don’t argue with each other in the least. They’re simply two different ways of looking at the same thing.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

SATURATION & VALUE

Saturation or the purity of a color is represented by RGB numbers in ProShow:

Yellow = 255, 255, 0
Red = 255, 0, 0
Blue = 0, 0, 255
Green = 0, 255, 0
Magenta = 255, 0, 255
Cyan = 0, 255, 255

255 indicates full intensity of a color, and 0 indicates no color at all, but you know what? You don’t really need this information. All the information you need is what you get by watching what happens when you edit a color…

Add a color solid, choose to edit it, and then click in the bottom right corner of the triangle to get the purest (most saturated) red possible. Slowly slide the little circle up to the top, making sure the circle is butted up against the right side the whole way. No matter how light that red becomes, it’s still pure red. Go back down to the bottom right corner and move to the left, making sure the circle is up against the bottom line. No matter how dark, it’s still nothing but red, a red with the lights turned low to be sure, but red nonetheless. The relative lightness or darkness of a color is called its value.

Click inside the triangle on a spot that isn’t up against any of lines. The result is a red that isn’t quite so red anymore. It becomes duller and duller the closer to the left line you go until it’s completely desaturated, no red left at all. It’s gray.

So, you increase the value of a color by going up the right side, you decrease its value by going left across the bottom, and you alter its saturation or intensity everywhere else.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

COLOR SCHEME PRIMER

For ProShow purposes, we need bother with only four basic types of color scheme.

Monochromatic: This is the single-celled amoeba of color schemes. Choose any values (lightness, darkness) or intensities (saturation) of a single color, and the result is a monochromatic scheme.

Monochromatic:
Monochromatic

Analogous: These are colors that are related, all of them having one color in common. For instance, yellow, chartreuse, and green all contain yellow and are, therefore, analogous. On the color wheel, if you choose any of the twelve colors that are right next to one another, you’ll have an analogous scheme.

Analogous:
Analogous

Complementary: Complementary means “complete,” and in the world of color, it means that if you add the chosen colors together, all existing colors are in the mix. Red and green are complements because, if you stir them together, you have all three primaries: red plus the yellow and blue that create green. Any two colors directly opposite each other on the color wheel are complements such as yellow and violet, blue and orange, or red and green. Complementary schemes can be eye-popping when the colors are pure, but they can be surprisingly subtle when saturation is lowered or when darkened or lightened.

Complementary:
Complements
Subtle:

Complements-2

Triadic: If you choose 3 equally spaced colors on the color wheel, you’ll have a triad that, like complements, include all possible colors. The three primaries are a triad. So are blue-green, red-violet, and yellow-orange. Just like complementary schemes, triadic schemes are jolting when the colors are fully saturated, but they can be quiet when saturation is low or when very light or dark.

Triadic:
Triad
Quieter:

Triad-2

There’s also a scheme called a “tetrad” – four equally spaced colors – but that might be going above and beyond the call of slide show duty.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

THOUGHTS ON CHOOSING A SCHEME

You have a nice photo collection that you’ve organized logically according to time, idea, subject, or anything else that gives them a sense of ordered flow. You’ve used just enough special effects to keep everyone awake, but the show looks like every other show you’ve ever built. Is it possible you’ve forgotten color?

You want to select a color scheme that reflects the feeling of your show. Let’s say you’ve been forced into building two shows simultaneously: one for a child’s 1st birthday and the other for a memorial. Believe it or not, you can use exactly the same colors for both. Let’s look at a triad: blue, yellow, and red. Enough color to choke an elephant, right? Not really. It’s not the colors that count; instead, it’s the quality of those colors:

Basic triad:
Basic Triad

Young child’s birthday:

Birthday Child

For the birthday, the colors are merely lightened into the pastels most often associated with babies.

Memorial:
Memorial

Memorials are solemn occasions requiring dignity from the three colors. Blue and red were darkened, and yellow was lightened, while all three were somewhat desaturated. The yellow was softened enough to create a “bridge” between blue and red.

There are the traditional associations such as red and green for Christmas, white for brides, and pink and blue for little children, but beyond that, we have psychological (and physical) reactions to color. Yellow feels happy, red invigorates, and blue is peaceful, but it goes even beyond that into the personal realm. For example, I can’t see red and white together without remembering my mother’s pretty gingham dress during long-ago happy days. Maybe for you it’s blue and green or maroon and gray that set you off on a mental journey. Choosing colors that make you feel good to work with is always a bonus.

Think about general color associations, your personal ones, and also how the colors make you feel when choosing color schemes to represent the idea of a show. Edit the colors, lightening or darkening them, adding or reducing saturation, and also shifting which colors are next to which other colors until it all feels right. Your eyes, your memory, and your heart will tell you when it’s right.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

COLOR SCHEME FINESSE

If you can adjust a complementary or triadic color scheme, you can finesse anything that lands in your lap, so let’s begin with a complementary tough guy:

Complements

Below are three solutions to this high-contrast scheme, all three using saturation and value to calm the natives.

Solution 1: The green was slightly desaturated and then lightened considerably. The red was merely desaturated slightly, giving it a darker look. Contrast is maintained, but it’s no longer gaudy. How about a red background with green captions, frames, and decorative elements?

Complements Finessed 1

Solution 2: Below, both the green and the red were given equal desaturation and lightening – to the eye, that is. Every color has its own unique qualities, and so 50% desaturation in one color may look more or less intense than the same percentage of desaturation in another color. Squinting severely when you look at the colors will show you if one color is overpowering another. This is a feminine scheme, perhaps good for Mother’s Day.

Complements Finessed 2

Solution 3: The green was desaturated about halfway, and the red was almost completely desaturated and raised in value to a pinkish cream color. This could reflect springtime in show.

Complements Finessed 3

♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦

Let’s tackle an over-the-top triad:

Triad

Taming a triad is no different from taming complements except that you’re working with 3 colors, not two.

Here’s the same triad toned down with a lot of desaturation plus darkening the yellow and lightening both the red and blue. My opinion? This scheme belongs in a throw pillow, not a slide show.

Triad Finessed 1

Let’s try again…

Triad Finessed 2

Amazing, isn’t it, that these are the same 3 colors? The yellow and red were desaturated and lightened until they were nearly neutral, while the blue was only slightly desaturated and then darkened. Can you see a modern-looking show with blue bars dividing the screen into sections for each photo?

♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦

Analogous color schemes are so much easier to adjust than the devils above. Here’s a fully saturated analogous scheme suited to joyful occasions like birthdays:

Analogous

Raise the values of all 3 colors into the pastel range, and the birthday colors become baby colors:

Analogous Finessed 1

Below are exactly the same colors, this time with an earthy look. The yellow was desaturated a bit and darkened a lot, the chartreuse was both desaturated and darkened slightly, and the green was lightened slightly. Perhaps suited to a nature show.

Analogous Finessed 2

♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦

Monochromatic color schemes are godsends. They almost always work, and they’re so easy to use. You probably don’t need to see more than a couple simple examples, so first we have a straightforward scheme built of a single blue, only the values altered:

Monochrome 1

Here it is again, the 3 blues toned down with slight desaturation and the values changed so the blues go from very dark to very light. Sometimes you want brilliance, sometimes you don’t.

Monochrome 2

♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦

There are no rules for finessing a color scheme, but if you pay close attention to how you feel when looking at color combinations, you’ll know when your adjustments have hit the mark. They’ll just plain make you feel good.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

BALANCING COLOR

Place identical bowls on each side of a balance scale, and the sides stay level, but if you fill one bowl with midnight blue and the other with pale lavender, the blue side will sink. This is because, visually, dark blue “weighs” more than lavender.

Dark colors–those closer to black–are heavy, and colors closer to white are light.

What does this mean when creating color schemes? It means you don’t want, for example, a dark brown on the top half of the screen and a delicate mint green on the bottom. Visually, the brown is too much for the green to support, lending a top-heavy look:

Half Brown-Half Green

If you invert the setup, muscle-man brown has no trouble keeping feather-weight green aloft:

Half Brown-Green Inverted

But what if, darn it all, you need that brown on top, perhaps as a backer strip for a caption? If you reduce the brown from a boulder to a pebble, there will be enough green to lift it up. There’s no mathematical formula for figuring this out; it requires adjusting proportions until it simply “feels” right:

Brown-Green Balanced

Balance is also affected by warm versus cool colors. For instance, red is an in-your-face color, while blue politely keeps its distance. Since pictures say such things better, here’s blue struggling to support red:

Red on Top

By reducing the amount of red, in this case again adjusting the proportions for a caption strip, you can see how red can be tamed:

Red Caption Strip

∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞

If you’re a beginner trying to balance colors, here’s an extremely temporary rule until you no longer require such things and can break any so-called rule with flair:

Dark, intense, or hot colors go on the bottom or in lesser amounts elsewhere.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

COLOR TIPS, TRICKS, & USELESS FACTS

Find a fabric with a pleasing color scheme, pick one of its colors as primary, pick another for a secondary or supporting role, and pick a third for small accents. It’s a constant technique used by interior designers.

Speaking of interior designers, page through decorating magazines for color scheme inspiration.

Watch professionally produced commercials on television. They’re chock full of ideas for color schemes devised by professional artists.

Just because we’ve come to associate pink and blue with babies doesn’t mean these are our only choices. Choose any pastel you want. Break tradition.

Think about the entire slide as a framed photo, one with a narrow inner mat in one color and a wide outer mat in a second color. By playing with color solids beneath your photos, you can develop a color scheme to carry through an entire show.

If all the photos are black-and-white, add color for spark. Try this: Place a black-and-white photo on the default black background. Change the background to white. Now change it to a deep, rich color such as burgundy or forest green. It might convince you to use color.

Don’t be tempted to match colors in each individual slide to each photo. The show will lose its glue. Instead, find a color scheme that works with a majority of the pictures, switching which colors are primary and secondary to blend better with each photo. If you include a fairly neutral color in the scheme, this chore might be easier.

Once you’ve settled on a color scheme, add solids in those colors to a temporary slide, moving the solids so you can see each of them. Click on that slide to bring it into the main preview whenever you need to use the eyedropper to choose a color.

Take extra care with text color. As much as you want the text to stand out, you don’t need overpowering color. Captions are there to be read, not necessarily admired. Make them attractive but readable. (Don’t use medium blue text on black, not ever.)

“Simultaneous contrast” is an interesting phenomenon. It occurs when colors are placed side-by-side and seem to throw their complements into each other. Look at the illustration below. Are the gray squares different? No matter what your eyes say, the squares are the exact same gray.

Simultaneous Contrast

Probably useless facts:

For a whopping 46 years, the Crayola company produced a box of only 8 colors: red, blue, yellow, green, purple, orange, brown, and black. Not until 1949 did they introduce the 64-variety box, which is also when the white crayon was born. I’ve often wondered if the years without variety was caused by a lack of white.

Long ago and far away during college days, I took a course called “Color and Light.” One day a student brought in a large white board and stood it upright. Poking through the white board were two light bulbs, one blue, the other red. He darkened the room, and then had a blindfolded volunteer stand in front of the board, arms held out straight as if reaching for something. When the blue light was turned on, the volunteer’s arms spread noticeably. When the blue light was turned off and the red was turned on, the arms came together. Repetition with different volunteers made no difference, their reactions being 100% the same. Conclusion? Blue light relaxes (arms spreading); red light causes tension (arms drawing together).

We don’t just see color; we feel it too.


Advertisements
Published on April 16, 2011 at 12:18 pm  Leave a Comment  

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s