HTML Text Colors
Choosing and Coding Website Colors

Choosing a color palette, including HTML text colors, for your website or blog is very important. It can mean the difference between having a professional looking site and having a amateurish looking site.

In general, consider the following when choosing site colors:

• Dark text on a light background is your safest bet
• Gray text is easier on the eyes than black (I used Hexcode #333)
• Use colored text only for emphasis (navigation, headings or certain words). Pick colors that complement your header images
• Flashing text is annoying. Try to avoid it.
• Be consistent from page to page

Now that you understand the basics, let's get into the different ways you can choose website color combinations, including text colors, and then code them into your HTML documents.

Use an Image to Choose Site and Text Colors

Most likely your main content will be dark text, either black or gray. In addition to your primary text color, you will need to choose a few complimentary colors for your container (around pages), footer, headings, navigation and possibly other site elements.

The ideal color palette will be derived from your header graphics. I will share with you how I chose the website color combinations for this site, including all of my text colors, using an image.

Either watch this short video or read my step by step instructions below:

How I Picked My Website Color Scheme

First I found header graphics at IStockPhoto.com. See our Shopping Images webpage for details. I based my primary website color combinations on this image:


Then I used Photoshop to choose my primary text color, including the main header text (Website Tutorials). Here's how I did it:

• Opened laptop image above in Photoshop.
• Used the eyedropper tool on the toolbar to pick up the purplish-blue color at the top of the keyboard in the image then opened the color picker to get the Hexcode #01314B as shown here:
  
  

Absolute Color Picker Tool

If you do not have Photoshop, Absolute Color Picker is an excellent FREE Color Picker Tool. You can hold down your mouse over any color on your screen (in a image, on a website, over text...) and this tool will give you the hexcode for that color.

Watch the video above for a brief demonstration on how to use this color picker tool to choose website color combinations. Pretty cool!

NOTE: The primary goal of using a color picker tool like Photoshop or Absolute Color Picker is to extract a color from an image and determine its hexcode so you can:

• Find complementary colors and
• Use the hexcode when coding your HTML documents

Once I had my primary Hexcode, I used Hypergurl to choose my complementary site colors, including the supplementary text in my header (Sitebuilding Tips For Beginners). Here's how I did it:

• Opened Hypergurl Color Matching Tool
• Input Hexcode #01314B (blue) into the Hex field shown below then hit "Use It." All of the colors shown below are complementary to Hexcode #01314B from my laptop header image.
• Chose Hexcode #964E02 (#6 light brown) for my complementary website color and used it for my secondary text in the header. I used the same method to pick the yellow and gold colors used in the menu bar and borders.
  
  

BOTTOM LINE:Choose an image, pick a color from that image, then use it for site design and text colors. See header for final text colors chosen.

Use Standard Color Names To Define Website Colors

Sometimes you don't want to base your website and text colors on an image. Maybe you just want "a nice red" for a certain portion of text or for a border. In these situations, I use color names instead of hexcodes in the HTML code.

Sixteen color names are recognized as the best colors to use on web pages because of their universal acceptance among all browsers. They are:

If you use one of these 16 color names when coding your HTML text colors, you can be assured that all browsers will display the website and text color correctly.

Additionally, you may have heard about "Extended Color Names." These are similar to the color names above, but there are a lot more of them. Officially they are only supported by Internet Explorer, but in reality, they are supported by most browsers.

For a list of the standard and extended color names, you can click on the button below and print a table in PDF format for a handy Color Name reference guide. HTML text color code and color swatches are included in this table.

Use Hexcodes To Define Website and Text Colors

When you want a wider range of color choices, using hexadecimal color codes (aka hexcodes) allows you to choose from millions of different HTML text colors.

The code applies the RGB (red, green, blue) color system where the first two digits control red, the second two digits control green and the last two digits control blue. As a basic example, #ff0000 = bright red, #00ff00 = bright green, and #0000ff = bright blue.

I use the Hexhub at December.com for choosing hexcodes. I like the interface because there are 5 color categories at the top, like "Blues" or "Reds" so you only have to look at one color range at a time.

For hardcopy color references, I use Visibone's Browser Book and Kilochart Poster, both of which have a permanent place in my office. These handy references show color swatches and give the hexcode and RGB values for each making it easy to choose HTML text colors.

Quick Reference For Coding HTML Text Colors

When coding your HTML documents, use either the color name (no spaces) or the hexcode for your chosen color. Some of the most common webpage elements where color names and hexcodes are used and the associated HTML are shown below.

If you have Adobe Reader, you can print this HTML table in PDF format along with a Quick Reference Guide of HTML text colors and their hexcodes.

How To Highlight Text

Rather than change the text color itself, I like to highlight text for emphasis. I try to use this technique sparingly because overuse diminishes its effectiveness. Notice how I used yellow text highlighting above when explaining how I picked the HTML text colors for this site.

I chose hexcode #FFFF66 and this is what the HTML text color code looks like: