Beginning: Changing Font Colors

One of the great things about publishing your work on the Internet is that you have a huge variety of ways to express yourself. One of our favorites is the ability to use different colors. We've described the process of changing the colors in the background of your Web page in an earlier newsletter but we haven't touched on the foreground elements yet, namely the color of the font that you use for your text. You can find information about the background color at http://freeservers.com/newsletter/build/background.html (or simply click on the underlined text to go there now, then use your browser's "Back" button to return here).

Where do I start?

Remembering that a Web page is built literally using "tags," it is not surprising to find that color is a "property" of many different tags. That means that you can change the color of an element by including the word "color=" and a value for the color within that element's tag. You will need to know two simple things, then, in order to change the color that your written words appear in: which specific tag to modify and what color to use.

Which tag do I modify?
What color do I want to use?
Commonly supported names of colors
The hexadecimal method for color values
Some cool examples of color use

Which tag do I modify?

To answer the first question, the specific tag that you will need to modify is the <FONT> tag. To tell the Internet browser what color to display, change the tag to <FONT COLOR="your_color">, replacing "your_color" with whatever you want to use. Here are some basic examples:

<FONT COLOR="BLUE">This text is blue.</FONT>
will produce the following line.
This text is blue.

<FONT COLOR="RED">This text is red.</FONT>
will produce the following line.
This text is red.

<FONT COLOR="GREEN">This text is green.</FONT>
will produce the following line.
This text is green.

Note that you begin by using what is commonly called a "starting font tag", namely <FONT COLOR=.....>. You then include the color that you want to apply to the property "Font." And finally, you bring the effort to an end using an ending font tag, namely </FONT>.

Which color do I want to use?

To answer the second question, you can either use the name of the color, because many of the common colors are recognized by most Internet browsers, or, to use a more specialized color, you can to use its value in hexadecimal. Okay, okay, I know that for many of us the word "hexadecimal" brings to mind those terrible dreams of showing up to math class in our underwear, but in reality, color creation using hexadecimal is surprisingly intuitive and very simple. Even more importantly, it opens the door to upwards of 16 million colors instead of the mere handful whose names we all know.

To illustrate the difference between using the name of a color and using the value of a color, here are some examples:

<FONT COLOR="BLUE">This text is blue</FONT>
... and ...
<FONT COLOR="#0000FF">This text is blue.</FONT>
will both produce the following line.
This text is blue.

<FONT COLOR="RED">This text is red</FONT>
... and ...
<FONT COLOR="#FF0000">This text is red.</FONT>
will both produce the following line.
This text is red.

<FONT COLOR="GREEN">This text is green.</FONT>
... and ...
<FONT COLOR="#00FF00">This text is green</FONT>
will both produce the following line.
This text is green.

Both the names of colors and a more complete introduction to their values are outlined in the following sections.

Commonly supported names of colors

This is not intended to be a comprehensive list. It will only give you an idea of some of the range of color names that an Internet browser will recognize. If you use a color that a specific browser does not recognize, it usually doesn't draw any color, but this is not always true. For a more specific list of colors, visit http://html.about.com/compute/html/library/bl_namedcolors.htm, which is a list of colors described by one of the About.com guides.

 

Name	Color
BLACK
BLUE
CYAN
DARKGREEN
GOLD
GRAY
GREEN
LIME
MAGENTA
PLUM
RED
SALMON
SILVER
WHITE

The hexadecimal method for color values

While the term "hexadecimal" may conjure frightening images, it is entirely unwarranted in this case. The use of hexadecimal to choose colors is reminiscent of mixing paint or crayons and is simple to do. You need only to know the most basic idea behind the color value. A color value will appear as six digits and is usually preceded by a number sign, pound sign, or hash mark, whichever semantical term you enjoy most. It is simply a "#", followed by the six digits mentioned. These six digits can include the numbers 0-9 and the letters A-F. It will look something like "#00112F" or "#991100," for example.

Just consider the way we usually count starting with 0, ... 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ... notice that when we get above 9 we add a digit which we call "ten" so now instead of one number we have two numbers to represent values larger than 9 (for the trivia buffs, this is called base 10.)

In hexadecimal, the counting goes like this 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12. Notice that instead of ending at 9, we use A to F to represent values larger than 9 before we have to create a second digit (trivia buffs, this is called base 16.) If it doesn't make a lot of sense, don't worry. Just pretend that the letters are numbers bigger than 9, but still only one digit. So, because we use a means of counting from 0 to F, color values can have letters in them. If it doesn't all click, don't worry. With just a little experimenting by changing color values, you will catch on quickly. Next, you need to know that by changing these six values, you are really mixing three basic colors, red, green, and blue. . . that's it.

Each color is represented by two digits. The first two digits are red, the second two digits are green, and the last two digits are blue. If the first two digits are 00, it means show no red at all (the minimum value), while if the first two digits are FF, it means show as much red as possible (the maximum value). The same applies to the green and the blue. From the days of early childhood, you probably will remember that if you mix red and blue together you get ... purple. So if you have a value of "#FF00FF" (which means maximum red, minimum green, and maximum blue), then you get purple. The true beauty of this means of producing colors comes in the subtleties. If you experiment even a little, you will be pleasantly surprised at the huge variety of colors than can be represented. To get you started, here is a basic illustration of the colors produced by different values.

 

Code	Red	Green	Blue	Color
#000000	00	00	00
#FFFFFF	FF	FF	FF
#FF0000	FF	00	00
#00FF00	00	FF	00
#0000FF	00	00	FF
#FF00FF	FF	00	FF
#FFFF00	FF	FF	00
#2468AC	24	68	AC
#FDB975	FD	B9	75

Some cool examples of color use

Here are a few ideas to spark your imagination. You are free to cut and paste these into your own pages and modify them in any way. We'd also love to see any great examples that you have.

This is an example of many colors.

This is an example of a slide.

This is an example of a transition.

One warning about using colors: it is possible for the foreground and the background to be the same color. When the color of text approaches the color of the background, it becomes increasingly difficult to see the text. You may have noticed that in the examples above, some of the lighter colored letters are more difficult to see. Just be sure that when you choose colors, you choose ones which contrast nicely.