Color and the Web

Color can add interest and focus to the ideas on web pages. Poorly chosen colors can also cause readers to flee your web pages as soon as they appear. A few basic ideas can keep you from the worst settings, but color is a complex topic because of the number of variables involved. Be careful that attention or interest in color takes significant time away from getting content and other design work completed. Also be careful of the company your colors keep, for the color of the company changes our reading of the color of a spot. That is, the same color will look different depending on the other colors around it.

As with the text at the top of this page, text letters can be given their own color. Look for such commands in the tool bar of web page editors. There are also commands for creating a highlighted color that will go behind the text.

There are often design problems of color contrast depending on what piece of information should be in focus. A common problem  is inadequate contrast between text in the foreground and a color in the background so that the text can barely be seen. Further, some color combinations create tension and clash with each other. Such arrangements might be done purposely. 

A remarkable tool for experimenting with different color combinations in general and for choosing web page colors in particular is the Color Wheel Calculator page. For additional advice on which colors to mix or combine, see Glithero's Set the Mood with Color; and Newark's Set the Mood With Color. For further information, search the web for "design principles" and color or web color.
 


a color wheel
When there is a need to make something really noticeable, look for color wheel palettes available when selecting colors and select colors on the opposite sides of the color wheel. The opposite colors are complementary colors. Quick tutorials on complementary colors include: Sanfords' complementary colors.

In SeaMonkey or Netscape Composer, the selection of background colors for a web page are set from the Page Properties command under the Format menu item.

graphic of commands to change colors of links

Different background colors can be also selected for each table in a page or for each row or cell of a table. Also under Page Properties, the colors of the links can be changed.

A web page can have different colors for foreground text, whose colors can be selected from the Netscape Composer tool bar or from the Format menu item. Different operating systems have different ways to display the colors available for selection such as the crayon box.

a box of different color crayons used for color selection of web pages




A past or outdated technical problem has been the issue of models of Windows computers that cannot display more than 216 colors, which meant that millions of colors were "unsafe" to use. There are still many references to these unsafe colors, but this has not been a problem with new Windows computers for years, but some of the older computers are still in use. Quick tutorials and tools for finding tints and shades of colors that go well together and that utilize "safe colors" include: Visibone's Color Lab ; and Lynda's web safe color dilemma. Also consider the issue of color blindness. Many individuals have various degrees of color blindness. Therefore, web pages should also have sufficient gray scale contrast so that if colors cannot be seen, the contrast in light values should still make text and objects visible. This palette selects only web safe colors. There are some 210 colors that work across all platforms and ages of color capable computers.

slider color selection image for web safe colors
Look for and try different palettes.
 

There are also a number of hardware and network related issues. Older computer systems can only display 256 colors while current systems can display millions of colors.  The more colors in an image the larger the file size that must be stored and the longer it takes to transmit. Different computer platforms also display different intensities so that an image created on one system may appear too light or dark on another. The new png image format that has come after jpg and gif is designed to automatically correct for differing color intensities on different models of computers.

Though the names and locations of specific commands will vary, all web page editors have the commands to change these basic color settings.


Back | Page author: Houghton