AT&T Knowledge Network Explorer Homepage KNE Search Page KNE Feedback Page

 

 

Beyond the Son of Filamentality graphic


Text Colors


Text Color Basics:
 In the same way that you can adjust text (size and change font), you can also change your text Colors using the font tag. To change the font color, you will need to view the HTML. Find the section of text that you want to change. Highlight it; then in front of the text put:

<FONT COLOR=#FF00FF>YOUR TEXT HERE</FONT>

It's important to remember that the haphazard use of color can be confusing. People now assume that color means "hyperlink." They will assume that something will happen when they rollover or click the colored text. Use color wisely. It can be great for section headers but can be most confusing when popped into regular text. You can choose from the colors below, follow the links to color charts, or use the interactive tools to explore color.

 

Text Color Advanced:
At some point, you will probably need to adjust the colors of your text and hyperlinks. Here are some things to keep in mind:

  • People need to be able to read your text, so choose a color that contrasts with the background color/image.
  • The links need to sort of "Jump Out" and say "click me, click me, click me!" (but please not blink me). So choose an even more intense color for the links.
  • Links that users have already clicked (called visited links) should sort of fade or be lighter versions of the main link.

These are general guidelines. Go ahead and pick some color combinations. If you are using a very basic editing tool (Notepad, BBedit, Wordpad), you'll have to write down those yucky hexy, dexy, 6 digit RGB codes. Some simple editors actually have built-in color choices which make it very handy to quickly edit your text and other color choices. (See the Resource page for suggestions)

When you've picked the three colors you want to use ie. links, visited links, and active links (active links turn a color for an instant when you click on them), then you're ready to put them into the HTML.

  1. Go to your HTML document and find the body color line:
  2. Drag across the text, link, and/or vlink codes and insert your own new color codes. Then save it and reload to see how it looks. Hint: You can drag across the color codes on another web page, then copy and paste into your document.
Note: You can avoid the 6 digit hexidecimal color tags and use plain english if you desire. Instead of putting in a color code, all you do is type in the actual name of the color. Below are a few of the many browser-safe possibilities. Note that in some browsers, you can now use the color name rather than the hex tag. It is always safer to use the number though! Go to Hype's color specifier if you would like to see them all.

White White OldLace OldLace DarkKhaki DarkKhaki
Snow Snow PeachPuff PeachPuff PaleGoldenrod PaleGoldenrod
GhostWhite GhostWhite NavajoWhite NavajoWhite LtGoldenrodYello LtGoldenrodYello
WhiteSmoke WhiteSmoke Moccasin Moccasin LightYellow LightYellow
Gainsboro Gainsboro Cornsilk Cornsilk Yellow Yellow
Grey Grey Seashell Seashell Gold Gold
LightGray LightGray     LightGoldenrod LightGoldenrod
DimGrey DimGrey DarkGreen DarkGreen goldenrod goldenrod
SlateGrey SlateGrey DarkOliveGreen DarkOliveGreen DarkGoldenrod DarkGoldenrod
Black Black DarkSeaGreen DarkSeaGreen    
    LightSeaGreen LightSeaGreen    
    PaleGreen PaleGreen RosyBrown RosyBrown
    LawnGreen LawnGreen IndianRed IndianRed
SlateBlue SlateBlue Green Green SaddleBrown SaddleBrown
DeepSkyBlue DeepSkyBlue LimeGreen LimeGreen Sienna Sienna
SkyBlue SkyBlue YellowGreen YellowGreen Peru Peru
LightSkyBlue LightSkyBlue ForestGreen ForestGreen Burlywood Burlywood
SteelBlue SteelBlue OliveDrab OliveDrab Beige Beige
LightSteelBlue LightSteelBlue     Wheat Wheat
LightBlue LightBlue HotPink HotPink Salmon Salmon
PowderBlue PowderBlue DeepPink DeepPink Orange Orange
PaleTurquoise PaleTurquoise Pink Pink DarkOrange DarkOrange
DarkTurquoise DarkTurquoise PaleVioletRed PaleVioletRed Coral Coral
Cyan Cyan Maroon Maroon LightCoral LightCoral
LightCyan LightCyan VioletRed VioletRed Tomato Tomato
    Magenta Magenta OrangeRed OrangeRed
    Violet Violet Red Red
    Plum Plum    

Note: Here are some fun pages to check out because they let you experiment with color and see the results of your choices.

  • Choosing a color - click on the ABCDEFG link to see the color as a background, from Project Cool
  • Doug's Color Picker - select colors from a chart, then click to see what the page will look like
  • Web Color Theory from Mundi Design - there are 3 ways to use this; click on one of the choices at the bottom right

 
First posted 1997.
Last modified Monday November 26, 2007

© 2008 Copyright AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property. This site contains links to public sites whose content and language do not fall under the jurisdiction of AT&T. The views and opinions expressed at these sites are not those of AT&T. Please read our Disclaimer.