Color Me.... I

     Color is used to convey meaning in almost everything in our daily lives. Some colors invoke certain feelings or expectations relative to the culture or society we grow up in. Other colors convey a universal meaning (yellow and red as warnings or cautions for instance). How you choose colors for your web site will have a significant effect on how your viewers perceive your message (and whether they come back for more...). This article should give you a better understanding of color conventions, their use, and selection.

THE COLOR WHEEL

     Colors are essentially interpreted in one of three modes... RGB (Red Green Blue), HSV (Hue Saturation Value), and CMYK (Cyan Magenta Yellow Black). There are advantages to using each color convention, many of which become evident as you begin designing or editing graphics. For purposes of this article, we will focus on RGB colors because they are easily definable in HTML.

     Color depth ranges from 24 bit color (over 16 million colors) to the more commonly used 8 bit color (256 colors). Arguably, if you want to have the greatest range of compatible colors for the most people, you'll probably want to stick with 8 bit color for now (note: more and more people are upgrading their computers so adhering to 8 bit color restrictions is becoming increasingly unnecessary). Most browser palettes are built around 256 colors or less. For instance, Netscape and Explorer use a standard 216 color palette while Macs use all 256. An easy way of color coordinating your site is through the use of a dither-proof color wheel such as the one shown here (courtesy of Ann-Rae Vasquez-Peterson and Paul Chow). To enter the proper color values in your HTML source code, you'll need a hexadecimal color chart (click on the color wheel to open a new browser window with a hexadecimal color chart that you can save to your hard drive. Just match a numbered segment with it's equivalent on the hexadecimal chart). Each of these color wheel segments (pie slices) represents a major color group and the hues (variations) of that basic color.

     By now, you may be wondering what "dithering" is and why it is important. As mentioned earlier, Netscape and Internet Explorer browsers use pallettes centered on 216 colors (with Macs using all 256). In an effort to display more colors than they are capable of, browsers offer the option of dithering images. Dithering involves placing similarly hued color "blocks" (pixels) side by side to fool the eye into thinking there is a "third color" being displayed. The following example shows the difference between a dithered and non-dithered image. Notice the pixelation in the second image as it attempts to imitate the photo quality of the original (depending on your browser, you may notice some dithering in the original as well). Being aware of dithering and the color limitations of web browsers will shed some light on how those great images on your site are going to look on someone else’s browser. Limiting your design color choices to those on the wheel will go far in ensuring that a graphic looks the same on every browser (not just the high end systems).

COLOR COMBINATIONS

     Now that you understand dithering, are familiar with the color wheel, and have a visual example of where all the colors fit in the scheme of things, you'll want to coordinate your choices to give your site a certain "feel". You can group the color combinations into six general categories as follows:

• Warm Colors - ranging from red-violet to yellow on the color wheel.
• Cool Colors - ranging from violet to green-yellow on the color wheel.
• Analogous Colors - any 3 consecutive color segments on the wheel.
• Complementary Colors - colors that are directly opposite on the color wheel.
• Monochromatic Colors - All the hues (variations) of one color segment on the wheel.
• Triadic Colors - any 3 colors on the wheel that are 120 degrees in separation (if the wheel were a clock face, an example would be a color at the 12 o'clock position, one at the 4 o'clock, and one at the 8 o'clock position)

In the second part of this tutorial, we'll take a look at the six color groups and the corresponding segments on the color wheel.

[Page 2] [Next Article]