Rocketface(R) Workshop Home

Follow the arrows at the bottom of each page for the tutorial, "How to Design a Website".
To study a particular aspect of website design refer to this tutorial index.

Web Safe Colors
Using the safety palette or web-safe palette in website design

Using the web-safe color palette

The web-safe palette system provides the maximum number of colors that can be individually perceived by the human eye. If you limit your graphics and text colors to this safety palette or web-safe color palette they will render uniformly to both you and your visitors.

The safety palette is a group of 216 colors that will display the same on all web monitoring devices and the colors won't dither or smear. Dithering occurs when a computer system attempts to display an image when it doesn't have the exact color available. It will simulate the color by combining the colors it does have. This condition is called dithering. It is a process that will produce some very fuzzy colors that can ruin your web page design. Below is an example of how dithering can affect a web page's presentation.

An example of color dithering

The following example illustrates the negative effects that dithering can have on a browser display. The first image is rendered in 16 million colors and the second is how this same graphic would appear on a screen that is limited to 216-colors. As you can see dithering can have a profound effect on the appearance of graphic elements when the safety palette is ignored.


Color dithering example
Example of color dithering

Staying within the safety palette range

How important is it to stay within the safety palette range? It depends on how wide a target audience you want to reach. As more and more users upgrade to newer systems, this may become less of a problem.

However, keep in mind that not everyone with 32-bit color capability chooses that monitor option. So, the decision is yours. If you feel the majority of your website visitors will have high-end systems with full color capability, then, by all means, use a larger color palette.

The emotional effects of color in website design

The colors you use can elicit different emotions. The emotions that can be evoked by common web safe colors are as follows;
  • Red and Orange - These colors denote power and energy. They are best used for drawing the attention of your visitors and/or eliciting a response from them, such as a call to action.

  • Yellow - This color can be stimulating and promote a sense of fun. Used wisely this web safe color can add vibrancy to an otherwise drab presentation.

  • Green - A color that has a calming effect. Use this color whenever you wish to convey a sense of peace and tranquility in your presentations.

  • White - This color is neutral but it is very important. It is the background color of most websites and acts as a canvas for your text and graphics.

  • Black - A serious color that gives the feeling that you mean what you are saying. Text and graphic elements in this color provide a sense of stability and trust.

The subliminal effects of color

The use of color is a very important consideration in your website theme and web page design. It causes emotional responses and conveys a sense of what you are trying to say.

Color has a subliminal effect on the human mind. Often we are unaware of the impact of color on our buying decisions or how we relate to the message we are being presented. This is especially true of the online experience where colors explode at us from just about everywhere.

Never underestimate the power of color in designing your website. It is a dimension of communication that gives emotional weight to what you are presenting.



For more in depth information see:

BACK: Website Graphics NEXT: Website Templates

Copyright© 2014
Rocketface® Graphics
  • Analyze
  • Organize
  • Develop
  • Implement
  • Maintain
  • Sitemap