WEB DESIGN. Intro to Multimedia MAT 103

Alejandra Jarabo
Media Arts & Technologies

Choosing color Themes

 

 

The color-scheme or color-palette of a website helps clarify and emphasize the content by visually framing the product.

It eases visual perception, creating a better structured "Gestalt" (whole) and it helps branding the website, because color creates a psychological mood for the product being presented.

 
 
Color link chart
http://www.colormatters.com/colortheory.html Classic color theory (primary/secondary/complementary colors). Basic color harmony.
http://www.ideabook.com/tutorials/web_design/color_strategy.html#more The use of color in design
http://newark1.com/color/000055.html Color psychology oriented towards Web!
http://www.mountevansdesigns.com/articles_colors.html More on web color consideration
http://www.sibagraphics.com/colour.php Very interesting multicultural considerations on color (horrible interface design).
http://desktoppub.about.com/cs/color/a/symbolism.htm  
 
 
 
 

Some color-relationships referring to the color-wheel. This part of color-theory should orient you and confirm your intuition. Don't get obsessed with the theory, please.

Monochromatic Color Schemes:
It's possible to create a color palette using just one color, in different shades and tints. e.g. A monochromatic palette of blue, deep blue, baby blue, gray, white.

Notice how you will work around the same color, changing levels of white and black.

 
 

Working with Analogous colors
Analogous colors are those that are found next to each other on the color wheel. These combine in pleasant, low-contrast combinations. e.g. violet, indigo and blue.

Colors will be close to each other in the spectrum and related in their frequency. Example: "yellow, darker yellow and orange".
It is easier to define a warm or cold shaded palette for beginner.

 

Differentiating between Warm colors (range between yellow and bright red or Vermilion) and
Cold colors (ranging between a deep ultramarine blue and a green with a low percentage of yellow, including purples with more blue than red) is important.
A single color/shade can be Cold or Warm, a combination of colors (a color-palette) can also have a Warm or a Cold dominance. This is very important for color-psychology and defines a mood.
Warm shades are active, exciting and create alertness. Cold shades are relaxing, creating an illusion of time.

 
 

Complementary Colors:
When two colors from opposite sides of the color wheel are used together, the combination is said to be complementary.
These colors can be visually stunning thanks to their strong contrast. If you use very saturated tones, with no colors to create a harmony in between, the mix will be almost unbearable. Beware of saturated complementary shades within a palette.

This combination will be more harmonious if one of the colors is used in a very dark or light form (to desaturated it). e.g. A dark red wine color and a light pastel sage green. The rest of the colors in the palette can be intermediate versions of one of the main complementary shades (this is how you get to the Triad, Tetrad palettes below).

 

Complementary colors form powerful combinations, that have been used for painting since the end of the 19th century (remember the Impressionists, Fauves, German expressionists?)
It is also an important strategy in Nature, frequently found in flowers and fruits, as a way of attracting attention (green chilies become read as they ripe, same with red fruits).

See examples below.
Notice how, when painting with complementary colors, shadows are rendered with saturated colors (as opposed to grays or black ; usually the complementary of the one used for the light of the object or a mix of the light color and its complementary).

 
         
 

Split, Triad, and Tetrad Color Schemes:
Whatever this type of combination is called, it's a variation on complementary color choices using three, four, or more selections from the color theory wheel.


Split schemes use variations on the same colors (e.g. orange with blue, teal, as complementaries, supported by yellow In the Firefox logo).
A Tetrad color scheme uses two pairs of complementary colors (e.g. blue and orange, violet and yellow).

 

Triadic combinations typically choose three colors that are equal distances apart around the wheel (e.g. warm red, mustard and ultramarine blue in the Burger King logo).
Although the colors are very far apart in the wheel, they are around the same level in the use of light, darkness and saturation. Notice how those are not exactly the primary colors.

  Tetrad or double complementary
     

Read more at Suite101

 
     
 
Color palette applications
http://colorschemedesigner.com

web color palette online application. very intuitive.

Notice that you can define the basic palette to use and then the "Chroma" (Complementary color, analogous, tetrad...)

Click on the "light and dark pages"

http://kuler.adobe.com

Color palette online application. You have sign in with your Adobe ID.
The same application can be used inside all Adobe Graphic software (Photoshop, Illustrator, After Effects...)