Monday, October 4, 2010

Color on the Web


Color has the ability to evoke moods, excite or energize, calm or sooth.  Though mostly thought of when it comes to art and/or interior design, color is an integral design component in web design.  Bing, Google & Mozilla have incorporated wallpapers to their search Engine page.  A close examination of any wall paper or picture reveals a large amount of color combinations ...Think about it…. Why did all those famous fellows of old – Picasso, Degas, Michel Angelo – become famous [and make a boatload of money in the process…I digress…]?  Either we are seriously lacking in taste, or they mastered the art of using color to convey emotion with paint.  What if the Sistine chapel was painted a screaming yellow or purple?  Would the painting be what it is renowned for? 

When used correctly, color has the ability to help a web site evoke certain feeling or emotion.  After all, loosely interpreted, isn’t a picture is a combination of various colors/hues/tones/shades with varying boundaries?  For warm exciting tones, a picture will have varying tones of reds, oranges, browns, yellows, greens and/or golds.  For cool calming tones, the color palette will for the most part incorporate varying tones of blues, purples, grays, whites, and/or silvers.   

Another way to think of color design is to think of food.  We always eat with our eyes first.  Before our other sensory abilities kick in, eyeball appeal is the primary attention grabber.  Similar to web site design, color gives the first impression- ‘if you will’ - of the overall look of the website and intrinsically, defines your brand.

The Relationship of Colors:

Primary Colors
Red:-Yellow:-Blue:- Three colors that in different combinations make up the color wheel.  They cannot be reproduced by mixing and matching other colors.
Secondary Colors:
Orange:-Green:-Purple:- You get these colors by mixing primary colors together.
Complimentary Colors: Colors located on opposite ends of the color wheel.  They complement each other.
Monochromatic Colors: Hues/tones/shades of the same color.
Tips for using color on the web:
*      ~ Know your audience and figure out what kind of feel you want your website to have.
*      ~ Select a color scheme and ‘swatch’ your color choices to come up with the best combination.
*      ~ Less is more:- One color used sparingly but smartly can work very effectively.
*      ~ Use browser safe colors that will render well.