Color Theory
Color theory encompasses a multitude of definitions, concepts and design applications. All the information
would fill several encyclopedias. As an introduction, here are a few basic concepts.
The Color Wheel
A color circle, based on red, yellow and blue, is traditional in the field of art. Sir Isaac Newton developed the
first circular diagram of colors in 1666. Since then scientists and artists have studied and designed
numerous variations of this concept. Differences of opinion about the validity of one format over another
continue to provoke debate. In reality, any color circle or color wheel which presents a logically arranged
sequence of pure hues has merit.
PRIMARY COLORS
Red, yellow and blue
In traditional color theory, these are the 3 pigment colors that can not be mixed or formed by any
combination of other colors. All other colors are derived from these 3 hues
SECONDARY COLORS
Green, orange and purple
These are the colors formed by mixing the primary colors.
TERTIARY COLORS
Yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green.
These are the colors formed by mixing one primary and one secondary color.
Color Harmony
Harmony can be defined as a pleasing arrangement of parts, whether it be music, poetry, color, or even an
ice cream sundae.
In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates
an inner sense of order, a balance in the visual experience. When something is not harmonious, it's either
boring or chaotic. At one extreme is a visual experience that is so bland that the viewer is not engaged. The
human brain will reject under-stimulating information. At the other extreme is a visual experience that is so
overdone, so chaotic that the viewer can't stand to look at it. The human brain rejects what it can not
organize, what it can not understand. The visual task requires that we present a logical structure. Color
harmony delivers visual interest and a sense of order.
In summary, extreme unity leads to under-stimulation, extreme complexity leads to over-stimulation.
Harmony is a dynamic equilibrium.
Some Formulas for Color Harmony
There are many theories for harmony. The following illustrations and descriptions present some basic
formulas .
A color scheme based on analogous colors
Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellowgreen, yellow, and yellow-orange. Usually one of the three colors predominates.
A color scheme based on complementary colors
Complementary colors are any two colors which are directly opposite each other, such as red and green
and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the
leaves and several variations of red-purple in the orchid. These opposing colors create maximum contrast
and maximum stability.
A color scheme based on nature
Nature provides a perfect departure point for color harmony. In the illustration above, red yellow and green
create a harmonious design, regardless of whether this combination fits into a technical formula for color
harmony.
Color Context
How color behaves in relation to other colors and shapes is a complex area of color theory.
Compare the contrast effects of different color backgrounds for the same red square.
©Color Voodoo Publications
Red appears more brilliant against a black background and somewhat duller against the white background.
In contrast with orange, the red appears lifeless; in contrast with blue-green, it exhibits brilliance. Notice that
the red square appears larger on black than on other background colors.
Different readings of the same color
©Color Voodoo Publications
If your computer has sufficient color stability and gamma correction (link to Color Blind Computers) you will
see that the small purple rectangle on the left appears to have a red-purple tinge when compared to the
small purple rectangle on the right. They are both the same color as seen in the illustration below. This
demonstrates how three colors can be perceived as four colors.
Observing the effects colors have on each other is the starting point for understanding the relativity of color.
The relationship of values, saturations and the warmth or coolness of respective hues can cause noticeable
differences in our perception of color.
Illustrations and text, courtesy of
Color Logic and Color Logic for Web Site Design
Color Voodoo Publications
Color Basics
Color is the perceptual characteristic of light described by a color name. Specifically,
color is light, and light is composed of many colors - those we see are the colors of
the visual spectrum: red, orange, yellow, green, blue, and violet. Objects absorb
certain wavelengths and reflect others back to the viewer. We perceive these
wavelengths as color.
A color is described in three ways:

by its name

how pure or desaturated it is

and its value or lightness.
The Color Wheel
Although all reds - pink, red, and brick are different hues distinguished by their
chroma, intensity, saturation, and value.
Chroma, intensity, saturation and luminance are inter-related terms and have to do
with the description of a color.

Chroma: How pure a hue is in relation to gray

Intensity: The brightness or dullness of a hue. One may lower the intensity
by adding white or black.

Saturation: The degree of purity of a hue.

Luminance / Value: A measure of the amount of light reflected from a hue.
Intensity
Those hues with a high content of white have a higher luminance or value.
Shade and tint are terms that refer to a variation of a hue

Shade: A hue produced by the addition of black.

Tint: A hue produced by the addition of white.
Shade & Tint
These terms refer to color groups or types:
Primary Colors: Colors at their
Secondary Colors: Those
Complementary Colors: Those
basic essence; those colors
colors achieved by a mixture of
colors located opposite each
that cannot be created by
two primaries.
other on a color wheel.
mixing others.
Monochromatic Colors:
Analogous Colors: Those
Variations of shades or tints of
colors located close together
the same hue.
on a color wheel.
Color Relationships
A color triangle (sometimes a color wheel) is a visual representation of the mixtures
achieved by combining colors, and their relationship to one another. Using a color
triangle is a good way to quickly understand the relationships between colors, or to
estimate the final outcome of blending colors.
The Painters' color triangle is the set of colors we would
use in art class. This is the color system with which we
are most familiar - those colors we learn about as
children. The primary hues are red, blue and yellow.
The Printers' color triangle is the set of colors used in the
printing process. The primaries are magenta, cyan, and
yellow.
Nine-part harmonic triangle of Goethe begins with the
printers' primaries; the secondaries formed are the
painters' primaries; and the resulting tertiaries formed
are dark neutrals.
Color Systems
Available color systems are dependent on the medium with which a
designer is working. When painting, an artist has a variety of paints to
choose from, and mixed colors are achieved through the subtractive
color method. When a designer is utilizing the computer to generate
digital media, colors are achieved with the additive color method.
Digital media presents some problems when attempting to reproduce
compositions in a printed format. Since digital designs are generated
using the RGB color system, colors used in those designs must be
part of the CMYK spectrum or they will not be reproduced with proper
color rendering.
Subtractive Color
When we mix colors using paint, or through the printing process, we
are using the subtractive color method. Subtractive color mixing
means that one begins with white and ends with black; as one adds
color, the result gets darker and tends to black.
The CMYK color system is the color system used for printing and is
an example of the subtractive color method. The colors used in the
printing process during reproduction are cyan, magenta, yellow, and
black.
CMYK Color System
Additive Color
If we are working on a computer, the colors we see on the screen are
created with light using the additive color method. Additive color
mixing begins with black and ends with white, meaning that as more
color is added, the result is lighter and tends to white.
The RGB color system is an example the light primaries and creates
RGB Color System
color with light. Percentages of red, green, & blue light are used to
generate color on a computer screen.
Working With Systems
The Visible spectrum consists of billions of
colors, a monitor can display millions, a high
quality printer is only capable of producing
thousands, and Web browsers are limited to
216 cross-platform colors. Reproducing color
can be problematic with regard to printed,
digital media, because what we see is not
what is possible to get. Although a monitor
may be able to display 'true color' (16,000,000
colors), millions of these colors are outside of
the spectrum available to printers. Working
within the CMYK color system, or choosing
colors from Pantone© palettes insures proper
color rendering.
Color on the Web
The Web brings another level of constraint regarding the use of color.
Not only is there a difference in monitor quality and resolution, but
there are only 216 browser safe colors today. If colors outside of the
Web safe palette are used on a Web page, how they render is
determined by the users system platform (Mac or PC), and the
browser used to access the page. Internet Explorer and Netscape
render colors differently. To insure accurate rendering across
platforms & browsers, working within the browser safe palette is
essential.
For more information, visit: Death of the Websafe Color Palette?
FrontPage© Color Picker
Color & Contrast
Every visual presentation involves figure-ground relationships. This
relationship between a subject (or figure) and its surrounding field
Yellow text on a white
background or
(ground) will evidence a level of contrast; the more an object
contrasts with its surrounds, the more visible it becomes.
blue text on a black
background, are difficult to
When we create visuals that are intended to be read, offering the
viewer enough contrast between the background (paper or screen)
and the text is important. Text presentations ideally offer at least an
read due to the low level of
contrast between figure
and ground.
80% contrast between figure and ground. (Black text on a white
background is ideal.) If there is not enough contrast between figure
and ground, a viewer will squint to view the text, causing eye
some color combinations,
fatigue.
such as blue and red,
An occurrence known as 'simultaneous contrast' may happen when
opposing colors are placed in close proximity to each other. Text
cause illusions when
positioned together
may appear to vibrate, or cast a shadow. Eye strain and fatigue will
result if a viewer focuses on a document displaying similar
properties for an extended time period.
A color wheel is a visual representation of colors arranged according to their
respective relationship to each other. Most often a color wheel begins with
primary and secondary hues, then displays a chromatic bridge between
analogous colors. The color circle can be divided into ranges that are visually
active or passive. Active colors will appear to advance when placed against
passive hues. Passive colors appear to recede when positioned against
active hues.

The Color Wheel
Most often warm, saturated, light value hues are "active" and visually
advance.

Cool, low saturated, dark value hues are "passive" and visually
recede.

Tints or hues with a low saturation appear lighter than shades or
highly saturated colors.

Some colors remain visually neutral or indifferent.

Advancing hues are most often thought to have less visual weight
than the receding hues
Complements
We look at a color wheel to understand the relationships between colors. Not only are they positioned in such a way
as to mimic the process that occurs when blending hues, they also occupy position across from their complement.
To call those hues in direct opposition to each other "complements of each" other is appropriate. Complementary
colors bring out the best in each other. Green placed against purple makes each color more vibrant than when alone.*
*Bachman's (a local Minneapolis florist) uses this to their advantage by wrapping their plant & flowers in purple paper.
Not only does the paper highlight the greenery of the plant, but it has become part of their branded image.
Itten's Contrasts
Johannes Itten was one of the first people to define and identify strategies for successful color combinations. Through
his research he devised seven methodologies for coordinating colors utilizing the hue's contrasting properties. These
contrasts add other variations with respect to the intensity of the respective hues; i.e. contrasts may be obtained due
light, moderate, or dark value.
The contrast of extension
The contrast of saturation
The contrast of light and
Also known as the Contrast of
The contrast is formed by the
dark
Proportion. The contrast is formed by
juxtaposition of light and dark values and
The contrast is formed
assigning proportional field sizes in
their relative saturation. Shown as a
by the juxtaposition of
relation to the visual weight of a color.
monochromatic composition.
light and dark values.
This could be a monochromatic
This could be a
composition.
monochromatic
composition.
The contrast of complements
The contrast of warm and cool
The contrast of hue
The contrast is formed by the
The contrast is formed by the
The contrast is formed
juxtaposition of color wheel or
juxtaposition of hues considered 'warm'
by the juxtaposition of
perceptual opposites.
or 'cool.' This is often the easiest contrast
different hues. The
to achieve perceived three dimensional
greater the distance
depth due to advancing & receding
between hues on a
characteristics of most warm colors in
color wheel, the greater
relation to cool colors.
the contrast.
Simultaneous contrast
The contrast is formed when the
boundaries between colors perceptually
vibrate. Some interesting illusions are
accomplished with this contrast.
After Images
What we learn from the relationships evidenced by a color wheel is that
every color has an opposite. Every color has both a perceptual opposite, as
well as a color wheel opposite. Without a color wheel, it is still possible to
find the opposite of a color, this is due to a phenomenon of our eyes.
As mentioned before, color is light. Colored objects absorb and reflect
different wavelengths. Color is seen by the human eye because of the two
light receptors - rods and cones - located in the retina of the eye. Rods and
cones vary in sensitivity to different colors and light, and they convey the
color of light to our brain.
When our eyes are exposed to a hue for a prolonged period, the rods &
cones become fatigued. You might notice this if you are reading something
on colored paper, and then look away - you often see the inverse, or
complement, of the image.
This occurrence can be advantageous if you are seeking the opposite, or
contrast, of a color. This may be dismaying to a viewer if presented with
prolonged exposure to colored screens or reading materials. Every color
has an opposite, and although individual's perceptions do vary, the range of
after images seen is consistent.
Take the After Image Test
Stare at this image for at least 20 seconds. When finished, click here
After Images
What you see here is a called an after image. This may be VERY faint; if
you don't see anything, try again!
People see the opposite colors, or a negative image because staring at one
color for an extended period will fatigue the eyes rods & cones.
To view the image most people see, click here.
These are the after image colors many/most people will see. There is a
constancy with after images as people see images within the same general
hue families.
Color Combinations
Planning a successful color combination begins with the investigation, and understanding, of color relationships.
Using a color wheel and a template, the relationships between colors are easy to identify.
Complementary
Split-Complementary
Double-Complementary
Relationship
Relationship
Relationship
those colors across from
one hue and two equally
two complementary color
each other
spaced from its
sets
on a color wheel
complement
Analogous Relationship
Double Triad Relationship
those colors located
three hues equally
adjacent to each other on
positioned
a color wheel
on a color wheel
Color Proportion and Intensity
When colors are juxtaposed, our eyes perceive a visual mix. This mix will differ depending on the proportions of
allocated areas.

The color with the largest proportional area is the dominant color (the ground).

Smaller areas are subdominant colors.

Accent colors are those with a small relative area, but offer a contrast because of a variation in hue,
intensity, or saturation (the figure).

If large areas of a light hue are used, the whole area will appear light; conversely, if large areas of dark
values are used, the whole area appears dark.

Placing small areas of light color on a dark background, or a small area of dark on a light background will
create an accent.

Alternating color by intensity rather than proportion will also change the perceived visual mix of color.
Proportion and intensity studies
Colors of the complementary relationship shown above.
colors of a comlementary
colors reassigned with
color intensity and
color intensity and
relationship assigned
proportions allocated to
proportion modified -
proportion modified - the
equal proportion
dominant and
Using tints and shades of
whole area displays a
subdominant areas
the original colors results
medium value with
in a moderate level of
saturated accents
contrast with accents of
highly saturated color
Colors of the double triad relationship shown above.
colors of a double triad
colors reassigned with
color intensity and
color intensity and
relationship assigned
proportions allocated to
saturation modified - the
saturation modified - the
equal proportion
dominant, subdominant,
whole area displays a low
whole area displays a
and accent areas
level of contrast
low/moderate value
Shade & Tint Color Wheel
Using a color wheel divided into various shades and tints is one method of easily identifying possible options for
color schemes. The split complementary relationship shown in this example presents many possible combinations;
shown are a few:
Note: if you're working with a web safe palette, view this Flash site: www.mundidesign.com/webct/webct.html to
preview your selections!
Contrast & Dominance
When creating a composition - either something freeform, or a more text based layout, a determination for the final
impact of the whole presentation needs to be identified. Is your intent to craft a vibrant, attention grabbing ad, or a
presentation with a low, or more moderate level of contrast?
These decisions concern what is known as the dominant elements of the design. The dominant element may be
classified as either "contrast dominant" or " value dominant." Designs that evidence contrast dominance or value
dominance are then sub-divided into low, moderate, and high contrast, or light, medium, and dark value categories.
Examples of Contrast Dominance
low contrast
moderate contrast
high contrast
The contrast level of a composition changes with the range of luminosity between the chosen hues.
Examples of Value Dominance
light value
medium value
dark value
The value of a contrast changes with an incorporated hues' relative saturation.
Color Theory in Print Media
Looking to examples from existing graphics found in print media, we find evidence of color theory implementation.
Each of the examples demonstrates a color wheel relationship with respect to incorporated hues, an example of the
Itten's color contrasts, and illustrate use of dominant elements.
Stoli Vodka
Split-complementary relationship
primary field of purple, subordinate color of red,
accent hue of green & light blue
Itten's contrast of hue
Medium/dark value
Moderate/high contrast
Matisse Cut-out
Complementary relationship
primary field of blue, subordinate color of black,
accent hues of yellow, white, and red
Itten's contrast of complements
medium value
high contrast
Olive Oil Ad
Split-complementary relationship
primary field of blue, subordinate colors of yellow &
orange, accent hue of green & light blue
Itten's contrast of hue or contrast of complements
medium value
moderate/high contrast
Color Theory on the Web
Color use and implementation can be readily transferred to the Web. Looking at these examples found on the Web,*
once again we find evidence of color theory implementation. Each of these site examples demonstrates a color wheel
relationship with respect to incorporated hues, an example of the Itten's color contrasts, and illustrates the use of
dominant elements of design.
Web Site: www.gravis.com
Split-complementary relationship
primary field of analogous violet hues, contrasting accents of green &
orange
Itten's contrast of hue
medium value / moderate contrast*
*Note that the use of the neutral field of gray dilutes the overall contrast of
the page, whereas in the following example, the use of full values
increases the contrast of the visual plane.
Web Site: www.treelogic.com
Complementary relationship
primary field of cyan, contrasting accent of red orange
Itten's contrast of hue or contrast of complements medium value/ high
contrast
Web Site: www.ingenta.com
Split-complementary relationship
primary field of yellow, subordinate color of blue-green,
accent of orange
Itten's contrast of hue or contrast of complements lightmedium value/ moderate contrast
Web Site: www.neuemedia.com
Split-complementary relationship
primary field of purple, contrasting accents of red orange and
cyan
Itten's contrast of hue or contrast of complements medium
value/ moderate-high contrast
Web Site: www.smithandhawken.com
Analogous relationship
primary field of desaturated yellow, contrasting accents of desaturated
orange and green
Itten's contrast of hue medium value/ moderate contrast
Web Site: www.compendiumdesign.com (html version)
Triad relationship
primary field of orange, subordinate contrast of blue-violet, and contrasting
accent of green
Itten's contrast of hue medium value/ moderate contrast
*Note: these examples are for educational and illustrative purposes only and I have no known association with any of
the respective companies. Please seek out the individual company's site for additional information relating to their
products or services.
Color Resources
Links to other sites (links will open in new window.)
Information about color/color theory:
http://www.colormatters.com/entercolormatters.html
http://www.xplane.com/xblog/color/
http://www.creativepro.com/story/feature/6858.html
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhess/html/hess08142000.asp
Herman Miller knowledge base article (PDF file: 717k)
http://www.hermanmiller.com/CDA/Whitepaper/index/0,1254,c75-k5,00.html
Information about color systems, history & sciences:
http://www.colorsystem.com
Flash site - little slow to load, but a good interactive tutorial:
http://www.poynter.org/special/colorproject/colorproject/color.html
Check to see how a site appears to someone with a color deficit:
http://www.vischeck.com/vischeckURL.php3
Preview your HTML color choices:
http://www.mundidesign.com/webct/webct.html
Color Mentors:
Munsell
http://www.munsell.com/
http://www.adobe.com/support/techguides/color/colormodels/munsell.html
The Fauves
http://www.nga.gov/feature/artnation/fauve/index.htm
The Bauhaus (Itten, Albers, others)
http://www.chrissnider.com/academic/bauhaus/pages/people.html
Itten
http://members.ozemail.com.au/~sylviavdlogt/Itten.htm
http://www.bauhaus.de/english/bauhaus1919/unterricht/unterricht_itten.htm
http://members.tripod.com/~FroebelWeb/web2018.html
http://www.the-artists.org/ArtistView.cfm?id=8A01F6A6%2DBBCF%2D11D4%2DA93500D0B7069B40
Albers
http://www.the-artists.org/ArtistView.cfm?id=8A01EF1A%2DBBCF%2D11D4%2DA93500D0B7069B40
Do you know of additional links? Send them my way, and I'll add them to the list.
Resources:
Search engine for topics related to art & design
http://www.wetcanvas.com/my/apexec.pl?etype=odp&snippetfile=odpsnip3.txt&passurl=/Arts/Visual_Arts
Find information about an artist - this is an extensive list with links to articles, biographies,
books & imagery. Much information is free - including a limited selection of artwork; additional
information available with membership.
http://askart.com/
Bibliography
Note: although some of these books are out of print & difficult to find; try a College or University library.
Albers, Josef, Interaction of Color, New Haven, Yale Universtiy Press, 1963.
Birren, Faber, Color Psychology and Color Therapy, First Edition, New York, McGraw-Hill Book
Company, 1950.
Birren, Faber, Light, Color, and Environment, Chicago, Van Nostrand Reinhold Company, 1969.
Bothwell, Dorr, Notan: The light-dark principle of design, New York, Reinhold Book Corporation, 1968.
Kueppers, Harald, The Basic Law of Color Theory, New York, Barron’s, 1982.
Mahnke, Frank, Color, Environment, and Human Response, Van Nostrand Reinhold, Detroit, 1996.
Miller, Mary C, Color in Interior Architecture, John Wiley & Sons, Inc., New York, 1997.
The Minneapolis Institute of Arts, Matisse, Minneapolis, Minneapolis Institute of Arts, 1994.
Norman, Richard B., Electronic Color, Van Nostrand Reinhold, New York. 1990.
Pile, John F., Interior Design, New York, Prentice-Hall, Inc., 1988.
Pile, John, Color in Interior Design, McGraw-Hill, New York, 1997.
Sharpe, Deborah, The Psychology of Color and Design, Chicago, Nelson-Hall, 1975.
Swirnoff, Lois, Dimensional Color, Birkhauser, Boston, 1989.
Image Credits
Matisse cutout. The Minneapolis Institute of Arts, Matisse, Minneapolis, Minneapolis Institute of Arts,
1994.
Stolichnaya Vodka, Graphic advertisement, Gourmet Magazine, Chicago, May, 1997.
Olive Oil, Graphic advertisement, Gourmet Magazine, Chicago, May, 1997.