Color Theory

Lecture 2 Excerpt

Interactivity: Value

That's great for Barnett Newman, but how can the rest of us apply these concepts? Let's start by looking at how value and contrast interact with each other.

Study #1

Below, you'll see two large squares. But they're no ordinary squares. . .

The large black square appears to have a small light gray square in its center and the large white square appears to have a small dark gray square in its center. Actually, the small light gray square and the small dark gray are the same value: middle gray. You can see that when the two small middle gray squares are placed adjacent to one another, just below the large squares. Surrounding the gray square with black causes it to appear lighter than it actually is. Surrounded with white, the square appears darker than it actually is. Like magic!

You can even use value contrast to make an object bigger or smaller.

Value interactions are good to keep in mind when selecting colors. The color of the background can be more important than the color of the object itself. Let's add two green fish to the bowl:

In the first bowl, you can barely see the fish. To correct this, I made the fish a darker green in the middle bowl. This worked, but the fish appear small and dull. So I tried a different approach. Rather than changing the color of the fish, I changed the color of the water. The dark blue water (bowl on the right) makes the fish look big and bright.

Interactivity: Complements

Two complementary colors together have a powerful effect. They both appear brighter, more intense.

Study #1

In the example below, the small orange swatch within the large blue square seems brighter.

It's not more pure than the small orange square within the large white square. They are both at full saturation, as you can see by looking at the two small adjacent orange squares to the right. In other words, because of the contrast effect, the upper orange square appears to be a different color than it actually is: this time, the appearance of its saturation changes.

Study #2

Now turn your attention to this example.

To create an illusion that the two small orange squares are equal in saturation, let's dull the saturation of the square within the blue area. We'll make its color less pure, but because blue is its complement, the orange appears equal in saturation to the pure orange square within the white square.

Study #3

In this final example, we experiment with two squares with a dulled orange and place them in the same situation.

Now the swatch with the large blue square appears to be at full intensity, while the orange swatch below shows the true dullness. Adding just a small touch of a complementary color can stimulate a large area of color.

In this poster, Ikko Tanaka used an analogous color scheme. The blue, green, and purple are quite nice, but the small yellow eye steals the show. It gives the whole page snap.

You can see the same principle at work in Scottish tartans. The overall plaid patterns are based on analogous tones. Weaving in strands of the complement livens them up. It puts color in the kilt.

Interactivity: Neutrals

Now let's take a middle-gray swatch and see what happens when we surround it with fields of a different color. Take a few moments to look at the examples below, then read on.

Can you see how the appearance of each small gray square approaches the complementary hue of the color field it's placed in? The middle gray square appears more violet-ish when surrounded by yellow. It seems more blue-violet-ish when placed in a field of yellow-orange. When surrounded by violet, the square has a yellowish appearance.

Notice that not only does the hue of the same middle gray square seem to change, but also its value appears to change. Even though both are actually the same value, the violet-ish square appears darker; the yellowish square appears lighter. The upshot? We can make gray or any neutral color look different depending on what's surrounding it.

This theory is put to good use in fabric design.

This gray tweed might be dull, but the tiny specks of color give it a soft glow. Now let's explore some other interesting effects of color interaction.

 

Lecture 3 Excerpt

CMYK

If you look closely at a color photograph in any magazine or book, you'll see that it's made up of tiny dots of cyan, magenta, yellow, and black. These four colors blend together into a full spectrum.

When you prepare an image to be printed, you work in CMYK mode. Your image editing program will separate the image into four channels (one for each color). When the file is prepared for printing, a different plate is created for each color.

Cyan	Magenta	Yellow	Black

The paper will run through the press four times:

Yellow is printed,	then magenta,
then cyan,	then black, and the image is complete.

RGB

In Lecture One, we identified the three primary colors as red, yellow, and blue. These are the three colors you would use to create an artist's palette.

A computer uses a different set of primaries—red, blue, and green—RGB. Yes, that's right, yellow has been eliminated and replaced with green. It might comes as a surprise to learn that there is no yellow in a television tube or computer monitor. What we see as yellow is actually a mixture of tiny dots of green and red.

Step back and look at these red and green dots from a distance (don't step too far!) Strangely enough, they blend into yellow. So, there are fundamental differences between CMYK and RGB color systems. The colors are mixed in two different ways: additive and subtractive. First, let's explore the color on your computer:

Additive Mixture

RGB is an additive system, which means that when you add the three colors together, you get white. When none of the colors are present, you get black (or the absence of light).

On your computer, red, green, and blue combine to create white.

Say you've chosen a dark orange color, and you want a lighter version of it. You can add equal proportions of red, green, and blue to raise the value. To lower the value of orange, you would decrease the amount of red, green, and blue by the same amount. This is the basic principle of mixing additive light.

If this sounds a lot like the idea behind the color picker in your software program, you're entirely right! Computer imaging uses the RGB system (red, green, and blue) in which these colors are combined to increase or decrease the value of the colors that appear on your computer screen.

Subtractive Mixture

This is completely the opposite of how color mixes on paper. Paint colors and printing inks operate by the rules of subtraction. That's why when you mix two complementary colors together in painting, the result is grayed. If the three colors of the primary triad (red, yellow, and blue) are mixed together, the result is less color: in theory, black. That's why color on your computer always looks duller when you print it out.

You may be wondering why there is a K (black) in the mix when cyan, magenta, and yellow on their own create black. To print black with C, M, and Y, you'd need 100% of each one, and that's a lot of ink. Too much ink in printing can make a mess of things. Black ink is used instead to keep this from happening.

Color and Web Design

Colors on the screen are pure light. You are applying color in its purest, most intense form. The rich color you get on screen is a luxury, but sometimes, you may need to tone it down. It can be too glaring and overpowering. Here a few guidelines to keep your Web color under control:

 

Color continuity, or the way colors repeat and/or vary in a series, is important to consider in any multi-page document on the Web or in print. Let's take a look at how a designer achieved a nice continuity of color in this magazine layout.

Running Time: 2:25. Read the Transcript

Exercise 3 Excerpt

Travel with Color

In this lecture, you learned that working with color is about much more than simply choosing color combinations or values that are pleasing to the eye.

We learned that contrast is essential to making typography readable. We also learned that color is symbolic and can affect the way a viewer perceives a design. Color symbolism comes from the cultures in which we live, and certain color combinations are associated with other cultures or places.

True confession: I love to travel. And in this exercise, you'll use color to create a travel poster for the place of your choice. You'll need to start with some research on color tendencies in the place you've selected. And since your poster will also include type, I would like you to consider what you've learned about readability and contrast as you apply your chosen color scheme.

Directions: Consider the project brief below. Then use your digital imaging program to create each part of the assignment according to the stated requirements.

Project Brief: Travel Ad

In this exercise you'll design a travel ad. You can choose any country, any tourist attraction, any number of beach umbrellas or penguins.

The only limitation is no color photography (that would be too easy since the colors are already there). You can use a photograph as inspiration for your subject matter, just convert it to grayscale mode and then fill in the colors yourself.

The work you submit in this assignment will test your skill in the Sessions program standard for color. Please review the standard before you continue:

Don't panic if you can't draw—it can be simple. You can copy a rug pattern or a pottery design using fairly basic shapes, or even use all type.

If you would rather concentrate on color rather than designing the concept of the poster, you can use one of the posters below as a template. Click the poster that you like to download a full-sized image.

The dimensions of your final ad should be about 500 pixels wide and 800 pixels tall. Since your results will be viewed online, be sure to work in RGB color mode, not CMYK.

Start by researching the country or tourist attraction. What colors are symbolic of its culture and history? Consider the image you want to project: warm/cool, young/old, exciting/relaxing, or earthy/urban, to name a few.

Choose two to four colors to start with. Then fill in the rest of the palette by choosing different values of each color and/or different intensities of each color.

The name of the country should be clearly legible. Choose colors for the type and background with good value or intensity contrast.

For inspiration, check out this quick crit of an exemplary student work:

Save a PSD file of your finished version in Photoshop (or an AI if you are working in Illustrator) so you can edit it later if you need to. Then go to File > Save for Web & Devices and save it as a JPEG with a Quality level of about 70.

Lastly, have fun with this project!

Grading Criteria: What your instructor expects you to do:   Design a creative travel poster with color selections that reflect the place being advertised. Develop a color scheme that employs two to four base colors and different values and/or intensities of each. Demonstrate an ability to choose colors based on their symbolism and psychology. Apply typography using color that is legible and relevant to the subject matter. How to Post: Once you're done, go to the Dropbox for this exercise and attach your poster as a JPEG file, and include a brief comment. If you have a question before sending your completed exercise for grading, use the Send Mail area to contact your instructor. I look forward to seeing your work!