The Web Design Magazine for All | Connecting Designers

Tuesday, 06 January 2009

 

Categories
AJAX
ASP.net
Basics Corner
CSS
Graphics 3D
PHP
SEO Ask the Expert
SEO General
Software Review
Web Applications
Extras
Latest News
Resource Directory
Contact Us

Web Design Color Choices PDF Print E-mail
Monday, 05 September 2005

by Lisa Schwaberow 

Choosing the color scheme for your web site is an important first step in the design process. There are several things to consider
before you pick out the colors.

Does the person or company you are working for have a specific color scheme or a logo that they will be using? Is the logo color part of the overall site design? For instance can you imagine the golden arches in purple and green?

Another consideration, do they have a graphic or photo that they want on the front page, like maybe the face of the company president? If he has on a lime green tie and a purple suit you probably won't want to use muted brown tones. Use the colors in the photo to pick out your color scheme.

Here's a tip: If you are designing the mock up for your website in Photoshop pick out one of the colors in your photo by clicking on it with the eyedropper tool. When you are happy with the color you have chosen go to your swatches palette and control/command click on an empty spot in the palette, your new color will be added to your palette making your color choices consistent.

A good rule for a color scheme is two or three main colors and then use different tints(shades) of those colors. Too many colors will make your design seem cluttered and overwhelming.

If you have a wide open choice of colors and no photo or logo considerations, or if you feel totally inept at picking colors, you might want to go to one of these web sites and play around with some color schemes:

http://www.siteprocentral.com/html_color_code.html
http://wellstyled.com/tools/colorscheme2/index-en.html

Another way to find good color combinations is to look at the world around you, be observant. Look closely at flowers, the purple, light purple, green combination of a pansy might be the perfect color for your web site. Look at the couch sitting in your living room. Why did you buy it? Did you like the colors of it? Look closely at it. The neutral beige background, with the peach and blue stripe might be another color combination you could use in a design. Clothing departments are another good inspiration for new color combinations. Look at the clothes you pick out and wear every day. Of course if you pick out plaids and flowers patterns to wear together you might consider the above web sites before relying on your own tastes!

What about the colors of famous logos you see every day? While you can't use the logo since it is copyrighted there are no copyrights on their color choices! What about your favorite sports teams? What colors do they use? Who do you think of when you hear the colors blue and gold? Another source of color choices is your favorite web sites, emulate the colors they chose.

Yet another consideration - what is the content of the web site? If the web site is going to be text heavy and the site visitor is going to be coming to the site for a lot of text based information you won't want to choose a dark background with light color or white text, this is very hard on the eyes when you are reading for any length of time. But at the same time a white background with dark text is hard on the eyes too. Neutral background colors would be a wise choice. If you are doing a site for a photographer or an artist a dark background is a good choice because it makes the colors or images of their art stand out better. Personality of the company or person would be a good thing to consider as well. For instance you have a tool and die company you probably would not want to use the mauve, pink, blue combination - unless of course the company is owned by a woman! Law firms tend to like heavy, dark rich colors. A burgundy, navy blue, dark green combination would be a good choice.

{mosgoogle}
Colors can also help you organize your web site. Headlines that have important information should all be the same color and the darkest of your colors, it gives the visitor to the site the ability to decipher quickly that the heading marks an important bit of information. If you make all of your side bars the same color the visitor to your site will quickly see organization on your site.

Watch the colors that you use on top of one another. Red on top of a green background or green on top of a red background are colors to avoid. These colors are not very "readable" whether with text or shapes, and if a person even has a little bit of color blindness they will not view your site as you do.

Colors also evoke mood, feelings, and goals in a person. Green is often times related to money, luck, prosperity, or nature, life and growth. Green can also provoke thoughts of slime or aliens. Yellow invites warmth, well being, optimism, and energy. Red can symbolize violence or high energy. Blue suggests peace, coolness, spirituality and at the same time evokes the feeling of depression or heaviness. Purple can suggest playfulness, rebellion, or royalty.

White is a color too, and often time overlooked in the design process. White space can be a good thing. You want to give your viewers eyes a chance to "rest" and white space is a good way to do that. If you have your elements packed in too closely or too many colors you leave the reader feeling chaotic and less likely to stick around on your web page and read what you have to say.

You want there to be a natural flow around your page, but wait, I am getting sidetracked that is another topic for a later column!

So whether your colors are dictated by your client or whether you have the freedom to suggest the colors, use your powers of observation to see the world around you for your color choices or do it the easy way and go the internet sites listed earlier in this article and view hundreds of choices. Color is what makes the world exciting and can convey so much in the way of subconscious messages. Happy color hunting to you!


Contributed by Lisa Schwaberow    (click the profile icon to view her bio)

Written by elliothere on 2005-09-05 22:33:21
Some of those are pretty good ideas.  
 
One thing that I find helpful when picking colors is to find a photograph that has the same "feel" that you're going for with your site. I usually use this photo in the design, then pick my colors from it.
May I also recomment...
Written by herkalees on 2005-09-05 23:59:37
http://www.colorschemer.com/schemes/
Also try...
Written by mickeyjohnnyboy on 2005-09-06 07:33:36
http://www.colorwhore.com/ 
To view colors by grouping. 
 
http://wellstyled.com/tools/colorscheme2/index-en.html 
Very useful tool for creating your own color palette. 
 
http://www.colourlovers.com/ 
See what other people love! 
 
http://www.defencemechanism.com/color/ 
Another color palette generator. 
 
http://www.netcocktail.com/ 
Color inspiration. 
 
http://www.siteprocentral.com/html_color_code.html 
Another color palette generator. 
 
http://www.colorcombos.com/ 
Grab a target web sites colors!

Only registered users can write comments.
Please login or register.

< Prev




advertisement
 

 

Design Studio Magazine, PO Box 8145, Fort Wayne, IN 46898-8145

Unique Web Design and Development
for(var i=0;i