Syrena logo SYRENA COMPUTER HELP
Background and Text Colors in HTML, XML Codes
Bill Biega's
Information
Series

Biega Home Page

Computer Help
Special characters, colors.
East Europe
Cities, Countries, Info.
History
Genealogy, History Essays
Maps
Cities, Countries, Historical
Photo Gallery
Places I visited
Rydzyna

Sailing
all over the world
Syrena Press
13 Is My Lucky Number
Learning LINUX

In Association with Amazon.com
Contact us by Email

Judicious use of color enhances the appearance of a Web page. It makes it more attractive and titles, or other phrases, that you want the reader to notice, will stand out.
Here's how you can add, or change, colors in your document.

In HTML (or XML) coding, colors are defined with statements:"#rrggbb", where rr, gg, bb represent the hexidecimal number for the proportion of Red, Green and Blue respectively. 00 represents an absence of the appropriate color, ff (= decimal 255) represents the maximum amount. Black is the lack of any color and is represented by #000000; White is a 100% mixture of all colors and is represented by #ffffff. In between there is an almost infinite number of combinations, see a selection of colors lower on the page.

You change text color with the statement: <font color="#rrggbb"> Don't forget to place the statement: </font> when you want to switch back to normal color! Here the text color was changed to Blue (<font color="#0000ff">).

You change the background color within a table with the statement: bgcolor="#rrggbb" at the beginning of the table statement. Here the color was changed to light green (<table bgcolor="#ccffcc">). You can change the background color individually for each cell of the table, as is done in the examples below.

With 256 possible shades of any of the three colors, the total number of possible color combinations is 16,777,216. Of course, no human eye is capable of differentiating between such fine differences.
Using base color variations equally spaced at 1/5 intervals (20%) (00, 33, 66, 99, cc and ff) still gives 216 total color variations for text and background colors. These are perfectly adequate, and in addition are recognized by all browsers and printers. see the convenient crossreference between hexadecimal, RGB decimal and percentage numbers.

In HTML (or XML) coding, you change the background color of the whole page with the statement: bgcolor="#rrggbb" within the <body> statement at the beginning of the page. rr, gg, bb represent the hexidecimal number for the proportion of Red, Green and Blue respectively. This whole page is color white (<bgcolor="#ffffff">). If you do not specify a background color, it will be white by default.

The following tables show some of the basic colors and their hexidecimal codes, as well as a sampling of different hues and shades

Equal Mixtures of all 3 base colors=Black,Greys,White
#000000 #333333 #666666 #999999 #cccccc #ffffff
BASIC COLORS = Red, Green, Blue - dark to lightFinal color
Name
#330000 #660000 #990000 #cc0000 #ff0000 Red
#003300 #006600 #009900 #00cc00 #00ff00 Green
#000033 #000066 #000099 #0000cc #0000ff Blue
Equal proportions Red+Green
#333300 #666600 #999900 #cccc00 #ffff00 Yellow
Equal proportions Red+Blue
#330033 #660066 #990099 #cc00cc #ff00ff Magenta
Equal proportions Green+Blue
#003333 #006666 #009999 #00cccc #00ffff Cyan
Examples of changing shades and hues
20% more Red + equal amounts Green & Blue
#663333 #996666 #cc9999 #ffcccc
40% more Red + equal amounts Green & Blue
#993333 #cc6666 #ff9999
20% more Green + equal amounts Red & Blue
#336633 #669966 #99cc99 #ccffcc
40% more Green + equal amounts Red & Blue
#339933 #66cc66 #99ff99
20% more Blue + equal amounts Red & Green
#333366 #666699 #9999cc #ccccff
40% more Blue + equal amounts Red & Green
#333399 #6666cc #9999ff

You get the picture? Now you should be able to experiment yourself.

And here are examples of some popular colors.
50% Red+Green; Red+Blue; Green+Blue
Olive Violet Teal
#808000 #800080 #008080
More popular colors by name. The last row are good background colors
Gold Orange Brown Sienna Maroon
#ffcc00 #ff9900 #993333 #996633 #990000
Purple Royal blue Turquoise Chartreuse Aquamarine
#9933ff #3366cc #33cccc #66ff00 #66ffcc
Light pink Sky blue Light cyan Pale Green Antique white
#ffcccc #00ccff #ccffff #99ff99 #ffffcc

Reference chart for hexadecimal, RGB decimals and percentages
hexadecimal #33 #66 #80 #99 #cc #ff
RGB decimal 51 102 127 153 204 255
percentage 20% 40% 50% 60% 80% 100%
Return to
Top of page.


For an excellent tabulation of colors, with their Macintosh names, their hexidecimal codes, and the decimal RGB codes (used in graphics programs such as "PaintShopPro" and "Adobe Photoshop", see http://www.timestream.com/mmedia/graphics/colors/palette.html
For a comprehensive guide to the design of HTML and XML pages, see Jennifer Kyrnin's excellent Web site.

Return to Top of page.
Return to Table of Contents for other Computer Help pages.-->

design

Return to Home Page.
Copyright © 2002 B. C. Biega. All rights reserved.

Last update November 2002