WEB STUDIO ZONE'S TRAINING
Web Design Concepts

Back to Main Article | Archived Articles

Website Color Selection

One sure way to tell a web designer that lacks professional standards or training is by their use of color on a website. Believe it or not, there is more to your selection of color than meets the eye (pun intended)! The choice of color can make or break the results of many hours of time poured into the design of a website. For instance, the designer is responsible to be aware of how color will sometimes display differently on various platforms, what colors will display consistently across all platforms and how to consistently blend graphics into the background. So let's learn how color, on the web, was meant to meet the eye!

Selecting The Wrong Color

When you are unaware of these issues you are flirting with disaster and are bound to have results that will ruin your hard work and look very unprofessional. It may look great on your machine but look awful on another machine running a different platform.

One of the most common pitfalls is when a designer tries to blend an image into the background of the page. It works beautifully when done right. Logically you would assume that if the background of the page and the background of the image were the same color the image would blend seamlessly into the page. However, this is not always the case when we are dealing with browsers and monitors with different color display abilities. When you use a taboo color often your browser is incapable of displaying this color and will take one of two options. It will either dither (mix two colors to get as close to the desired one as possible) or shift the color to the closest safe color. As a result, you are never sure that your desired look will be preserved by all who view it. Below is an example of what dithering might look like. Perhaps you have seen some websites with this problem before:

How To Select The Right Color

The primary lesson here is that there are certain colors that will display exactly the same on all platforms. This sounds limiting, and it is to some extent, but you only have to be aware of the times when you must use these colors. There are times when you can use taboo colors so long as you do so with some forethought and careful planning.

The grim reality is that there are only 256 web safe colors. Even worse is when you consider Macintosh platforms and the color systems common between the two platforms the number is whittled further to just 216 web safe colors. So how do we determine what are web safe colors and which ones are not? There is a simple answer and a technical one. The simple answer is when you are creating graphics most graphics design applications have the option to select web safe colors only. This should be an option in the color selection area of the program and will cause the program to allow you to choose only web safe colors. The technical answer lies in your understanding hexadecimal color schemes. To simplify this as much as possible, colors in your browser can be represented using hexadecimal format. Hexadecimal color format is a combination of six numbers and/or letters to represent a particular color. There are three pairs of two numbers and/or letters. The first pair represents the amount of red, the second pair the amount of green and the final pair the amount of blue in a particular color. The combination, red, green and blue become known as the RGB color format commonly used on the web. The characters used for hexadecimal are the numbers 0-9 and the letters A-F. In your HTML code you will see hexadecimal colors represented as below:

<body bgcolor="#FFFFFF">

The hash symbol at the beginning (i.e. "#FFFFFF") is necessary when representing hexadecimal format. This particular color would be white and #000000 would be black.

So how do we determine which hexadecimal formatted colors are web safe? This may be simpler than you think. You do this by using combinations of 00, 33, 66, 99, CC or FF for each of the pairs of red, green and blue. For example, #CC66FF or #00FF00 would both be web safe colors. Below is a chart of web safe hexadecimal colors:

If you stick to these colors, especially when you want or think you may one day need to blend a graphic with the background you will go very far in making your work look consistent and professional no matter what platform the end user viewing your site may be using.

 

Back to Main Article | Archived Articles