HTML: colors

Color codes and their uses.

So far, you've been using the default colors in your practice documents. In this section, you'll learn how to use color in your pages. Also, background images will be explained.

Here's a list of basic color codes:

purple=800080

light purple=9370db

blue=0000ff

cyan=00ffff

green=008000

light green=80ff80

yellow=ffff00

light yellow=ffff80

orange=ff7000

red=ff0000

pink=ff8080

magenta=ff00ff

brown=401000

grey=b0b0b0

white=ffffff

black=000000

The way I did that was through a simple FONT command. If you only want to change the color of a few words in your document, this way is best:

 This is light purple text 

Becomes:
This is light purple text
These color codes are one of the reasons I suggested that you keep an HTML notebook. I find it handy to have them right next to me when I'm designing a page, instead of having to interrupt my train of thought to go online and look it up.

Applying color to an entire page

I'm sure you've seen pages with different background colors, text colors, and link colors. All of these are affected through the <BODY> tag:

<BODY BGCOLOR=ff00ff TEXT=ffff80 LINK=ffffff VLINK=401000 ALINK=ff8080>

Here's what it means:

BGCOLOR--background color
This command specifies the color of the background from the browser default to whatever color you want it to be. It's always best to specify this, because the default for Internet Explorer is grey, while the default for Netscape is white, so if you want a white page or a grey page, you should specify it so that people will see the page the way you intended.
TEXT
Specifies the color of the text on the entire page.
LINK
This command specifies the color of a link before it has been visited.
VLINK--Visited link
This command specifies the color of a link after it's been clicked on.
ALINK--Active link
Specifies the color of a link when it's clicked on. The default for this is red.

You don't have to shut off each of these commands at the end of a document. Just use </BODY> as usual.
Here's how you can apply this to a page:

<HTML>
<HEAD>
<TITLE> colorful! </TITLE>
</HEAD>

<BODY BGCOLOR=ff00ff TEXT=ffff80 LINK=ffffff VLINK=401000 ALINK=ff8080>

<H1 align=center> COLORS! </H1>

<A href="http://members.xoom.com/FrogQueen/sitelist.html"> Honey's sites.. </A> 
 
<A href="http://www.eccentrica.org/piglet/buffy/"> 31 flavors </A> 
 
 
<A href="htmlcolor.html"> Go back </A>

</BODY>
</HTML>

Here's what it looks like.

Background images

If just having a color as your background isn't what you're looking for, you can insert an image. This is the command: BACKGROUND="pobg.jpg" (or whatever the name of the image file happens to be). There is no need to specify height and width or an alternate title for the image.

Let's try another page:

<HTML>
<HEAD>
<TITLE> background </TITLE>
</HEAD>

<BODY BGCOLOR=eca6a4 BACKGROUND="pobg.jpg" TEXT=000000 LINK=008000 VLINK=0000ff ALINK=ff8080>

<center> <IMG WIDTH="105" HEIGHT="214" src="po.gif" ALT="Po!"> 
Po is cute! 
Visit her at <A href="http://www.pbs.org/teletubbies"> the PBS page</A>. </center>

</BODY>
</HTML>

Here's what it looks like.

If these colors aren't exactly what you're looking for, you can check out these links for more codes:
HTML Goodies--non-dithering colors
Color Generator (only works if you have java)

Back to the tutorial menu