Wilson Yang’s Inner Circle

The Principles of Beautiful Web design Chapter 2: Color

Psychology of color in western culture

Red -> color of passion

Orange

-> promote happiness sunshine, enthusiasm and creativity, less corporate, less formal. Stimulate metabolism/appetite.

-> great color for food and cooking

Yellow -> highly active/visible; ->happiness, energy; -> too much yellow can be overpowering.
Babies cry more in yellow room, husbands and wives fight more in yellow kitchens and opera signers throw more tantrums in yellow dressing rooms.

Green -> is associated with Nature; ->symbolize growth/freshness, hope ->when green work with black background, it pops and it has techy-feel.

Blue -> symbolized openness, intelligence, faith. Blue can calm people down, reduce appetite ->Not good for food products; -> associate with bad luck and trouble; -> in the corporate situation, it represents stability, clarity of purpose; -> it associates with water, airline, sky, pool filters and air conditioning.

Purple -> represents royalty and power, wealth and extravagance.

White -> color of perfection, light, and purity

Black -> death/evil, but also represents power, elegance and strength

Color temperture:

• warm colors: from red to yellow: orange, pink, brown and burgundy -> represents heat and motion ->when placed with a cool color, a warm color will tend to pop out -> produce visual emphasis.
• cool colors: from green to blue and some violet. -> cool colors are good for background and larger elements on a page.

Color value -> the measure of the lightness or darkness of a color.

Tint	Pure	Shade
+white	solid	+warm color
look soft		feel heavy/dense

Saturation/Intensity ->the brightness or dullness of that color intense, vivid colors stands out.

Even cool colors tend to reduce, a vivid blue will draw more attention than a creamy dull orange.

Dull colors help to reduce tension and give composition a meditective, dreamy mood.

Color model:

• additive, RGB (screen)
• Substractive, CMYK (print)

Color wheel -> two useful links:

• Color Contrast meter from snook, please click here;
• Color style generator from wellstyled, please click here;
• Color schemer Studio, a windows based, application, click here;

Color category:

• primary colors: Red, yellow, Blue
• secondary colors, by mixing two neighboring primary colors together;
• tertiary colors, by mixing a primary color with an adjacent secondary color

Six color schemes

• Monochromatic -> single based color and any number of tints or shades of that color
• Achromatic -> using black and white and shade of gray.
• Analogous color scheme -> consists of colors that are adjacent to one another on the color wheel. (Note: your eyes are bigger than your appetite)
• Complementary color scheme -> colors that are located opposite each other on the color wheel, e.g. red and green.
  • pitfall: simultaneous contrast: -> when colors placed together, each color makes that other appear more vibrant and dominant.
  • it is horribly painful when complementary colors are used in a foreground-background relationship.
  • discordant: -> when choosing colors that are not quite directly opposite one another on the color wheel, yet are not close enough to be analogous colors. This color scheme appeals to children.
• Split-complementary -> use two colors adjacent to your base color’s complement.
  • 
• Triadic color scheme -> just push our split complements out one more notch on each side of spli-complementary scheme, so all colors are equally spaced.
  • 
• Tetradic color scheme (involve four colors) -> when any complementary color scheme is combined with another complementary color scheme.
  • 
• Monochronmatic with Mo’Pop: instead only using tints and shades, use pure gray, black and white. -> will create more contrast and more “pop” within a monochromatic color scheme.
• Analo-adjust: adjust the saturation of one of the colors in monochromatic color scheme up and adjust others down. (highly saturated color will stand out.)
• Mono-split-complement -> add few tints and shds of your base color.

Creating a palette -> 6 colors in general to get started.

Choose at least two colors for background and text colors, using Color Contrast meter from snook;

Note: color choice is more subjective, it depends on the world view of the audience.

when having no color input/bad color inputs are both difficult -> think about the target audience will help. If it is still difficult think about the populate color at client’s locale.

Dark gray make text readable and look more sophisticated.

cool color in Background

using lightest color for containers of the actual contents