html tips: colors
font color
You can specify colors in HTML with certain color names, or with what's called the RGB Hex Triplet code. (RGB is for Red, Green, Blue). The next three examples show the code for specifying font colors, first with names, then with RGB Hex Triplet code.
<font color="red">This is red</font>
This is red
<font color="green">This is green</font>
This is green
<font color="blue">This is blue</font>
This is blue
<font color="#ff0000">This is red, too.</font>
This is red, too.
<font color="#00ff00">This is green, too.</font>
This is green, too.
<font color="#0000ff">This is blue, too.</font>
This is blue, too.
Notice that the RGB color code renders a different color for "green" than the word does. RGB is more specific, so is preferred. Note that colors will be rendered differently on different monitors and different systems. See the RGB Hex Triplet Color Chart (68 K) on this site for more examples of codes.
page color
I've set the color of this page to be white. Page color is set in the <body> statement, like this:
- For a white background:
- <body bgcolor="#ffffff">
- For a black background:
- <body bgcolor="#000000">
text and link color
You can set your text and link colors in the <body> statement, too. Here's an example, with an explanation after it (and you can see what this code does on the example page):
<body bgcolor="#000077"
text="#ccccff" link="#99ffff" alink="#ffcc00" vlink="#ffccff">
| Explanation of the code |
| text= |
sets the default text color for the page |
| link= |
sets the default link color for the page |
| alink= |
sets the default active link color for the page;
this is the color you get the instant you click a link. |
| vlink= |
sets the default visited link color for the page;
this is the color of links to pages you've already been to. |
table colors
Table colors use the same code as you used in the <body> statement. You saw one application of this in the table above. The "header" area of that table is shaded a light grey; here's the code which sets the color for that section of the table:
<td colspan=2 bgcolor="#eeeeee">
Here's an example of a table with colors in every section, and the full table code (minus the content in the sections) follows it:
| This is color 000000 |
| color ffdead |
color ffff00 |
color 00ff00 |
| color cc33cc |
color ffcc33 |
Here's the code for this table - note I've deleted the content of the table (i.e., the words "This is color 000000" which you see above):
<table>
<tr><td width=300 colspan=3 bgcolor="#000000"> </td></tr>
<tr><td width=100 rowspan=2 bgcolor="#ffdead"> </td>
<td width=100 bgcolor="#ffff00"> </td>
<td width=100 bgcolor="#00ff00"> </td></tr>
<tr><td width=100 bgcolor="#cc33cc"> </td>
<td width=100 bgcolor="#ffcc33"> </td></tr>
</table>