LESSON NINE - COLOR


You may read the following sections in their entirety
or use these choices to go directly to a section.

Return to Home Page | | Understanding color | | Hexadecimal versus decimal | | Changing the background color of a web page | | Changing the color of all the text on a web page | | Changing the color of a block of text | | Using an image for the background of a web page | | Preventing the background image from scrolling (a fixed background) |


UNDERSTANDING COLOR

The browser default background color for many browsers is gray with black text. As you may have noticed in all of my lessons, I changed this gray background to a white background. I like a white background with black letters. This makes for easier reading as it gives the greatest contrast. Generally when you read a book, the pages are not gray but white. Magazines make great use of color. Even fake trees and plants make good use of color to make them seem more realistic. Often you see headings emphasized in color (my headings in this lesson are in a maroon color) and advertisers use color to attract attention to their ads.

If your browser supports color, you should see this lesson printed in red text with dark green links (instead of the standard blue links). If you click on one these links and then return to the same spot, the link becomes a "visited link". I changed the visited link color from the standard purple to a darker magenta. When you click and hold the mouse button on a link (don't release the mouse button), it is called an "active link". It represents the link that is currently being selected. The default color for an active link is red. In this lesson I changed it to a dark blue color. We will be discussing each of these situations later in this lesson. Keep in mind that the quality of color displayed in a browser is also dependent on the quality of the monitor being used. Thus colors in some browsers may not be as sharp as you might expect, or a color could be displayed in a slightly different shade than you might have intended.

Click here if you would rather view this same lesson without the red text (standard black text).

Most, if not all browsers today support coloring the entire text, a block of text, changing the background color of a web page and changing the color of the links. This lesson is for those who have browsers that do support color in one form or another.

Because some people may still be using browsers that do not support full color, or using monitors that do not support color (for example, a black and white monitor), or using monitors that do not have at least 16 bit color (which is the minimum you need), it is important that you do not rely totally on color for emphasizing text. Remember that you are to design your web pages also for content and not just for appearance. How a web page looks in your browser will not necessarily be how it looks in another browser. So if you want to use color for those browsers that do support them (as I often do), that's fine, but if you want to emphasize text, you must still use logical tags such as <STRONG> and <EM> or a header tag. This way your text will still be emphasized whether a browser supports color or not, or if a web page is being viewed in a color or in a black and white monitor. Remember also that some search engine indexers do rely on the header tags to generate an overview of your web page and they will not be able to get that overview if you use color instead. Color then should be used only as an enhancement of your presentation.


top | | bottom |

HEXADECIMAL VERSUS DECIMAL NUMBERS

To change the color of your text, background, etc., your need a six digit code preceded by a "#" sign. The code takes the form "#RRGGBB" where RR stands for the amount or intensity of RED in the color, GG for the intensity of GREEN, and BB for the intensity of BLUE.

Before we continue with this discussion, take a moment now and see a table giving a good range of colors and their corresponding codes. The table is in Lesson Ten. When you are ready to return here, just click on the BACK button.

Please send me to Lesson Ten to see the color table

Unfortunately, the numbers needed for the color codes are not in our number system which is the Decimal System or base 10. No, the numbers needed for any color code are written as Hexadecimals or base 16.

Our Decimal Number System uses the digits from 0 to 9 as in:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

There are 10 of these digits and our number system is based on these 10 numbers - hence the name "base 10". Once you go past 9, you combine digits as in 10, 11, 12, etc.

The Hexadecimal Number System uses 16 different digits before digits are combined (hence the name "base 16"). These 16 digits are:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Once you go past "F", you combine the digits as in 10, 11, 12, etc. Here is the direct comparison between the two systems:

DEC: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18

HEX: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,  A,  B,  C,  D,  E,  F, 10, 11, 12

Note that "A" is our number 10, "B" is our number 11, "C" is our number 12, "D" is our number 13, "E" is our number 14, and "F" is our number 15. Continuing on, we have Hexadecimal 10 is our number 16, Hexadecimal 11 is our number 17, and Hexadecimal 12 is our number 18. Thus Decimal 11 = Hexadecimal B, Decimal 15 = Hexadecimal F, and Decimal 18 = Hexadecimal 12.

In the decimal number system, the intensity of each of the colors RED, GREEN and BLUE in a color code ranges from 0 to 255 (= a range of 256 numbers). 0 is OFF meaning it contains no amount of the color and 255 is FULL ON meaning full intensity of the color. Since the code for each of the three colors must be given as a Hexadecimal Code, the intensity for each color ranges from 0 to FF (Hex FF = Dec 255). In addition, the amount of each color must be given as a two digit code (2+2+2=6 digit code for the color). Thus 00 is OFF meaning that Hex 00 contains no amount of that color, while Hexadecimal FF is FULL ON meaning full intensity of that color. All the numbers in between Hex 00 and Hex FF give the millions of different colors. How many choices do you have? Well, if you have 256 choices for each colour and there are three basic colors (red, green, and blue), you have 256x256x256=16 777 216 different colors!

CONVERTING A DECIMAL NUMBER TO HEXADECIMAL

When you look at a color chart or palette in a paint program such as Paint Shop Pro, you will see that all the colors are given as decimal numbers. If you look carefully in Paint Shop Pro, you will also see an HTML box that gives the equivalent Hexadecimal value. For example, suppose you see a color you like and it says that the RGB index (intensities of red, green and blue) is 46, 250 and 34 respectively. Look in the HTML box and it will say #2efa22. This Dec 46=Hex 2e, Dec 250=Hex fa and Dec 34= Hex 22. As you will see later in this lesson, it is the 6 digit Hexadecimal value that must be used in the coding of a web page. Now if your paint program does not give you the equivalent HTML Hexadecimal value, or if you have a decimal number that you would like to know the Hexadecimal equivalent, here are three suggestions on how to do this.

  1. Use a scientific calculator that has a built in DEC-HEX converter.
  2. If you are using Windows, SWITCH to the ACCESSORIES group where NOTEPAD is located and you should find a calculator. Double click on the calculator and there it is!
    Now, you need to change this calculator into a scientific calculator, so choose VIEW and then choose SCIENTIFIC. Now you have a scientific calculator. Note the little round buttons beside the HEX and DEC. They are called Radio Buttons. To change Decimal 46 into Hexadecimal, just click in the radio button beside DEC and then type in 46 (or use the mouse and click on the numbers 4 & 6). Now click on the radio button beside HEX and immediately the display shows 2E. Therefore, Dec 46 = Hex 2E.
  3. Find a website that will convert any decimal number for you. There are several websites that do this. Just go to your favorite search engine and search for the phrase converting decimals to hexadecimals.

Using one of these three methods, you should also find that Dec 250 = Hex FA and Dec 34 = Hex 22. Thus if the intensities of red, green, and blue are 46, 250 and 34 respectively, your Hex color code is "#2EFA22"

Here is a problem for you to try:

Problem 1: What is the Hexadecimal code if the RGB factor is Dec 99,255,128?

Click here  to go to the answer section |


CONVERTING A HEXADECIMAL NUMBER TO A DECIMAL NUMBER

Although you would not convert from a Hexadecimal number to a Decimal number when creating color codes for web pages, I offer the conversion here for interest sake. To convert a Hexadecimal number to a decimal number, you can of course use a calculator that has this capability or you can use the computer's built-in calculator. Here is a quick and easy way to change a two digit Hexadecimal number into a decimal number. In a two digit Hexadecimal number, the first digit (or rank) has weight equal to 16 and the second digit (or rank) has weight equal to 1. For example, in the Hexadecimal number 9F, "9" is considered to be in the first rank and "F" is considered to be in the second rank. Therefore the Hexadecimal number 9F = 9x16 + 15x1 = 144 + 15 = 159. Thus Hex 9F = Dec 159. Recall that Hex F is equal to Dec 15 and that is why we have 15x1 since F is in the second rank of 9F.

Using the above reasoning we have Hex FF = 15x16 + 15x1 = Dec 255.

Also, Hex C4 = 12x16 + 4x1 = Dec 196. Since Hex C = Dec 12 and it is in the first rank, we have 12x16.

Problem 2: What is the Decimal number if the Hexadecimal number is 7B?

Click here  to go to the answer section |


top | | bottom |

CHANGING THE BACKGROUND COLOR OF A WEB PAGE

To change the background color of your web page, you need two things:

This is the command to change the background colour:

<BODY BGCOLOR="#RRGGBB">

BGCOLOR stands for BackGround COLOR. Note that BGCOLOR is a BODY attribute. In other words, BGCOLOR is supported by the BODY tag as you will see in the example document given below. Also note that the # symbol is part of the code. Leaving out the # symbol is considered a poor coding practice.

As stated in the above "hexadecimal versus decimal" section, RR stands for the intensity of RED in the color, GG for the intensity of GREEN, and BB for the intensity of BLUE. Here are some basic color codes:

#000000 = Black
#FF0000 = Red
#00FF00 = Green (more like a lime color)
#0000FF = Blue
#FFFF00 = Red + Green = Yellow
#FF00FF = Red + Blue = Magenta
#00FFFF = Green + Blue = Cyan
#FFFFFF = Red + Green + Blue = White

Here are some additional codes:

#808080 = Gray
#800000 = Maroon
#800080 = Purple
#008000 = Darker Green
#808000 = Olive
#000080 = Navy
#008080 = Teal
#C0C0C0 = Silver

Thus to get a white background, the command is:

<BODY BGCOLOR="#FFFFFF"> as in:

<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
*
*
*
</BODY></HTML>

You can use any color code you like and the table in Lesson Ten gives a range of sample colors and their corresponding Hexadecimal values.

Problem 3: Using one of the above codes, what is the command line if you want a full intensity blue background and no amounts of red and green?

Click here to go to the answer section |

You can also use the following color names instead of their color codes but keep in mind that these names are not as widely supported as the hexadecimal values.

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow


top | | bottom |

CHANGING THE COLOR OF ALL THE TEXT ON A WEB PAGE

To change the text color of the entire or full web page, you need two things:

Changing the color of all the text is done through the BODY tag. This also applies to text links. If you include the links, you can change the color up to four levels.

Here are the attributes of the BODY tag to control all the levels:

TEXT="#RRGGBB"     to change the color of all the text on the page (full page text color.)

LINK="#RRGGBB"     to change the color of all the links on the page (from the standard blue color.)

ALINK="#RRGGBB"    to change the color of all Active links (from the standard red color). This color occurs when you click and hold down the mouse pointer over a link. ALINK stands for Active LINK. That is, ALINK represents the link that is currently being selected and this link is highlighted with the color defined in the ALINK value.

VLINK="#RRGGBB"    to change the color of all the links after they have been visited (from the standard purple color). VLINK stands for Visited LINK.

You should keep in mind that some people are used to seeing blue links and purple visited links. When they see blue underlined text, they automatically associate this with a link. Changing these colors could cause some confusion. So do use these color attributes with care - that is, don't over do it.

Problem 4: Give the BODY command line that gives a WHITE background, RED text, GREEN (lime) links, BLUE active links, and MAGENTA visited links.

Click here  to go to the answer section |

Color attributes affect the appearance of the web page and it is possible for a viewer to disable BODY colors. Therefore, if you set one of the BODY color attributes (such as TEXT), it is recommended that you set them all. If you don't, your specified color could conflict with a user's default. This could result in unreadable text. So if you want control of the colors, set all the attributes. Also, do not set the unvisited and visited links to the same color. It will confuse your viewers. Finally, you should be aware that some colors do make text difficult to read if viewed on a black and white monitor (although most people today are using color monitors). One way to find this out is to test your web pages on a black and white monitor.


top | | bottom |

CHANGING THE COLOR OF A BLOCK OF TEXT

While all browsers support changing the color of the entire text (full page text color) on a web page, there may still a few low level browsers that do not support changing portions of text to a different color, or surfers using a monitor that is not a color monitor. Therefore do not rely totally on color to emphasize text. So use color if you want, but still use logical tags such as <STRONG>, <EM>, header tags, etc. to emphasize text.

To change the color of only a portion of text (a block of text), use the formula:

<FONT COLOR="#RRGGBB">text text text</FONT>

where RRGGBB represents the Hex code of your desired colour. FONT is a container element and so anything between the opening and closing FONT tags will be changed to the specified color. The closing tag, </FONT>, restores the previous text color.

Problem 5: Write the command line that produces the following line in your browser with the words "Firefox and Internet Explorer" in blue:

Among the most popular browsers are Firefox and Internet Explorer. Both can be downloaded from the internet.

Click here to go to the answer section |


None of the browsers which support the FONT tag, allow their users to disable it. Yet it is possible for a user to disable BODY colors. This means that if you use FONT COLOR to change font colors and the viewer has overridden your BODY colors, the text may wind up invisible.

One final suggestion: If you plan to use the FONT tag with a HEADER tag, you should place the FONT tag in front of the HEADER tag and not the other way around. For some reason, a number of browsers that do not support the FONT tag for color, won't support the HEADER tag either if the HEADER tag is not placed right before the heading. In other words, the HEADER tag will work in:

<FONT COLOR="#FF0000"><H2 ALIGN="CENTER">heading</H2></FONT>

but will not work in:

<H2 ALIGN="CENTER"><FONT COLOR="#FF0000">heading</FONT></H2>


top | | bottom |

USING AN IMAGE FOR THE BACKGROUND OF A WEB PAGE (wallpapering a background)

Do you want to see this lesson with a blue stucco background? If you do, just click here and then if you want, you can continue the lesson with the stucco background or click the BACK button to return here.

When an image is used for the background of a web page (that is, when you see the background of a web page wallpapered), it is actually one small .gif or .jpeg (or .jpg) image repeated over and over again. Here is the actual full size image I used for the blue stucco background:

Color

This little image named blue_stc.jpg was repeated over and over to make up the blue stucco background. If you look closely at a web page with an image for the background you will often see the repeated patterns. In my blue stucco background you will likely not see the repeated patterns (that is, the repeated blue stucco image) because the nature of this stucco background creates a seamless pattern.

You can compare placing an image for the background of a web page to wallpapering a wall in your home. By the time the wall is covered with wallpaper, it looks like one large sheet of wallpaper, but in fact is made up of several narrow sections of paper, in which the seams are place together in such a way that the patterns match.

Although the background wallpaper is made up of several smaller .gif or .jpeg images, it is loaded as one file and is a BODY attribute. If you want to save the wallpaper (and your browser lets you), just do it in the same way you save any image. For example, if you go back to my lesson with the blue stucco background, just click anywhere on the stucco wallpaper with the right mouse button and then choose SAVE AS... You can then save it to any folder, even changing the name if you want to.

The command to bring in a background image is:

<BODY BACKGROUND="image.jpg">

where "image.jpg" represents the name of the image. Note two points with this BACKGROUND attribute:

  1. This BACKGROUND attribute overrides the BGCOLOR attribute simply because the image goes over top of the background color.
  2. If the background image cannot be displayed by the browser, the color specified in BGCOLOR will be used. If you do not specify a BGCOLOR, the browser's default background color will be used.

Here is an example of a BODY tag that changes all the text to red, the links to a darker green, the active link to blue, the visited link to a darker magenta, with a stucco background (which is the one I used).

<BODY TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF" BACKGROUND="blue_stc.jpg">

You can have these attributes in any order and you do not have to use all of them. However, as we learned earlier in this lesson, if you set one attribute, you should set them all to avoid possible conflicts with a viewer's default values.

Note that an image for a background will result in your web page taking longer to load than a web page with no image for a background. That is because it is an image and images take longer to load. I have seen some very large images for backgrounds that result in web pages taking far too long to load. This can turn off visitors who may leave your website before the page is finished loading.

You can also control the background color while the web page is loading the background image. For example, if you do not want that gray background while the background image loads, you could change it to a white (or some other color) background. As soon as the background image appears, it will wipe over the white background. For example, the following BODY tag is the same as the above one except that the background color will be white while the stucco background loads (the same as my stucco example you visited). Try different colors and you will get different effects.

<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF" BACKGROUND="blue_stc.jpg">

You are encouraged to include the BGCOLOR attribute along with the BACKGROUND attribute because if the background wallpaper image cannot be displayed by the browser, the color specified in BGCOLOR will be used.

You can create your own image backgrounds or you can take them off the net. There are several places where you can find background images that are free to take. Just go to your favorite search engine and do a search for "free background images".


top | | bottom |

A FIXED BACKGROUND IMAGE

Every once in a while I get an email asking me for the coding to prevent the background image from scrolling with the text. In other words, they would like to see the background image in a fixed position with the text and images scrolling over top of it. Well, to prevent the background image from scrolling (and thus also preventing the image from repeating itself over and over again), you use the BGPROPERTIES attribute as in:

<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" BACKGROUND="blue_stc.jpg" BGPROPERTIES="fixed">

Note: The BGPROPERTIES attribute will only work in Explorer browsers as BGPROPERTIES is an Explorer attribute. In other words, Firefox and Netscape do not support the BGPROPERTIES attribute and so will ignore the attribute and scroll the image with the text. Therefore it is a good idea to also see what your web page will look like in Firefox or what it will look like without the BGPROPERTIES attribute. Unfortunately there is no similar attribute that can be used for Firefox and Netscape browsers.


top | | bottom |

ANSWERS

  1. Dec 99 = Hex 63; Dec 255 = Hex FF; Dec 128 = Hex 80, so the code would be "#63FF80".
  2. Hex 7B = 7x16 + 11x1 = 112 + 11 = 123
  3. <BODY BGCOLOR="#0000FF">
  4. <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00FF00" ALINK="#0000FF" VLINK="#FF00FF">
    You can use these BODY attributes in any order.
  5. Among the most popular browsers are <FONT COLOR="#0000FF">Firefox and Internet Explorer</FONT>. Both of them can be downloaded from the Internet.


| Back to the top of the page |

Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Ten |


The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2012 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to email