Color on the Web

Black text on a white background: It works for most documents, but not most websites. On the Web you can make a statement with color.

Before you jump in and start adding colors randomly, however, consider some of the limitations of displaying colors on the Web.

Browser-Safe Colors

The only way to guarantee your page will look the same on each user's monitor is to choose from a range of browser-safe colors for your webpage.

Most monitors can display at least 8 bit (256 colors), but only 216 colors are shared by the browsers and operating systems of different computers. These are your browser-safe colors. Think of these colors as your personal box of crayons. If you use colors outside this palette, the browser has to approximate, or dither, various colors to come up with the one you want. This may affect the quality and look of your webpage.

There are many resources on the Web that list "browser-safe" colors. Graphic artist and designer Lynda Weinman invented the term browser- safe palette. Her site is one of many that provide a swatch of colors to choose from.

There are as many colors as there are words to describe them. You have to give the browser specific instructions to display that particular shade of yellowish purple you like so much.

Colors on your monitor are represented by their respective amounts of red, green, and blue or RGB. Each color value is represented by a number. For example, the RGB for a particular shade of purple is 204, 051, 255. For your browser to understand, those numbers need to be converted to hexadecimal code. In hexadecimal code, each color is represented by two digits or letters. For example CC33FF is the hexadecimal code for that same shade of purple.

While this may sound complicated, it doesn't have to be. Most Web designers don't calculate the code themselves, but rather consult a resource that provides the code for you. Webmonkey offers one of many resources. In our HTML site look under the Color Chart in Extra Information.

Now that we have the mechanics out of the way, let's color.

The Body Tag

In an earlier edition of the class I introduced you to the body tag. Everything you want to show up on your webpage goes between the two body tags. You also use the body tag to set the colors for the background, font, and link color of each page.

Background color
To change the background color of a webpage add the bgcolor attribute to the body tag. For example

. The six letter code is the hexadecimal code for this particular shade of blue. Be sure to add a # in front of the code.

Font color
To change the text or font color you add the TEXT attribute to the BODY tag. 000000 is the hex code for black. That's easy to remember. To add black text to the pale blue background color we've chosen, add the following attribute

Design tip
There's nothing more annoying than unreadable text on a page. Make sure you have a good justification for changing text color on your page and that it contrasts well with your background color.

What about changing link color? Most links you see of the Web are blue. That's the default color the browser assigns to all links. The browser also assigns colors to links in different states. For example, click on a link and it turns red. That's an active link. Once a link has been visited, it turns purple. This lets users know they've already been to that site.

This is a basic link. The vlink is for the visited link and the alink is for your active link color

Now if you'd like to add emphasis to particular words you can use the font color attribute. It's looks like this:

Here's a great resource when you're ready to choose the colors for your webpage. Visit Moock's Color Scheme Machine. Here you can preview colors, test how they look together, and then copy-and-paste the code directly into your webpage. Another great option is Brian's ColorServe Java page.

Experiment with your color scheme to see how it fits your image and goals for your website. It may take some trial runs before you have the colors you're happy with.


	Web Workshop: Color on the Web Add color to every aspect of your website.