Introduction to Color Theory

Color Theory

Color Theory is a system of rules and guidance for mixing various colors in order to:

• Create Aesthetically Pleasing Blends of colour

• Produce Maximum Readability and Clarity

• Visually Stimulate and Draw the Eye

• Draw on Cultural Associations to Create Meaning

Why Learn Color Theory?

Many people choose not to consult color theory. They think, “Well, I’ve got a good eye for these things.”

The “good eye” for color may or may not be true based on who’s thinking it. . .

. . . but in order to justify your choices it is good to have some theory to fall back on. Otherwise, all you can say is, “It just looks right!”

The Foundation of Color

At its core, color is light.

Light is composed of many different colors and the various mixtures of light compose the colors that we can see.

Colours can be described by referring to its 3 characteristics: intensity (brightness)

value (darkness or lightness)hue (actual wavelength mixture)

Colors that can not be created by mixing other colors are called: PRIMARY COLORS

Primary Colors

Secondary Colors(colors made by mixing primaries)

Intermediate(Tertiary) Colors(colors that mix primary and secondary)

Taken Together . . . The Color Wheel!

Using the Wheel

The colors are arranged on the wheel in such a way that purposeful color choices can be made.

Choices of color combination depend on what you are trying to accomplish.

Such as:

• Contrast elements• Visual Blending • Attract or Guide the eye• Affect mood• Communicate feeling

Color Contrast

Contrast draws attention to the item that is most contrasting (or different) among a number of other design elements.

Therefore, you can use color contrast to draw attention to an element of your design that is more important, relevant, or immediately pressing.

Practical Example

Neither of these flyers is completely ineffective and both provide shape contrast with the text box.

But the orange box above provides a nice contrast with the blues and grays of the clothes rack.

The blue box here, however, is too similar to the clothes’ color palette.

Types of Contrast Possible Using Colour

• Value Contrast

• Simultaneous Contrast

• Intensity Contrast

• Temperature Contrast

Value Contrast

This is why black text on a white background is so popular and effective. There’s a high degree of contrast.

On the other hand, blue on black offer little contrast. An extended read of this combination could be painful.

• The more a color contrasts with the colors around it, the more easily visible that color will appear.

• How much black or white each colour contains is one factor that controls this contrast. Value contrast is created by placing darker colours next to lighter ones. i.e. tints

• This fact is extremely important when using different colored texts or elements on backgrounds and we need things to either blend or stand out.

Here strong value contrasts in the main

colours used within the work make the features of the face grab the attention

and convey a certain personality.

In this work different values of blue

contrast with each other and the

outlining.

Notice the strong value contrasts in the left picture as compared to the right. The visual effect is blander and less

eye catching.

“A Breeze at Work” by Sandy Skoglund uses value contrast to ‘hide’ the people in the work from immediate notice. The leaves

command our attention first.

This piece uses many tints and shades of natural colours.

Simultaneous ContrastBut be careful, even though colors may contrast they may not always work well for pairing elements, or text, with background.Simultaneous contrast is the visual effect created when one colour appears to ‘vibrate’ against another.

“Simultaneous Contrast” occurs when a color like red is fore grounded on blue, for example. Note how the text appears to slightly vibrate. This would get annoying really quickly.

But also be aware of extreme lack of contrast between your elements, text, and background choices.

Honestly, this is just painful. Do not make your readers struggle with this!

• Simultaneous contrast is most intense when the two colors are complementary colors. Complementary colors are pairs of colors, directly opposite on a color wheel.

• Yellow to orange and blue to blue-violet accentuate each other in van Gogh’s Café Terrace on the Place du Forum, Arles, 1888.

• EquinoxEquinox, Hans Hofmann, 1958. Note , Hans Hofmann, 1958. Note how the contrasting colors create how the contrasting colors create energetic forms, which Hofmann energetic forms, which Hofmann famously termed famously termed ““push and pull.push and pull.””

• Simultaneous contrast affects our Simultaneous contrast affects our sense (perception) of the color that we sense (perception) of the color that we see. For example, our perceptions of see. For example, our perceptions of red and blue flowerbeds in a garden red and blue flowerbeds in a garden are modified where they border each are modified where they border each other: the blue appears greener and other: the blue appears greener and the red, more orange. This is due to the red, more orange. This is due to the way our eyes work.the way our eyes work.

Leonardo da Vinci describes the simultaneous contrast of complementary colors, as follows: “Of different colors equally perfect, that will appear most excellent which is seen near its direct contrary: violet near yellow, green near red: because each color is more distinctly seen when opposed to its contrary than to any other similar to it.”

Here is a good example of use of

simultaneous contrast. Notice how the orange colours of

the sun vibrate against the blue, as does the yellow of

the boat and the red-orange islands

against the turquoise water.

Here is another example of

simultaneous contrast in use.

In this work some colours in the sky are a bit ‘off’ due

to how they vibrate against each other a bit

too much.

Intensity Contrast

• Each colour has its own brightness, or intensity, as well as value and hue.

• Some colours are naturally brighter than

others.

• This type of relationship between colours can be used to direct the eye through a work or draw it to a specific focal point.

• Intensity contrast is created when bright colours are placed next to dull ones.

Intensity Contrast

Which picture has greater Intensity contrast?

Temperature Contrast

Warm colours are colours which contain yellow or red in them. They make things appear closer.

Cool Colours are colours which contain blue in them. They tend to recede in a composition.

Temperature contrast is created when warm colours are placed next to cooler ones.

Using the Wheel

Warm vs Cool Colours

Warm

Cool

Not only do you have value

contrast happening here

but you also have warm vs cool

colours – temperature

contrast.

Colour Schemes

• Complementary

• Triadic

• Analagous

• Monochromatic

• Split Complementary

• Double Complementary

Using the Wheel

Monochromatic Colours

Compositions created using one colour on the wheel and its tints and shades.

These colors will provide the most pleasing blends.

Contrast is provided in various degrees.

Monochromatic Colours

Monochromatic Colours

Using the Wheel

Complementary Colors

Colors opposite from one another on the wheel.

These colors will provide the most visual contrast, particularly simultaneous contrast.

Contrast is the noticeable level of difference between two colors.

Complementary Colours

Complementary Colours

Using the Wheel

Analogous Colors

Colors positioned next to each other on the wheel.

These colors have very little contrast; therefore, they will provide harmonious blends.

Analogous Colors in Nature

Nature offers an excellentlook at analogous colors in action.

Question: what color offlower could be added tothis photo to provide astrong and attentiondrawing contrast?

Analagous Colours

Using the Wheel

Triadic Colour Scheme

Colors equidistant from one another on the wheel.

These colors will provide the most visual variety.

Triadic Colours

Triadic Colours

Using the Wheel

Split Complementary Colour Scheme

Colors on either side of a direct complement of a colour on the wheel.

These colors will provide the most visual variety.

Split Complementary Colours

Using the Wheel

Double Complementary Colour Scheme

Colors on either side of a pair of direct complements on a colour on the wheel.

These colors will provide the most visual contrast as double pairs of colours.

Double Complementary Colours

Color and Cultural AssociationColor’s often come with feelings, moods, and associations that you can draw from in your work.

For example, the color Red is largely associated with danger, aggression, stimulation, and excitement.

Red stop signs signify danger if you don’t stop, and stimulates the senses with excitement less you don’t see one coming up!

Color and Cultural Association

It’s an important to remember that these color associations do not come from the color itself. Without us to interpret it, red is simply light and doesn’t need an interpretive characteristic.

Because these associations depend on us, they can differ from culture to culture, and they can also change over time.

For example, purple use to be associated with solely belonging to royalty.

When designing, it’s important to consider your audience. The people viewing your composition may not share your same cultural values. In Western cultures, red means Stop! or Attention! In Asian cultures, red means good luck or good fortune.

Resources for Color Association

There are a number of sources that list and suggest color associations that are commonly agreed upon by many people.

A particularly interesting and useful one contains a number of fun Flash videos that illustrate these associations with music and animation.

Color in Motion