Picking the right color scheme can be a difficult phase of the design process. Color schemes can make or break a site. The colors you choose will help convey the overall mood of a site and how you use them will call attention to key areas on your pages. Websites keep their colors for a long time between web designs, so make sure to choose the best possible scheme by using the tips and tools below
Working with text
Text is the most important element on your site. If someone cannot read your site then it serves him or her no purpose and they will leave. Whether it is the text in your navigation or your body text, select colors that contrast so that text is readable. A standard choice is to use dark text over a light background. Most people are used to this since print on has gone this way for ages. Of course this is web design and we are not constrained to the styles of print media and are free to choose a dark scheme if it fits our site
The following example shows how a dark design can work. Navigation elements have a slightly lower contrast to bring out the white text from the background. Also the opposing color of red also points out the focus of this particular website.
The example below shows what not to do with text both in the navigation and the body. The text on bottles is inconsistent and difficult to read on. The body text is made of the two worst possible colors for the background. The yellow text also doesn’t contrast well against the bottles in the background image.
Figure 1 Poor colors for text over a blue background
Choosing the Colors
Once upon a time web design was limited to the 216-color web safe color palette, but current browsers allow nearly all colors to be rendered. Just because you can use any color doesn’t mean you should. Try and work with a light background and dark foreground colors. With the background making 50% or more of your site this is the color that will set the tone. But don’t be afraid to invert this color scheme if it fits your sites purpose.
Look at your logo
Your logo is a good starting point for choosing the colors for your site. Experiment with contrasting colors to help the logo stand out. You can also use the colors of your logo to become colors of various elements in your website. The image below from FedEx is a good example of this. The purple from the logo highlights the active navigation and the services section of the website pointing out what the customer will gain most from this area. The light grey also takes a role here as trim and for navigation and elements like the scroll bars.
Figure 2 FedEx logo colors as highlight
Tools for color selection
There is no end to how many possible color combinations can be made. A good rule of thumb is if you are working with more than 5 colors for your website you are going overboard. Tools such as Color Scheme Designer, and Adobe’s Kuler project allow you to experiment with colors using the following rules.
- Complementary – colors which are colors opposite to each other on a color wheel
- Analog – colors that are located right beside each other on a color wheel
- Monochromatic – colors or different shades of the same color
- Triad or Tetrad – 3 or 4 colors equally spaced around a color wheel
There are more color theory rules than I listed here but those are the most popular choices.
Both tools allow you to look at schemes from other designers and export your created color palettes to formats useable in GIMP or PhotoShop. Adobes Kuler web app also adds many social aspects to the color selection game. There is the color wheel showing the popularity of colors other designers are using, and forums to discuss current work being done from Kuler.
There are many web applications for creating color schemes available that work on all platforms. These are just two popular examples. I’ve listed a few more here for you to explore for your self:
- Color Schemer(http://www.colorschemer.com/) – Online gallery swatches from other designers, and discussion forums.
- Color Blender(http://colorblender.com/) – Simple tool with RGB/HSV sliders and simple export functions
- Visibone Color Lab(http://www.visibone.com/colorlab/) – Basic color selection tool using only the 216-color web safe palette
- Color Theory(http://colortheory.liquisoft.com/) – Not a tool like the others but it is a good site to get some basic understanding of color theories mentioned here in this article.
- Online logo maker – https://www.shopify.com/tools/logo-maker
This article was courtesy of:
Lawrence Hall , Community Manager Go-Gulf , a Dubai based web design company that provides web development solution in the middle east.