12 web design hours

Adding Color

Adding Color to your Webpage

An effective way to enhance web pages is to add color. You can specify both background colors and text colors.

Color tags give Web page authors some control, but you should be aware that browser settings and user preferences may effect your HTML documents. Still, you can add color to yoru documents quickly and easily. In this chapter, you will examine color options for Web pages, apply background color, and apply color to text.

Examining Color Options for Web Pages

There are two approaches you can use to add color to your Web pages. You can attach a color name to the BBCOLOR attribute tag, or you can provide a hexadecimal value to the BGCOLOR attribute tag.

using color names is the simpler apporach. Here is an example

<BODY BGCOLOR="purple">

The drawback to color names is that you must include the name exactly as the browser is programmed to read it. Often you are thinking "dark blue" while the browser is programmed to recognize "navy." Recent versions of Netscape and Internet Explorer recognize as many as 140 color names, which makes remembering them fairly difficult. Names range from BLANCHEDALMOND to STEELBLUE, so unliess you have a list handy, you could spend a long time guessing at color names.

Some safe names are

Aqua Black Blue
Fuchsia Gray Green
Lime Maroon Navy
Olive Purple Red
Silver Teal White
Yellow    

You can obtain more complete lists of browser-legible color names from a variety of Web sites, but there is another way that gives you more color control: YOu can designate custom colors by determining the hexadecimal (hex) code for an RGB value and then inserting that code in the BGCOLOR attribute.

  • Hexadecimal code, or hex, is a numbering system that uses both numeric and alpha characters to define sets of 16 elements Browsers can interpret hex codes as specific colors.

All colors have their sources in some combination of red, green, and blue. The term RGB represents those color, in relative proportions.

  • RGB represents red, green, blue - three colors of light that your monitor uses to create millions of colors

If you can figure out the character that make up the color you want, you can apply the color by varying the BGCOLOR value. Always procede the value with a hatch mark (#)

YOu can break down the hexadecimal code this way:

Positions Significance Full Color Value
1 and 2 Red value #FF0000
3 and 4 Green value #00FF00
5 and 6 Blue value #0000FF

Activity: colors1


Applying Color to Text

You can add color to text in two ways. You can color all the text on your page or color instances of text within your document.

To color all the body text in a document(except links), you add the TEXT=n attribute to the <BODY> tag, where n equals the color specification. to color instances of text, you surround the text with the <FONT COLOR=n> ... </FONT> tags.

YOu apply color to body text using the same color-naming schemes used to apply color to Web document backgrounds. You can use one of the browser-readable color names or the hexadecimal code for an RGB value.

Activity: textcolors