|
|
|||||
|
||||||
|
||||||
|
||||||
|
 |
|
 |
|
WEBSITE COLOR BASICS We know that what we consider "visible" light can be broken down into a spectrum that ranges from blue to red in a progressive rainbow.
Figure 1. The visible spectrum of light A color wheel shows how to arrive at a particular color by mixing two or more other colors together. The color wheel is essentially the linear progression of color as seen in the color spectrum, connecting the two ends together so that red connects up with purple on the other end.
Figure 2. The color wheel A color wheel usually includes 12 distinct colors, as shown here. While important aspects of the color wheel and color theory are well known to artists, they might not be fully appreciated by the programmers. Primary Colors
Figure 3. The primary colors By definition, the primary colors are the root colors that you can combine in some prescribed amounts to arrive at any other color. To identify the primary colors, you first need to clarify exactly which color medium you are using. In elementary school, you may have learned that the primary colors are red, yellow, and blue. However, most of us now use color displays, for which the primary colors will be red, green, and blue. But if you have an ink-jet color printer, take a moment to open the lid and look at the cartridges. Do you see red/green/blue? Nope. You probably see four ink supplies: cyan, magenta, yellow, and black. The colors are different because a computer monitor uses additive color, while your printer uses subtractive color. The monitor emits colored light, while the ink on the paper absorbs color from the light it reflects. If you are looking for a little more reading, here are a couple of links to check out:
Secondary Colors
Figure 4. The secondary colors To build out our color wheel, we next want to identify the three colors that are obtained by combining any two adjacent primary colors. These will be our secondary colors: cyan, magenta, and yellow. Secondary colors of the additive world are the same as the primary colors of the subtractive world. As you might conclude from that, the secondary colors of the subtractive world are the primary colors of the additive world. It's all part of the interrelationship between additive and subtractive color modeling. Tertiary Colors
Figure 5. The tertiary colors The final step in building up our color wheel is to once again find the middle colors between the colors currently filled in on our wheel. Fortunately, these tertiary colors are the same for both the additive and subtractive worlds. Now that we have defined the colors we will use for our 12-point color wheel. Analogous Colors
Figure 6. Analogous colors These are any colors directly beside a given color. If you start with orange and you want its two analogous colors, you select red and yellow. A color scheme that uses analogous colors provides a harmony and blending of the colors, similar to what might be found in nature. Complementary Colors
Figure 7. Complementary colors Also known as contrasting colors, complementary colors are directly opposite each other on the color wheel. Selecting contrasting colors is useful when you want to make the colors stand out more vibrantly. If you are composing a picture of lemons, using a blue background will make the lemons stand out more. Split Complementary Colors
Figure 8. Split complementary colors Split complementary colors can be made up of two or three colors. You select a color, find its complementary color on the other side of the color wheel, then use the color or colors on each side of that complementary color. Triad Colors
Figure 9. Triad colors These are any three colors that are equidistant on the color wheel. When triad colors are used in a color scheme, they present a tension to the viewer, because all three colors contrast. The primary and secondary color sets are both triads. Warm Colors
Figure 10. Warm colors Warm colors are made up of the red hues, such as red, orange, and yellow. They lend a sense of warmth, comfort, and energy to the color selection. They also produce a visual result that causes these colors to appear to move toward the viewer, and to stand out from the page. Cool Colors
Figure 11. Cool colors Cool colors come from the blue hues, such as blue, cyan, and green. These colors will stabilize and cool the color scheme. They will also appear to recede from the viewer, so they are good to use for page backgrounds. Pump up the Contrast
Figure 12. White to black: achromatic contrast ramp
Figure 13. Monochromatic contrast ramp using blue A monochromatic contrast is set up when you use a single color, then increase or decrease its lightness. Contrast is extremely important in Web design. It is clear to everybody that black text on a white background is extremely easy to see, which is part of the reason why most of the printed material you read is black text on a white background. Likewise, white on black produces high contrast, but it is more difficult to read because black is perceived as being heavier than white and, thus, squeezes it out a little. |
|||
 |
 |
