|
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 light | Final 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.-->
|