Designing With Color

Designing With Color for Interface and web Design

Color on the Web is an excellent way to improve your Web designs. Learn to use color in your Web designs effectively with the color wheel, HTML color codes, and color charts.

Last year at Teesside University i studied the Human Computer Interface, and all the other stuff that goes with designing for a user here i will explain a little bit about colour.

Color Theory - Color Wheels

Here are a few examples of colour wheels:








































Using color wheels and color theory to choose the color scheme for your Web site is good sense. This allows you to put together groups of colors that are harmonious and look nice together remember this Color is a very important aspect of human psychology..

Below is a list of the most common core colors and some of their basic psychological associations. They can be used in your designs for any purpose weather its for a web site, Interface design or other forms that use colour.



Gray – Boredom, reverence, wisdom, dullness, mourning, neutrality, urban, subtlety, decay, dust, pollution

White – purity, innocence, simplicity, security, humility, cowardice, winter, cold, snow, reverence

Black – power, strength, evil, wealth, mystery, death, sophisticated, remorse, sorrow, unhappiness, elegance,
style

Red – Love, sex, passion, strength, energy, fire, excitement, heat, anger, hunger, heat, power, danger, inspiration, masculinity, blood, speed, radicalism, revolution, communism


Blue – peace, unity, harmony, tranquility, calmness, coolness, confidence, water, ice, cold, winter,
dependable, royalty, nobility, truthfulness, idealism, depression, wisdom, seas, sky

Purple – royalty, harmony, good luck, youth, wealth, money, vigor, fertility, greed, corruption, renewal, growth, hope, sincerity, harmony, stability, inexperience, envy, generosity

Yellow – joy, happiness, optimism, intelligence, sunlight, hope, idealism, wealth, weakness, cowardice, illness, hazards, dishonesty, sociability, hunger, fun

Orange– energy, balance, fire, heat, enthusiasm, playfulness, aggression, arrogance, flamboyance, warning, danger, desire

Brown – nature, richness, stability, dirt, filth, poverty, heaviness, tradition, calm, deep, appetite stimulant, simplicity, friendliness, dependability, steadfastness, wholesomeness

Pink – sympathy, gratitude, spring, admiration, femininity, health, love, marriage, appreciation

There are of course variations in the meaning of certain colors according to which region of the world you are in. For example, in the United States black is the color most tied to death but in China white is the color most tied to death. Blue and red are the political colors in the states but in Europe black and red are the primary political colors. Again you can see the difference in the meaning of colors based upon country or region.

Here are a few resource full sites for choosing your colours for Interface Design and for the Web i generally use these sites :

Colour sample and palettes
http://www.colourlovers.com/

The Colour Contrast Check Tool
http://www.snook.ca/technical/colour_contrast/colour.html

Information and tools for colour
http://www.limov.com/colour/

More Colour samples and pallets
http://kuler.adobe.com/

List of colours names for HTML
http://www.cryer.co.uk/resources/javascript/html2.htm

Web 2.0 Colour Palette
http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette

Macbeth Colour Checker
http://www.colourtools.co.uk/cc.htm

AccessColor tests the color contrast
http://www.accesskeys.org/tools/color-contrast.html