Designing with Color


Flickr image: Rainbow of Peace, 2006

Aside from good taste, economy and technology are the two main factors limiting your color choices. Too little color and you risk boring your audience. Too much color and the end result is distraction or worse, a graying or emotional neutralization of color. Nonetheless, a limited number of colors can be blended in order to create an overall effect of harmony or contrast. When you become skilled, you might even consider disharmony to create a unique jarring effect. Like many elements of the design process, once you know the rules, you can break them. Learn the rules by following the tutorial below in order to gain understanding as to how color works on our psyche and on the page. You can begin by analyzing the color wheel (see image below).


Flickr image: Color Wheel, 2007


Colors on the Web suggests that the best color option for website design and most documents consists of three color choices.    

  • The primary color sets the tone.
  • The secondary color backs up the primary color and is often harmonious or adjacent to the primary color on the color wheel.  
  • And finally, the highlight color is used to emphasize certain parts of the page. Often, this color is a complementary color, opposite the primary or secondary color on the color wheel. Use it with moderation. 

Color Basics

Hue refers to the primary colors: red, green and blue (see image below). 


Flickr image: Red, Green, Blue, 2008

Value is the measure of lightness and darkness of a color.
Monochromatic color is where only the value of the color changes (see image below). 


Flickr image: Dark Red Monochrome, 2008

Analogous colors  are adjacent to each other on the color wheel, for example, yellow and green. Analogous colors feel harmonious (see picture below).


Flickr image: Field of Sunflowers, 2007


Complementary colors are opposite to each other on the color wheel, for example, red and green. Complimentary colors exhibit more contrast when positioned adjacent to each other -for example red appears more intense when positioned on or beside green (see image below).



Flickr image: Ladybug, Ladybird, 2009

Color and Temperature

We consider colors warm or cool because of our association with various elements in our surroundings. Red, yellow and orange are considered warm colors; in contrast, blue, green and violet are considered cool colors. Color contrasts are relative: Yellow-green is cool next to red or orange, but is  considered warm next to blue or purple. 

We associate warm colors, yellows, red and orange, with fire and sun (see image below).


Flickr image: Squall, 2008.

We associate cool colors, violet and blue  with snow and ice (see image below).


Flickr image: I've Reached the End of the World, 2009


Color and Movement
Perceptually, cool colors tend to recede into the distance whereas warm colors appear to advance (see image below).


Flickr image:  After the Rainstorm, 2006

This advancing or receding quality is based on how our eye adjusts to see the colors. Warm colors such as red, orange or yellow appear to come forward while cool colors such as blue and green appear  to recede slightly.

Color Tutorial

Step 1: Find out the basics: Visual Literacy

Step 2: Know color theory:  Color Matters

Step 3:  Check out more research here: The Elements of Design

Step 4: Consider composition: Composition and the Elements of Visual Design

Step 5: Check out these tips on how to combine colors using the color wheel.

Step 6: Know your color rules: Write Design Online

Step 7: Understand the meaning of colors:




Flickr image: Colombia es Pasion, 2007

Effect: Stimulating, arousing, provokes action, speeds metabolism, makes you hungry

Positive: Strength, power, speed, intensity, love, passion, vitality, heart
Negative: Aggressive, bloody, rage, revolution, painful, dangerous, financial loss
Sound: Loud
Taste/Smell: Sweet, strong
Best Use: Promote Action: Buy It Now, spot color black and white document



Flickr image: Songless Under a Harvest Moon, 2006

Effect: Exciting, stimulating, cheering
Positive: Warm, autumn, jovial, social, activity, excitability, expansive, confident, creative

Negative: None
Sound: Loud
Taste/Smell: Strong, spicy

Best Use:



Flickr image: Circles, 2008

Effect: Cheering, enhances concentration, speeds metabolism
Positive: Bright, sunny, energetic, enlightenment, light, luminous, highest light reflection, gold, summer, optimism

Negative: Cowardice, jaundice, illness, hazardous, caution, pure bright lemon yellow is the most fatiguing color, yellow is an eye irritant, babies cry more in yellow rooms, husbands and wives fight more in yellow kitchens, opera singers throw more tantrums in yellow dressing rooms
Sound: Shrill
Taste/Smell: Sour

Best Use: Text bullets and subheadings (dark background)



Flickr image: Romanesco2, 2005

Effect: Relaxing, refreshing

Positive: Nature, growth, hope, life, quiet, constancy, spring,
prosperity, money, green thumb, Go! assertive

Negative: Poison, nausea, jealousy, sickly, immature, unripe, gullible
Sound: Muffled when dull or shrill when saturated
Taste/Smell: Fresh to salty
Best Use: Highlight and accent color


Thumbnail image for 1084199839_b081fa9c41.jpg
Flicker image: Blue Hair, 2007
Effect: Relaxing, calming, appetite suppressant, increases energy
Positive: Sky, water, peaceful, calm, dignity, loyalty, cool, depth, stability, trusting, Blue Ribbon, Blue Chip stock (safe and conservative)

Negative: Cold, "blues", melancholy, prudish, severe, moral
Sound: Distant
Taste/Smell: Clean, mild

Best Use: Background websites



Flickr image: Purple Dazzler, 2008

Effect: Subduing
Positive: Romance, enchantment, mystical, royal, sacred, dignified, fantasy

Negative: Lonely, pompous, conceited, profane, shocking, excessive
Sound: Deep, resonant
Taste/Smell: Exotic
Best Use:




Flickr image: Olive the Mini Daschund, 2008

Effect: Comforting, stabilizing
Positive: Earth, wood, coffee, chocolate, dependability, receptive, sensuality, comfort, security, genuiness

Negative: Muddy, grubby, drab, sad and wistful
Sound: Deep, dark
Taste/Smell: Musty, roasted

Best Use:


Step 8: Understand the color of sound: Color of My Sound




Step 9: Spin the Color Wheel to find pleasing colors for your website


Step 10: Understand why we use color in documents:

Flickr image: Color Chart, 2008

Color can have 5 general functions in documents: 1. directing attention, 2. delimiting shapes and areas, 3. clarifying complex ideas, 4. facilitating identification, and 5. creating affect. Perhaps the most important of these are directing attention and providing clarity because these have their effect during the preattentive stages of perceptions, where the influence of the message's form of interpretation is most predictable (William Winn).


Step 11: Understand why we avoid color:

Many technical communicators and their teachers avoid chromatic color despite the proven ability of color to enhance technical communication. They can overcome this reluctance and use color effectively if they understand how color works, respect the limitations of color, and apply it in ways compatible with communications objectives and human perception (William Horton).

Further more, Horton contends, Color aids decision making and focuses attention; it reveals organization and pattern and adds dimensions. However, unless used carefully and sparingly, color can make the tasks of reading text and interpreting small objects slower and less accurate. Excessive or irrelevant use of color can distract and hinder performance by drawing attention away from information the viewer seeks.

If you choose primarily colors that are strong and contrast with no one color having dominance, the net effect will be an emotional grey (McCloud Understanding Comics) A single-color saturation will achieve the greatest emotional impact.


Flickr image: Color Chart Micron Hicon, 2008

Step 12: Know the color psychology of logos: Logocrtiques

Step 13: Know the history of color trends. The following information comes from the website: Colourlovers

Coco Chanel's all-beige outfits
Flappers, flamboyant style

Depression era
Elsa Schiaparelli pink
Royal purple popular due to the coronation of King Edward 8th
Clothing in military blues, khaki, browns

Hollywood strong influence: glamour Holly-wood blonde furniture
WWII, hearth and home in movies, songs, and interiors.
Brown and tan comfort colors in both decor and fashion.
Warm, rich wood stains


More paint colors available
Bright clear aqua, pink, & orchid in interior design
Pink appliances
Two-tone cars & clothes

Youth movement, Beatniks, hippies
Psychedelic, fluorescent colors
Black/red Spanish styles
Avocado green and harvest gold everywhere
Bright color combinations that shock: purple & red, blue & green, yellow and orange

Focus on the earth: The Environment
Greens, browns, orange
Daisies, rainbows, mushrooms
Handcrafted is important
Farmhouses, covered bridges as art motifs
Shag carpet

Mauve, slate blue, gray
Designer southwest style
Victorian jewel tones
Clutter is stylish

Victorian jewel tones now include Teal
Retro: Boomer's childhood motifs
Incoming brights
Clean & green



Step 14: Follow color trends: Web Design Color Trends 2009

Unlinked Sources

Horton, William.  "Overcoming Chromophobia: A Guide to the Confident and Appropriate Use of Color. " IEEE Transactions on Professional Communication  34.3 (1991): 160-173. ABI/INFORM Global, ProQuest. Web.  17 Oct. 2009.

McCloud, Scott, Understanding Comics. New York: HarperPerennial, 1993.

Winn, William.  "Color in Document Design. " IEEE Transactions on Professional Communication  34.3 (1991): 180-185. ABI/INFORM Global, ProQuest. Web.  17 Oct. 2009.



Leave a comment