WEB AUTHORING.

Alejandra Jarabo
Media Arts & Technologies

Choosing color Themes
TO NEXT PAGE

 

 

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 Classic color theory (primary/secundary/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 design.
   
 
 
Advice when building a web color palette
 
 
  • There shouldn't be more than 4 or 5 colors on a site color-palette, and you should count the background color of the page as one of them.

  • You begin by finding a group of colors that satisfy you, then you need to test which color/s will be used as background for the page or as background blocks.

  • You also need to check how text will look against your different background colors, and you need to check what font family and font size needs to be used to get the optimal effect (remember: the text color is also part of the color-palette).

  • On a web-site, you need to differentiate between section names, headings and block text. You might want to use different colors for different types of text.

  • To create a color-harmony with your pictures you might want to retouch your images and change the values towards your color palette
    (specially images on the home page or images that are not going to be changed often). Duotone images usually work very good for this.

  • You can also operate backwards, and build a color-scheme for a website based on the colors of an image.
    This is an excellent way of getting harmonic colors if you don't know much about color-theory.
 
     
 
  In order to choose pleasing color themes for your web pages and sites, it's necessary to know a bit about color relationships .
 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Click on the items on the left and rollover on the color-wheel.

 

 

Than you so much to Tracy Sherwood for the great interactive piece!

  Some color-relationships referring to the color-wheel

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.

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, grey, white.

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. This combination will be more harmonious if one of the colors is used in a very dark or light form (to deaturate 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 colors

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. Triadic combinations typically choose three colors that are equal distances apart around the wheel (e.g. orange, violet and teal), while split schemes use variations on the same colors (e.g. orange with blue, teal, and indigo). A tetradic color scheme uses two pairs of complementary colors (e.g. blue and orange, violet and yellow).

Read more at Suite101

     
  Here you see an example of a simple design and how would it change depending on our choice of color-combination or color _theme.
Notice that you use very few color on the page, so you can have full control of the color relationship.
   
     
 
 
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 Chromas (Complementary color, analogous, tetrad...)

Click on the "light and dar pages"

http://kuler.adobe.com

Color palette online application. You have to sign in.

 

 

Related links:

See student work.

http://suite101.com/article/choosing-web-design-color-palettes-a64779

Remember that theese site only help you making color-groups.
For a web color-scheme, you still need to test how colored text would work on colored background and what type of text will be needed.

You might want to see how the images on your home-page, logo and other mandatory graphic material will work with the color-scheme.


Remember that you might end needing: a background color, a color for blocks or buttons and 1 or 2 colors for text.