Using Color in Design
Colors are the native language
of the subconscious.
–Carl Jung, Psychiatrist
Understanding the principles of color theory
and its use in graphic design.
Using Color in Design
How We Perceive Color
http://www.skidmore.edu/~hfoley/images/spectrum.jpg
Color is based on light
Color perception based on the two components: wavelength and luminosity
Color of light is determined by wavelength and how it hits a surface
Using Color in Design
How We Perceive Color
http://science.nasa.gov/newhome/headlines/images/eta_car_pix/0099_infrared_lg.jpg
Color can exist beyond the spectrum visible to humans:
ultraviolet and infrared light are examples
Using Color in Design
Terminology
Hue: Any single color in the spectrum (red, yellow, blue, etc).
Using Color in Design
Terminology
Value: The relative lightness or darkness of a color.
Using Color in Design
Terminology
Tint: A color with white added.
Shade: A color with black added.
Using Color in Design
Terminology
Saturation: The relative intensity or brightness of a color
Bright, vibrant colors (reds or oranges) have a saturation
dull or muted colors (browns) have a low degree of saturation
Using Color in Design
Terminology
Saturation: The relative intensity or brightness of a color
Bright, vibrant colors (reds or oranges) have a saturation
dull or muted colors (browns) have a low degree of saturation
Using Color in Design
Terminology
Colors can be of the same hue and still have varying degrees of saturation
Using Color in Design
How Do These Ideas Work Together?
Like the elements of design, hue, saturation and value can be used
to emphasize certain areas of a composition or deemphasize others
Colors can balance, organize and harmonize a design, or to create discord
Colors with high saturation intensity and brighter value are more visible
and demanding of a viewer s attention
Colors with low saturation can be used to set apart secondary information
or to create background elements
Color Design
Color Schemes
Primary Colors: Red, yellow and blue; the hues that form color wheel base
Secondary Colors: Green, orange and violet; hues that are mixed
by combining two primary colors.
Tertiary Colors: Colors created by mixing a secondary color and a primary
color. Examples are blue green, red orange, red violet, etc.
Color Design
Color Schemes
Monochromatic: Composition using tints and shades of only one hue.
Easiest scheme to balance visually, but lacks high impact of other more
contrasting and complicated schemes.
Color Design
Color Schemes
Complementary Colors: Colors that are opposites on the color wheel that,
when combined, neutralize one another. Scheme provides strong visual
contrast and demands attention. For best use, de-saturate the cool colors
rather than the warm ones.
Color Design
Color Schemes
Analogous Colors: Colors that fall in adjacent proximity to each other on
the color wheel, such as red, red orange, orange
Using analogous colors in a design creates unity and harmony
Color Design
Color Schemes
Split Complementary: Color scheme using a hue and the two colors that lay on
either side of its compliment on the color wheel
Provides more visual variety than complementary scheme; strong contrast
Harder to balance than monochromatic, analogous color schemes
For best results, use one warm color with a range of cool colors or vice versa
and avoid de-saturated warm colors
Color Design
Color Schemes
Triadic: Color scheme uses three colors equally spaced around the color wheel.
Provides strong visual contrast while adding balance and richness.
For best use, choose one color to be used in larger amounts than others;
experiment with color saturation and value
Color Design
Color Schemes
Tetradic (Double Complementary): This is the richest of all the schemes;
utilizes four colors arranged into two complementary color pairs
Can be hard to harmonize; if all four colors are used in equal amounts, this
scheme risks looking unbalanced and chaotic, so choose one color to be dominant
Color Design
Simultaneous Contrast
Simultaneous Contrast: The concept of color perception based on
the other colors surrounding it.
Color can look completely different when set against different hues,
and is perceived in relation to its surroundings.
Color Design
Advancing and Receding Color
Advancing/ Receding Color: Warm and bright colors give
the illusion of being closer to a viewer within a composition,
while cool and dull colors appear to be further away.
Color Design
Advancing and Receding Color
Advancing/ Receding Color: Warm and bright colors give
the illusion of being closer to a viewer within a composition,
while cool and dull colors appear to be further away.
Color Design
Vibration
Vibration: Complementary colors of equal saturation and brightness
compete with our eye for attention when seen in close proximity to
one another.
Color Design
Weight
Weight: Colors differ in visual weight based on their hue and intensity.
For example, red is considered a heavy color, and would demand
a viewer s attention, even if shown in only a small amount within a
composition.
Color Design
Weight
Weight: Colors differ in visual weight based on their hue and intensity.
For example, red is considered a heavy color, and would demand
a viewer s attention, even if shown in only a small amount within a
composition.
