Understanding Web Based Colors and Codes

In this lesson, we will talk about understanding web based colors and codes and try to enhance our website's look and feel and make it professional. This is a very important aspect of creating a website, so please give extra attention to this chapter. Later, we will enhance this concept using CSS styling.

With HTML, you can define almost every element with a color: text, image borders, background, tables, ruler bars. Links can be treated separately, and text within tables can be given colors different from text outside of them. This gives you a great deal of power over the appearance of your web page without adding graphics.

Hexadecimal Colors

Hexadecimal is a method of counting based on a base 16 series. Instead of counting 1,2,3, through 10, the hex count is 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Colors online are based on three sets of two hex numbers each, so #9A335F is really 9A 33 5F. Each of these three pairs refers to the color saturation, from 00 being no saturation to FF being complete saturation, of three primary colors red, green, and blue.

Okay, you say, I remember my kindergarten, and green is not a primary color! That's true for crayons. However, light does not work in nice equal portions of red, yellow, and blue. Instead, the portion of the color spectrum that controls yellow is really tinted green. In order to create yellow, you have to cancel out the blue in green. Moreover, the color #000000, or no saturation in any of these colors, is black, not white. #FFFFFF is white.

You should be able to predict basically what colors you're looking at from this. Red is #FF0000. Blue is #0000FF. Yellow is #FFFF00 - the red saturation cancels out the blue in green, leaving only yellow.

You can find a long list of some of the more common colors at http://www.computerhope.com/htmcolor.htm. You can also use a shorter list of named colors that every browser will interpret in the same way:

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


Changing Background Color

Color is always an attribute inside a tab, but the specific syntax changes a bit from item to item.

In the <BODY>, your attribute is bgcolor:

<BODY bgcolor="#FF0000">

<BODY bgcolor="red">

In both these instances, this will change the background color of the whole web page to red. My advice: Do NOT do this. Red is one of those colors that is almost impossible to read, or read text from. I'll give you more advice on not just using color, but using color properly, in the next tutorial.

Changing Text Color

Using the <BODY> tag, you can change the color of your text as well as links throughout your entire page. There are four different attributes you can change: the colors of the text, unvisited links, the links when you hover over them, and the visited links. Here is an example, with each of those attributes changed in order:

<BODY bgcolor="black" text="white" link="aqua" alink="red" vlink="gray">

So you have a body text in black, and all your text, on first visiting, appears white (for regular text) and aqua (for links). When you click down and hold a link, it turns red. And after you've visited a link, it turns gray. Pretty simple, right?

A word of advice: never make your link colors too close to your body text color. They need to be distinct, or people will miss them entirely.

So what if you want to change the color of one section of text, not the whole document? You can easily do this by changing the color attribute of the <FONT> tag:

<FONT color="#FFFFFF">I am now white text.</FONT>

This can be blended in with the rest of your <FONT> attributes.

And One More Thing

Remember the <HR />? If you want your divider lines to have color as well, just add this attribute in:

<HR color="blue" />

You can also use attributes width (a percentage of the area the HR is located in), align (left, right, or center are the values), and size (a number of pixels for the height of the line). If you want a solid line with no shade, add this:

<HR color="blue" noshade />

Try This:

Using any or all of your sandbox pages, change your background colors, font colors, and anything else you want to change. Try red background with blue text (but put on your sunglasses first), look at how bolding text can make some of your color combinations easier to read, and experiment with hexadecimal code. Also, add your <HR> in there somewhere, just for variation.

This lesson on understanding web based colors and coding helps you in creating a website which is professional and pleasing to the visitors' senses. In the next lesson, we will look at the right way to use colors which will be appealing to the visitors and not make a mess out of your website.