Search this site...

Using colors

With the addition of colors, web pages look attractive and allow emphasis of web content. You may add special colors to text and/or background. You even can use colorful graphics to enhance the appearance of your web pages. When choosing colors, strive for maintaining readability and visibility of the web content/elements. If the color choices make it difficult for the web users to read or view the content, they may avoid using your website in the future.

Although you may spice up your pages with attractive color schemes, it may not render consistently in all browsers as users may override your color settings. (Also, monitor settings may affect color display.) Web users have the option of customizing their browsers to use specific colors that they like. Also, keep in mind some browsers are text-only, meaning they only display white, black, and gray colors. Despite these drawbacks of use of colors, they can be used safely. Without colors, your website may be perceived unattractive. Use of colors helps web designers to create webpages into a cohesive website.

How do you decide on what colors to use? Specific color schemes may be dictated by:

  • your organization
  • client, or
  • your own preferences

If you are not sure what colors to use, try looking at the available color choices. Then, choose the ones that you may think will work best. You probably can change colors later if your first choice turns out less superior than the next one.

Specifying colors

Specifying colors in XHTML is very similar to how it's done in HTML. RGB numbers are used to specify the choice of color you want to use. The acronym RGB stands for Red, Green, and Blue. RGB uses the hexadecimal format and combines portions of red, green, and blue colors. RGB color specification uses six digits: first two digits for red, the next two digits for green, and the last two digits for blue. With this format specification, there are millions of color possibilities though choose color combinations RGB to maintain readability of the web content. (See web safe color page for more information.)

The web safe colors are produced using the values 00, 33, 66, CC, or FF for each color choice. According to this color scheme, we end up with 256 color combinations. See Table 1 recommended safe colors.

Table 1 recommended sage web colors
R (red) G (green) B (blue) Color intensity
00 00 00
33 33 33
66 66 66
99 99 99
CC CC CC
FF FF FF

To create web safe colors from table 1, simply:

  1. start with a pound sign (#) to indicate the hexadecimal format
  2. select one color value from each column from left to right

As an example, assume we want to use the color red. For this choice, following each step outlined above for creating web safe color gives us:

  1. Step 1: #
  2. Step 2:
    1. FF from R
    2. 00 from G
    3. 00 from B

Our final RGB value is #FF0000, where FF represents the most use of a color and 00 represents absence of a color. In this specification, we have indicated, we want most of red but no green and blue. As a result, we get the purest red possible. In a similar fashion, we can obtain purest the green by using 00 for R, FF for G, and 00 for B. The resulting hexadecimal value for green is #00FF00. Finally, purest blue can be obtained by using #0000FF. In this case, we are saying no red, and no green but use only blue.