| There is a saying amongst graphic designers: "No color is better than bad color." If you are not careful, color can work against you by obscuring your message and confusing your visitor. The effective use of color in design takes a lot of practice to get it right. Colors have powerful emotional meanings, which cannot always be predicted, especially when used in different combinations. Table 5.1 presents some of the most common associations with different colors. Once you put two colors together, the meanings begin to interrelate, much like words in a sentence. Table 5.1. Color AssociationsCOLOR | EMOTIONAL ASSOCIATIONS |
|---|
Red | assertive, powerful, intense | Blue | consoling, fidelity, defense | Yellow | concern, rebirth, clarity | Green | wealth, fitness, food, nature | Brown | nature, maturity, wisdom | Orange | hospitality, exhilaration, vigor | Pink | vital, innocent, feminine | Purple | royalty, refinement, calm | Black | stark, stylish, somber | Gray | business-like, cool, detached | White | clean, pure, straightforward |
However, you want to make sure you don't just start slapping down colors on your page. If you do, they'll likely clash. The most important thing you can do to avoid this is to take time to plan. Begin by choosing the specific colors you will use and their exact RGB values, and then apply these colors consistently throughout your project. Other Ways to Add Color Although this chapter presents the primary methods for setting the colors in your design, several other CSS properties include color values as part of their intrinsic nature: text-shadow Property (Chapter 4). Although generally thought of as black or gray, CSS allows you to set the color of text shadows. border Properties (Chapter 6). An element's border colors can be set as part of any of the border properties, or directly in the border-color property. outline Properties (Chapter 6). Like the border property, the outline allows you to define a color around the edge of an element. scrollbar Properties (Chapter 8). Internet Explorer for Windows allows you to reach out of the Web page and specify the colors for the scroll bar used to control the page.
|
You will need to consider the colors (including the colors in the background images) that you will be applying to the basic parts of your Web page (Figure 5.1). You do not have to choose a completely different color hue for each part, but you should define what the color would be for each component: Figure 5.1. Consider what colors you will use for the different components of your Web page. 
Page background. Covering the entire visible area of the browser window, the background should generally provide the most contrast with the foreground text colors. Content background. Often you will use a different color for the background directly around the content of the page, allowing the page background color to absorb extra horizontal space in the browser window. Border/Rule. You may want to use contrasting colors around the borders of content areas, headers, navigation blocks, lists, and tables or use rules to separate different chunks of content. Choose a color that contrasts with the area the lines are meant to separate. Header. You may choose not to change the background color for section headers, but always make sure that the text color clearly contrasts with whatever background color you choose. Copy. Your copy (generally sentences or paragraphs of text) should have the highest contrast with the background to maximize legibility. Link/Navigation. You may choose different colors for your site navigation and for links in the copy, but these link colors should be easily discernable from other text while still contrasting the background. List/Table. You may choose different background colors behind lists and tables (or even alternating row colors). Form. You can specify the border, foreground, and background colors of many form elements to give them a more distinctive look for your site, apart from the default appearance. However, be careful not to customize them so much that the visitor does not know what they are. Be aware, too, that many browsers (especially on the Mac) will ignore styles applied to form elements, especially the submit buttons.
Do Browser Safe Colors Matter? The short answer: no. The slightly longer answer: In the early days of Web design, manyif not mostof the computers in use had an incredibly limited color palette. Whereas almost all computer monitors today can display thousands to millions of different colors, in the 1990's a large segment of the Web-browsing world could only see as few as 256 colors and in extreme cases even fewer. The set of colors that both Mac and Windows computers could consistently display (a 211 color subset of the 256) was referred to as the Browser Safe Color Palette. These colors could always be relied on to properly and smoothly display in all computers. For a long time, Web designers would restrict themselves to this extremely limited palette. In fact, you still see this palette widely used in many applications, including Photoshop and Dreamweaver. However, these limitations are becoming increasingly outdated, as virtually all computers today can use just about any colors you throw at them. |
Color Wheel Basics A color wheel is a disc or circle that shows the spectrum of color values, providing you a quick overview of all the possibilities, from red, orange, and yellow to green, blue, indigo, and violet, and back to red again. Some color wheels also allow you to view different brightnesses (dark to light) and saturations (full color tone to gray). Unfortunately, because this book is produced in black and white (OK, it has is a little red, but that's hardly the whole spectrum), it doesn't really help to show a graphic of a color wheel. Most likely you're familiar with color wheels anyway, or if you're not, my description of one gives you a fairly good idea of what they look like. If not, check out the example on Wikipedia (http://en.wikipedia.org/wiki/Color_theory). When you get down to it, though, color is a matter of preference. Colors that I swear look great together make my wife gag and usually result in my changing my outfit. To be safe, you can count on a single color (monochrome) or one of the color-combination schemes that follow as being (more or less) fail-safe: Monochrome. A single color with different brightnesses or saturations for contrast. Complimentary. Two colors from opposite sides of the color wheel (180 degrees), providing the highest contrast. Triad. Three colors and their tones, with one primary and two secondary colors that are at equal angles in the color wheel, 120 degrees to 180 degrees from the primary. Tetrad. Four colors that include one primary color, one secondary color (in direct contrast to the primary color), and two colors that are the same angle from the primary or secondary color, from 0 degrees to 90 degrees. Analogic. Three colors and their tones, with one primary color and two secondary colors that are the same angle from the primary color, from 0 degrees to 60 degrees.
All of the above color schemes allow you to choose the basic hues. You can then use different brightnesses and/or saturations of these colors to add additional colors to your palette. Online Color Scheme Tools Not sure where to start planning your color scheme? Here are some excellent online tools you can use: Build a palette. The Visibone Webmaster's Color Laboratory (visibone.com/colorlab/) provides an excellent tool for comparing colors side by side in an interactive environment. Color Wheel Selector. Explore all of the different color wheel schemes using Wellstyled.com's Color Scheme 2 tool (wellstyled.com/tools/colorscheme2/index-en.html). Duotones. If you are trying to keep your design simple but want more than a monochromatic scheme, the Slayer Office Color Palette tool (slayeroffice.com/tools/color_palette/) lets you blend two colors together for a smooth duotone color palette. Color palettes from photographs or other images. If you are using graphics or photography with a particular color scheme in them, the Degrave.com Color Palette Generator (degraeve.com/color-palette/) will analyze the image and then produce a color palette based on the colors in the image.
Color and Accessibility Beyond attractive and compelling design, another critical consideration with color is accessibility for people who are colorblind or have other vision impairments. The most important considerations are to provide enough contrast between foreground and background colors and to make sure that color is not critical for understanding information. For example, if you are using color for links, also set links off in some other way such as underlining or bold. Of course, there are also several color combinations that you should avoid (blue/green being the most obvious) and some that are preferred: Red/blue Orange/blue Orange/purple Yellow/purple
For more details on color and accessibility, check out section 9 of the W3Cs white paper CSS Techniques for Web Content Accessibility Guidelines: w3.org/TR/WCAG10-CSS-TECHS/#style-colors |
|
