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.

Understanding Color

  • 2.
    Using Color inDesign Colors are the native language of the subconscious. –Carl Jung, Psychiatrist Understanding the principles of color theory and its use in graphic design.
  • 3.
    Using Color inDesign 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
  • 4.
    Using Color inDesign 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
  • 5.
    Using Color inDesign Terminology Hue: Any single color in the spectrum (red, yellow, blue, etc).
  • 6.
    Using Color inDesign Terminology Value: The relative lightness or darkness of a color.
  • 7.
    Using Color inDesign Terminology Tint: A color with white added. Shade: A color with black added.
  • 8.
    Using Color inDesign 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
  • 9.
    Using Color inDesign 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
  • 10.
    Using Color inDesign Terminology Colors can be of the same hue and still have varying degrees of saturation
  • 11.
    Using Color inDesign 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
  • 12.
    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.
  • 13.
    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.
  • 14.
    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.
  • 15.
    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
  • 16.
    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
  • 17.
    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
  • 18.
    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
  • 19.
    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.
  • 20.
    Color Design Advancing andReceding 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.
  • 21.
    Color Design Advancing andReceding 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.
  • 22.
    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.
  • 23.
    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.
  • 24.
    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.