Colors and Themes
Choosing a color scheme for your site can be one of the more difficult tasks you'll face. In fact, almost certainly it will be much harder to actually choose your theme than it will be to implement it.
Although choosing colors for your site seems like an easy undertaking, there are a number of factors you must consider including:
What will the "mood" of your site be?
What does the target audience expect to see?
Does your client have a corporate color scheme?
Is the target audience international?
What are your expectations?
For the most part, these questions are relatively easy to answer. Choosing your colors based on those answers can sometimes be difficult. You will have to specify different colors for text, background, hyperlinks, visited hyperlinks, and active hyperlinks. And here's the hard part - they've all got to look good together all of the time. Before we actually discuss implementing these things, we'll need to learn how to specify colors in our web pages.
Specifying Colors
The HTML spec recognizes 16 pre-defined colors: black, white, aqua, silver, gray, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, and teal. This means that wherever you specify a color, if you'd like to use one of the pre-defined colors you simply specify that color as the value of some attribute.
If, however, you'd rather not use the pre-defined colors, you may use a hexadecimal RGB triplet. OK, OK, we'll explain it one part at a time! Hexadecimal numbers are numbers written in base 16. We use base 10 for our normal numbering system (for obvious reasons - count your fingers!) and so we are used to seeing a number as a series of digits. The possible values for any of the digits is 0 - 9 (ten digits). Hexadecimal numbers include the normal, base 10 digits plus the letters A - F to represent 11 - 15. So a hexadecimal number might actually look like this: 33FFCC - which actually equals 3407820 in base 10. For now, just recognize that the letters in a hex number represent larger values than the numbers.
RGB stands for Red Green Blue and it is the standard way to represent colors on a computer. You specify how much red, how much green, and how much blue the monitor should send to a particular point on the screen. These colors are light (as in sunlight) colors though, so they don't act like paint colors. When painting, generally, the more color you add the darker the color becomes. With light colors, the more color (light) you add, the lighter the colors become. So, if you were to have an RGB value of 0, that would represent an absence of color - black. On the other hand, if you were to have a color value of 16777215 you would have a bright white (this is generally the highest number you'll see). All other colors fit somewhere in between these two values.
An RGB triplet is a color represented by the three color components, Red, Green, and Blue, expressed in hexadecimal. The example above, 33FFCC is a hexadecimal triplet. It says: set the amount of red to 33, the amount of green to FF, and the amount of blue to CC. Can you guess what color this is? Remember that the letters are "worth" more than the numbers. This color has a very high green value, a moderately high blue value, and a low red value. Here it is!
Specifying your colors using hex numbers takes some getting used to but the effort required is well worth it. The ability to play with each color component is much easier than having to deal with those 16.7 million colors that are available to us in base 10.
The <body></body> Element
The <body></body> element is where you specify the color attributes for your pages. These attributes are:
| alink | Specifies the color of Active Links |
| background | Specifies the URL of an image to use as a background |
| bgcolor | specifies the background color of the page |
| link | specifies the color of Hyperlinks |
| text | specifies the color of Text |
| vlink | specifies the color of Visited Links |
You then specify the values of these attributes like those in any other element:
<html>
<title>Search Engines</title>
<body
text="red"
link="#33AA33"
vlink="#555555"
alink="FFFFFF"
bgcolor="#CCCCFF">
<h1>Search Engines</h1>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.av.com">AltaVista</a></p>
<p><a href="http://www.google.com">Google</a></p>
</body>
</html>
As you can see, casually choosing colors certainly does nothing for the presentation of your web pages. You'll have to experiment with the attributes to get the look you want.
Using Background Images
Many sites on the web use an image for their background. Some of them look really great but some of them look really bad. There are some things you should consider before using an image for a background to your pages.
Browsers will automatically tile a background image. That means that if your viewers' screens' resolutions are set larger than your background image, the browser will automatically tile the image. Be careful when creating background images regarding their size.
You should always specify a bgcolor attribute if you use a background image. If, for some reason, your background image doesn't download, make sure that your text is still visible by specifying a bgcolor that closely matches the dominant color of the background.
Make sure that your background doesn't interfere with the delivery of your message. If viewers are looking at your background then they are not getting your message.
Let's look at an example of what NOT to do:
<html>
<title>Search Engines</title>
<body
text="red"
link="#33AA33"
vlink="#555555"
alink="FFFFFF"
bgcolor="#CCCCFF"
background= "http://www.bright-moments.com/webdeveloper/images/badbg.gif">
<h1>Search Engines</h1>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.av.com">AltaVista</a></p>
<p><a href="http://www.google.com">Google</a></p>
</body>
</html>
Yikes! That's pretty bad - try never to do that kind of thing! You know, you see an image that looks pretty cool and you want to use it everywhere. So the best candidate is the background of every page, right? Probably not!
We should at least take a look at a better effort:
<html>
<title>Search Engines</title>
<body
text="red"
link="#33AA33"
vlink="#555555"
alink="FFFFFF"
bgcolor="#CCCCFF"
background= "http://www.bright-moments.com/webdeveloper/images/betterbg.gif">
<h1>Search Engines</h1>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.av.com">AltaVista</a></p>
<p><a href="http://www.google.com">Google</a></p>
</body>
</html>
Well, that might be a little better. Some of the things that make this example work are the fact that the dominant color of the image is close to what we specified for the bgcolor and it is large enough to take up the entire screen on most viewers' monitors (this file is 1025 by 770 pixels) so it won't tile. Of course, there are two immediate problems: The background gets cut off in smaller resolutions and using an image this big does nothing for the download time of the page (this image alone is 21KB).
Let's try it just one more time:
<html>
<title>Search Engines</title>
<body
text="red"
link="#33AA33"
vlink="#555555"
alink="#FFFFFF"
bgcolor="#CCCCFF"
background= "http://www.bright-moments.com/webdeveloper/images/bg.gif">
<h1>Search Engines</h1>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.av.com">AltaVista</a></p>
<p><a href="http://www.google.com">Google</a></p>
</body>
</html>
This one is a cropped version of the previous background. It is 500 by 400 pixels with the question mark in the bottom right corner. This makes the question mark visible on all screen sizes. This image will tile on larger screen resolutions though but, on this page at least, the images are out of the way. As you've probably seen, using custom background can be a painstaking process.
The Rule of Style
This one is quite simple - pick a style and apply it to every single page on your site. Simply put, don't distract your viewers with different color schemes and backgrounds on any page. The look and feel of your site should be consistent and, more importantly, unobtrusive. It should blend with your message so that your message becomes the dominant feature of the page.
Other than that single rule, you are free to design whatever theme you'd like for your site. Just be sure that all of your text colors have a high contrast to your bgcolor. If you are going to use a background image, make sure you can view the text clearly on top of EVERY portion of the image. Remember, you have no control over how the text will actually lay out on the page (at least not yet you don't - you will!). Don't lose any part of your message because your viewers can't read it.
The good (and possibly bad) news is that the default colors of black text on a white background with blue hyperlinks, red active links and purple visited links are an excellent example of colors that work well together. Viewers are used to seeing them and know what to expect when they encounter these colors. On the other hand, if you tie yourself down to these colors, your sites will generally appear bland and amateurish to some users.