COLOR INTERACTION

Designing with color means controlling color contrast. How do colors interact with each other to make an effective design? This presentation touches on seven varieties of color contrast that can be manipulated in

COLOR INTERACTION

Color can be used to imply harmony or discord, flatness or depth. It can convey anger or joy. Color can control the movement of a crowd; fast food chains for instance will often use “hot” colors so diners do not stay too long. Color can be used to create space; the lighter a color in a room the larger the room feels.

COLOR AND LIGHT

In the late 1600’s, Sir Isaac

Newton split a beam of sunlight

into a range of many colors by

passing the beam through a

glass prism, This range of colors

is known as the solar spectrum.

COLOR AND LIGHT

Newton found that by passing the

mutliple colors of the spectrum through

a focusing lens and a second prism, he

was able to reconstitute the beam of

“white” light.

The visible portion of the solar spectrum

appears in the order in which they can

be seen in a rainbow.

So where is magenta?

infrared

red

orange

yellow

green

blue

indigo

violet

ultraviolet

THE HUE CIRCLE

When we think about color as something

we see in the world around us, a different

model than the spectrum is used. This is

the psychological hue circle. Red and vio-

let are no longer extremes, but part of a

smooth continuum.

One color in the hue circle is actually not

visible in the electromagnetic spectrum.

Magenta can only be acheived by mixing

red and violet wavelenghts together.

MAGENTA

THE HUMAN EYE

The way we see color is dependant on the physical nature of light and the physiological mechanisms of our eyes and brain.

THE HUMAN EYE

The receptors in the eye that process color are called rods and cones. Rods handle value (light and dark) while the cones handle hue. Rods work very well under low illumination, so we can sense value even in very low light. Cones on the other hand work best under high illumination. So it is more difficult for us to see color in dim light.

HOW DOES COLOR ENTER THE EYE?

We tend to talk and think about color as though it were a thing, an object; in reality color is a property of light. Objects themselves really have no color but do have the ability to reflect or transmit the spectral colors that make up white light.

An example of this is an object that

you perceive to be green…the object

is absorbing all the spectral colors

except green which is then reflected

to our eyes; we see the green object.

Black absorbs all the rays; white

reflects them all.

Designing with color means controlling color contrast.

How do colors interact with each other to make an effective design?

DESIGNING WITH COLOR

contrast of hue

contrast of value

contrast of temperature

complementary contrast

simultaneous contrast

contrast of saturation

contrast of extension

Every color has its own character. This character can be modified through alterations of saturation and value, but the most surprising and effective manipulations of color can be seen when colors interact with each other.This is color contrast.

VARIETIES OF COLOR CONTRAST

Colors exert an influence on each other. A color’s ex-pressive character can be changed by placing it in a context with other colors.

The greatest amount of Hue contrast is between the three additive primaries (red-orange, green and blue-violet.) These colors represent the pure wavelengths that are perceived by the red, green and blue cones in your eye. Any other combinations have a comparatively decreased contrast

Contrast of HueThis is really what it sounds like. The difference between colors in their most saturated state.

GREEN

BLUE VIOLET

RED-ORANGE

Henri Matisse

Julian Stanczak Willem Sandberg

Contrast of Hue

Dorlastan Color Trends for Spring / Summer 2006

Contrast of Hue

Contrast of ValueEach hue in its most saturated state has its own value. If we look at the hue circle it is clear that some hues are lighter or darker than others.

Value plays an important role in the way that colors interact. Value can be modulated by adding black or white to a pure hue. This is called tinting and shading.

TINTSSHADES

HUE

Contrast of ValueThis illustration places the 12 hues in relation to their relative value (found in the value scale on the left side)

Contrast of ValueThe Black dot represents the hue’s placement next to its relative value.

Look at the difference in character between the fully saturated yellow and the red which has been tinted to match that same value. Look at the fully saturated blue and its equivalent yellow orange.

Contrast of Value

Two similar paintings by Chaim Soutine with different value contrast

Contrast of Value

CavendishThe yellow necklace has a different impact in each picture. The impact is effected by changes of value and also hue.

Contrast of Value

Paul KleeAd Reinhardt

Contrast of SaturationIncreasing or decreasing saturation can be an effective way to contrast colors in a composition. Pure colors that are mixed with gray will yield desaturated colors, colors can also be diluted by adding white, black, or the color’s complement.

Contrast of saturation is most easily seen when the variations are executed in a single hue.

Richard Diebenkorn

Contrast of Saturation

more saturated colors less saturated colors

Contrast of Saturation

Walter Dexel

Christo & Jeanne-Claude

Contrast of Saturation

Paul Klee

Reem AcraPROMINENT COLORS

Colors are those from a haberdashery : Slate Gray,Pinstripe Silver and neutral tones accented withsurprise dashes of more vibrant, warm tonesINSPIRATION

A fusion of my travels to both romantic destinationsand sleek, urban citiesSIGNATURE COLOR

PomegranateCOLOR PHILOSOPHY

I want my customer to experience the drama of color,to use color to make a statement and to create anaura of excitement when she enters a room.

www.pan tone .com/sp r i ng2007

PANTONE 15-0326 Tarragon

Reem Acra

Reem Acra

Contrast of Temperature - cool/warmColors are said to be either warm or cool. Generally, yellow to violet in the hue circle are assumed to be warm colors while yellow-green to blue violet are thought to be cool colors. It is more accurate to say that colors are cool or warm in relation to each other. See the examples at right of temperature contrast within a range of red and a range of green.

Temperature Modulation Red

Temperature Modulation Blue-Green

The Horizontal axis contains the extremes of temperature contrast: Red & Blue-Green

Contrast of Temperature - cool/warm

Andy Warhol

A Cool Yellow and a Warm VioletA cool red (magenta) and a warm red

Andy Warhol

Contrast of Temperature - cool/warm

Claude MonetClaude Monet

Contrast of Temperature - cool/warm

temperature can alter the perception of space

This map borrows the temperature cues from

links of the Abilene network.

Complementary ContrastEvery hue has a complement. It exists across the hue circle, but, as we have seen, it also exists as an afterimage of that color. While the complement of a color appears as the color’s opposite, they also exert a kind of balance.

The pairs of colors and complements in the hue circle have very different effects. Note the variations of value, saturation and temperature contrasts between the primaries and their complements.

Complementary Contrast

Henri Matisse

Ernst Ludwig Kirchner

Bridget Riley

Simultaneous ContrastSimultaneous contrast results from the fact that for any given color the eye simultaneously requires the complementary color, and generates it spontaneously if it is not already present. By virtue of this fact, the fundamental principle of color harmony implies the rule of complementaries.

The simultaneously generated complementary occurs as

a sensation in the eye of the beholder, and is not

objectively present. It cannot be photographed. Simultaneous contrast may with reason be

placed on a par with successive contrast.”

- Johannes Itten

Simultaneous ContrastSimultaneous contrast is when one color is made to look like two. When one color surrounds another it effects that color by mixing in its after-image

The gray square on the left shifts towards blue violet (yellow’s compliment) and the gray square on the right shifts towards yellow (blue violet’s compliment). There is a hue shift and also a value shift which makes the gray on the left seem dark-er and the gray on the right lighter.

Simultaneous ContrastThe two grays are identical. The shift in hue and value is purely perceptual.

Simultaneous ContrastSimultaneous contrast can be affected by shifts in Hue, value and saturation.

Simultaneous Contrast Hue

The center color appears to change in hue

(from orange to yellow)

Simultaneous Contrast

Simultaneous Contrast Value

The center color appears to change in value

(from dark to light)

Simultaneous Contrast

Simultaneous Contrast Saturation

The center color appears to change in saturation

(from green to gray)

Simultaneous Contrast

Simultaneous Contrast

Joseph Albers Mattis Grünewald

Contrast of ExtensionThis could just as easily be called CONTRAST OF PROPORTION. What is the quantity a color compared to another color? One aspect of contrast of extension is tricky, what is the relative impact of one hue versus another?

Equal measures of red and green

A small area of red can have a great visual impact on a large field of green.

Contrast of Extension

Ellsworth Kelly Piet Mondrian

How many little blues reds and yellows does it take to balance out a BIG yellow shape?

How big does a blue rectangle need to be to balance out a yellow rectangle?

Contrast of Extension

Henri Matisse

the intensity of this yellow shape is enough to drag your eye away from the bright orange shape on the left side, despite its relatively small size.

Successive ContrastSuccessive contrast occurs when a color is viewed on one back-ground and then another in rapid succession.

BACK NEXT

BACK