Setting HTML Color Attributes

Before we continue creating our web page, we’ll first need to learn how to set HTML color attributes. Attributes determine the appearance of a web page, such as background color, text colors and fonts. We’ll go over all of the tags and attributes later. However, for now, we’ll concentrate on displaying specific colors within your web page.

HTML Color Codes

In order to display colors within a web page, you must use special color codes within your HTML. These color codes are known as RGB color codes and are represented as hexadecimal values. The RGB color codes contain three sets of numbers representing the amount of Red, Green and Blue contained within a color. These codes must be used within your HTML to specify your selected colors.

Now, to put the above statement in English…if you’d like to display your web page background or text in a certain color, you must include the hexadecimal color code within your tag. Each color has its own color code.

The hexadecimal color codes can be used throughout your entire web page to specify all of the following:

• Webpage background color
• Font colors
• Table background colors (We’ll go over tables later.)
• Table border colors

See our complete HTML Color Codes Chart for a wealth of HTML color codes.

HTML Color Codes – Body Attributes

Now that you have a basic understanding of color codes, we’re going to focus on setting body attributes. The body tag attributes can be used to create the color theme throughout your web page. It can contain a background color command, a background image command, text color and link colors.

If the body tag contains no commands, the webpage will be viewed with the web browser’s default settings, which is the standard on the Internet.

HTML Color Codes – Background Colors

If you would like to specify a certain background and text color for your web page, you can do so by adding the bgcolor and text attributes to your body tag.

The above code will display your web page with a white background and all of the text will be displayed in blue. If you don’t define your web page background color, it will be displayed in the default setting of white. If you don’t define your text color, it will be displayed in the default setting of black.

Keep in mind when selecting background and text colors, the text must be clearly visible to your visitors. Your best option will be to use the default colors – white background, black text.

Background Images (deprecated)

If you would like to display your web page with an image background instead of a background color, place background=“image.gif” within your body tag.

The image.gif text represents the name of your image. This image must be uploaded to your server in order to display on your webpage. In addition, the background value (image address) should lead to your image file.

Keep in mind, your text must be clearly visible. Again, your best option will be to use a plain white background.

HTML Color Codes – Link Colors (deprecated)

If you would like to specify your link colors throughout your web page, add the link, vlink and alink attributes to your body tag.

link – Standard non-visited link (deprecated in the body tag) Style sheets are recommended.
vlink – Visited Link (deprecated in the body tag) Style sheets are recommended.
alink – When Clicked (deprecated in the body tag) Style sheets are recommended.

This example will display the link color as dark blue, the vlink color as medium blue and the alink color as purple. Notice the values are displayed as hexadecimal color codes.

HTML Color Codes – Default Link Colors

link – Blue
vlink – Purple
alink – Red

This concludes the HTML colors tutorial. In the next section, we will focus on HTML links.