Color
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. Although pink, crimson, and brick are all variations of the color red, each hue is
distinct and differentiated by its chroma, saturation, intensity, and value.
Chroma, intensity, saturation and luminance/value are inter-related terms and have to do with
the description of a color.
Chroma: How pure a hue is in relation to gray
Saturation: The degree of purity of a hue.
Intensity: The brightness or dullness of a hue. One may lower the intensity by adding white or
black.
Luminance / Value: A measure of the amount of light reflected from a hue. 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.
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.
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.
Those colors used in painting—an example of the subtractive color method.
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; as more color is added, the result is lighter and tends to white.
The RGB colors are light primaries and colors are created 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 older
computer systems may be 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. 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. Working within
the CMYK color system, or choosing colors from Pantone© palettes insures proper color
rendering.
Color Wheel
A color wheel (also referred to as a color circle) is a visual representation of colors arranged
according to their chromatic relationship. Begin a color wheel by positioning primary hues
equidistant from one another, then create a bridge between primaries using secondary and
tertiary colors.
These terms refer to color groups or types:
Primary Colors: Colors at their basic essence; those colors that cannot be created by mixing
others.
Secondary Colors: Those colors achieved by a mixture of two primaries.
Tertiary Colors: Those colors achieved by a mixture of primary and secondary hues.
Complementary Colors: Those colors located opposite each other on a color wheel.
Analogous Colors: Those colors located close together on a color wheel.
The color wheel 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.





Advancing hues are most often thought to have less visual weight than the receding hues.
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.
Color relationships may be displayed as a color wheel or a color triangle.
The Painter's color triangle consists of colors we would often use in art class—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 printer's primaries; the secondaries
formed are the painter's primaries; and the resulting tertiaries formed are dark neutrals.
Complementary Colors
We look at a color wheel to understand the relationships between colors. Analogous colors are
positioned in such a way as to mimic the process that occurs when blending hues. The colors that
are positioned opposite one another are complementary colors.
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. When fully saturated complements are
brought together, interesting effects are noticeable. This may be a desirable illusion, or a problem
if creating visuals that are to be read.
Note that Vibrating
Boundaries may occur when opposing colors are brought together.
(Notice the illusion of highlighted edges and raised text.)
Perceptual Opposites. We learn from the relationships displayed by a color wheel that every
color has an opposite. Every color has both a color wheel opposite as well as a perceptual
opposite. Without a color wheel, it is still possible to find the opposite of a color and this is due
to a phenomenon of our eyes. Due to the physiological differences between individuals,
everyone's perceptions do vary—the complements shown below are my own perceived
opposites:
source >> result
After Images
Color is light and colored objects absorb and reflect different wavelengths. Light & color are
seen by the human eye because of the two types of photoreceptor cells - rods and cones - located
in the retina of the eye. Rods are sensitive to light and dark; cones are sensitive to red, green &
blue light and responsible for color vision. These photoreceptors convey the color of light to our
brain. (Learn more about rods and cones, at BiologyMad.com)
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 on the image or the link below to
proceed to the next page.
Color Combinations
Color combinations may pass unnoticed when pleasing, yet offend dramatically when
compositions seem to clash. One outcome we seek in the final form or composition, is a
successful use of color.
We determine whether or not we are successful by critically assessing the visual balance and
harmony of the final composition—balance and harmony are achieved by the visual contrast that
exists between 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.
Monochromatic Relationship Colors that are shade or tint variations of the same hue.
Complementary Relationship Those colors across from each other on a color wheel.
Split-Complementary Relationship One hue plus two others equally spaced from its
complement.
Double-Complementary Relationship Two complementary color sets; the distance between
selected complementary pairs will effect the overall contrast of the final composition.
Analogous Relationship Those colors located adjacent to each other on a color wheel.
Triad Relationship Three hues equally positioned on a color wheel.
Color & Contrast
Every visual presentation involves figure-ground relationships. This relationship between a
subject (or figure) and its surrounding field (ground) will evidence a level of contrast; the more
an object contrasts with its surrounds, the more visible it becomes.
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 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 fatigue.
Yellow text on a white background or blue text on a black background, are difficult to
read due to the low level of contrast between figure and ground.
An occurrence known as 'simultaneous contrast' (or chromostereopsis,) may happen when
opposing colors are placed in close proximity to each other. Text 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.
Some color combinations, such as red text on a blue background, cause illusions when
positioned together.
Sensitivity to Colorblind Deficiencies. The Design of visual documents or signage without
thought to the overall contrast level between figure and ground can be problematic for people
with sight deficiencies. My first-hand experience with this occurred years ago when visiting a
hospital with a friend who was colorblind. The hospital had creatively marked the floor with
"road maps" to various areas like the lab, lobby, etc. Unfortunately, they used red and green lines
and my friend could not distinguish between the colors. If a visual document uses color to relate
important information, insure that no information is lost, or potentially misunderstood, when the
color is not available.
When choosing complementary colors, fully saturated colors will offer the highest level of
contrast. Choosing from tints or shades within the hue family reduces the overall contrast of the
composition.
Itten's Color 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 to light, moderate, or dark
value.
The contrast of saturation
The contrast is formed by the juxtaposition of light and dark values and their
relative saturation.
The contrast of light and dark
The contrast is formed by the juxtaposition of light and dark values. This
could be a monochromatic composition.
The contrast of extension
Also known as the Contrast of Proportion. The contrast is formed by
assigning proportional field sizes in relation to the visual weight of a color.
The contrast of complements
The contrast is formed by the juxtaposition of color wheel or perceptual
opposites.
Simultaneous contrast
The contrast is formed when the boundaries between colors perceptually
vibrate. Some interesting illusions are accomplished with this contrast.
The contrast of hue
The contrast is formed by the juxtaposition of different hues. The greater the
distance between hues on a color wheel, the greater the contrast.
The contrast of warm and cool
The contrast is formed by the juxtaposition of hues considered 'warm' or
'cool.'
Proportion & 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).
Placing small areas of light color on a dark background, or a small area of dark on a light
background will create an accent.
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.

Alternating color by intensity rather than proportion will also change the perceived visual
mix of color.
Dominant color
Sub-dominant colors
Accent
Dominant color
Sub-dominant colors
Accent
Dominant color
Sub-dominant colors
Accent
Dominant color
Sub-dominant colors
Accent
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. The choice of colors
will enhance or minimize the overall impact.
It is easiest to understand the difference between dominant elements in the following
compositions from a distance, or by squinting your eyes a bit. If the proximity between the
neighboring hues is less apparent when you squint, the overall composition a displays lower
contrast level; if the overall composition appears light, it has a light value. Conversely, if
distinctions between hues are very apparent, the contrast is high, and if the overall composition
appears dark, the value level is dark. Understanding how the relationships between the colors of
a chosen palette will affect the final outcome of an overall composition is integral to mastering
the use of color.
Examples of Contrast Dominance
In the examples below, the overall contrast level of a composition changes with the range of
luminosity between chosen hues.
Low contrast
Low contrast compositions use colors within a narrow range of luminosity or brightness levels.
Moderate contrast
moderate contrast compositions use colors within a moderate range of luminosity or brightness
levels.
High contrast
High contrast compositions colors range from very light (high-luminosity) to very dark (low
luminosity).
Examples of Value Dominance
In the examples below, the overall value of each composition changes with the incorporated
hues' relative saturation.
Light value
A composition made up of tints, displays an overall light value.
Medium value
A medium value composition is made up of a balance between tints, saturated hues, and shades.
Dark value
A dark value composition displays mostly shades.
Color Shade and Tints
Using a color wheel divided into various shades and tints is one method of identifying possible
options for color schemes. The split complementary relationship shown in this example presents
many possible combinations. By varying the saturation and experimenting with shades and tints
within the hue relationship, you can achieve quite a variety of palette options. (Click on the wheel at
the left to view a larger image.)
Moderately-high contrast, medium value, composition using fully saturated hues.
High contrast, medium value, composition using shades, tints & various saturation levels.
Moderately-low contrast, medium-light value, using tints & various saturation levels.
Moderate contrast, medium value, using shades, tints & various saturation levels.
Moderately-low contrast, medium-dark value, using shades & various saturation levels.
Low contrast, medium value, using shades, tints & various saturation levels.
Moderately-high contrast, medium value, using shades, tints & various saturation levels.
High contrast, light value, using shades, tints & various saturation levels.
Color Studies
Colors of a complementary relationship.
Colors of a complementary relationship assigned equal proportion.
Colors reassigned with proportions allocated to dominant and subdominant areas.
Color intensity and proportion modified. Using tints and shades of the original colors results in a
moderate level of contrast and medium value.
Colors applied to composition.
Color intensity and proportion modified - the whole area displays a moderately-high contrast and
medium value.
Colors applied to composition.
Colors of a triad relationship.
Colors of a triad relationship assigned equal proportion.
Colors reassigned with proportions allocated to dominant, subdominant, and accent areas.
Color intensity and saturation modified - the whole area displays a moderately-high contrast
level.
Colors applied to composition.
Color intensity and saturation modified - the whole area displays a moderately low contrast level.
Colors applied to composition.
Color intensity and saturation modified - the whole area displays a medium/dark value.
Colors applied to composition.
Color intensity and saturation modified - the whole area displays a light value.
Colors applied to composition.