HTM-Hell: Adding Color To Your Web Pages

HTML: Adding Color To Your Web Pages

Gazoocifer's note: This tutorial deals with adding colors to your pages. You can use colors in backgrounds, fonts, tables, table cells and more. However, the process is exactly the same in each case. I have outlined the steps for you below.

How do I add Color(s) to my web pages?

Defining colors to use on various parts of your web pages is a very important part of creating your web site. No matter what color scheme you ultimately decide to use, you have to be able to code the colors correctly.

There are two ways of defining colors in HTML:

Define by using the Color's Name

Define by using the Color's Hexadecimal Color Code

There are many Tags that you can add the use of color to and they usually use one of two different Attributes:

COLOR=

BGCOLOR=

There are one or two exceptions to this but we will cover them in other tutorials.

Define by using the Color's Name:

You can identify and code a color by using it's name. There are several different color attributes and they are all coded the same way. I am going to use the  version to illustrate how this is done.

Let's begin with a basic Font Opening Tag:

<FONT

Now we need to add the Color Attribute:

<FONT COLOR=

The next step is to add the Color Name as the Attribute's Value:

Then add some text that you want to add the color to, and close the tag:

Here is some example text I want to color

The above line of code will display the example text in blue like this:

Here is some example text I want to color

There are many names for colors like silver, blue, orange, yellow, green, etc. Using these names is a perfectly legitimate way to code your pages. The problem with using this method, is that it limits you to using colors that have been given 'official names'. What if that blue we used is too bright? What if you want to use a darker blue, or a blue that has a little more grey in it?

In cases like that you will want to use the Hexadecimal Color Code method.

Define by using the Color's Hexadecimal Color Code:

The Hexadecimal Color Code is a 6 character alpha numeric color identifier. Ok, let's make it simpler:

The Hexadecimal Color Code consists of 6 numbers and/or letters, combining to give you over 14 million possible colors, shades, hues and tints.

The 6-number-and/or-letter combinations are actually 3 pairs of values where RR, GG, BB are the hexadecimal digits specifying the Red, Green, and Blue values of the color. This value is written as #RRGGBB. The number values range from 0 - 9; letter values range from A to F.

0 denotes no color, 9 denotes the strongest value of color.
A denotes the lightest shade, F indicates the strongest shade

For example here is the RGB Hexadecimal Color Code for RED: (#FF0000)

#FF	00	00
#RR	GG	BB

As you can see there is no Green or Blue value at all (indicated in the Green and Blue pairs with zero's), and the shade used is the strongest available (shown by using FF in the red pair). Each Hexadecimal Color Code must include a # symbol at the beginning.

Let's look at the Hexedecimal Color Code for the blue we used previously:

#0000FF (Four zero's and two F's)

(Notice there are no color value's shown for Red or Green, and the strongest possible value is assigned for the Blue pair.)

Here is how we would use the Hexadecimal Color Code with the same font tag we used previously:

First we need our Opening Font Tag:

<FONT

Then we need to add our Color Attribute:

<FONT COLOR=

Now we need to add the Hexadecimal Color Code as the Atrribute's Value:

Then add some text that you want to add the color to, and close the tag:

Here is some example text I want to color

Now just like before, the above line of code will display your text in blue, like this:

Here is some example text I want to color

The advantage of the Hexadecimal Color Code system is that it gives you a much wider choice of possible shades and colors to choose from.

Ok Mr. Color-Genius, how do I know which Color Code to use?

Good question!

The easiest way is to use a Color Picker that is probably included in your HTML Editor. If you are using a simple text editor like Notepad, you can find all sorts of Color Picking utilities on the Web for download and most of them are free!

In the case of an HTML Editor, you simply choose the color you want from a built-in color chart and the editor translates the color into the appropriate Hexadecimal Color Code for you. We have included a listing of simple, easy to learn HTML Editors in the menu to the left if you do not have one right now.