AWA -- Color Basics

Color Basics


	This page offers some basic color definitions and a general introduction to the topic of color and how it might be applied to a website design.
Color Spectrum (PNG file)	Image by Wikipedia The Free Encyclopedia -- units are in nanometers
Color Wheel	A color wheel is accomplished by wrapping the red end of the scale around to the violet end to form a circle. Sir Isaac Newton did this for the first time in 1666.
Combining Colors	White light beamed through a prism results in a rainbow series of colors including yellow. Combine green and red and you get yellow. Beam the resulting yellow through a prism and it will split into red and green. Spectral yellow and additive yellow can appear to be exactly the same for me, but not for you if you are color blind. White as the sum of the three colors red, green and blue will be split by a prism into red, green and blue rather than a rainbow of colors.
Additive Color System	The primary colors of the additive system are Red, Green and Blue. These are the colors that form the basis of how our eyes see color and the way in which our computer displays work. These colors can be mixed to produce other colors, as illustrated to the right.
Subtractive Color System	The subtractive colors are the Yellow, Magenta and Cyan that resulted from mixing the pairs of Red, Green and Blue additive colors. These are the colors used in printing. While our computer displays can readily achieve white, mixing the subtractive colors results in a dark brown rather than black. Printers use black as an additional color to solve the problem. Additional special colors are introduced in order to print colors even more accurately.
Hue	is related to the wavelength of the color. A hue is a color independent of it's intensity or saturation.
Brightness	Value, luminance or brightness are like observing a printed color chart while you turn the lights up or down with a dimmer control. A pink remains distinct from red.
Saturation	Red is much more saturated than pink where the two might share the same hue and brightness.
Focusing Distance	Refer to the color spectrum near the top of the page. The focusing distance of the eye changes from end of the spectrum to the other. Placing a fully saturated red next to a fully saturated purple will result in the most eye fatigue as the eye changes it's focus while shifting between the two colors. Other than red and purple, colors closer together on the color wheel will be less fatiguing than colors farther apart. The problem diminishes as the saturation is reduced.
Opponent Colors	Stare at a saturated color for awhile and then shift your stare to a white sheet of paper. The opponent color will reveal itself. Blue and yellow are opponent colors and so are red and green.
Background Colors	White is of course the best background color, especially for reading text. Light shades of blue are the next best background color. Blue is not a good foreground color until it gets somewhat close to black.
How Many Colors	Too many colors can get busy while not enough can be perceived as boring. A common strategy is to use three colors (i.e. primary, secondary and highlight).
Primary Colors	The primary colors have already been discussed as being the additive colors used in computer displays. They can be mixed to produce the other colors of the color wheel. The primary color on a web page occupies most of the design and sets the tone of the page.
Secondary Colors	The secondary colors have already been discussed as being the basis for the subtractive color system used for printing. The secondary color on the website plays the secondary role in the color scheme. This should generally be a harmonious rather than complimentary color.
Tertiary Colors	After accounting for the three primary colors and the three secondary colors, the remaining colors on the color wheel are the six tertiary colors.
Analogous Colors	Choose a color on the color wheel and the analogous colors are it's neighbors. The most commonly used analog based color scheme is the red, orange, yellow trio designated at the right. Also purple, blue and magenta are a good trio. Analog color schemes are common in nature, a harmonious color scheme used in website design. Green and it's immediate neighbors on the color scheme would not make a good choice as there is little definition between them. A key reason why early computer screens used a green is that green phosphor inconsistencies would not be noticed as much.
Complementary Colors	Choose the primary color that you wish to use on your website. The complementary color is in the opposite position on the color wheel. Combining complimentary colors results in white or black. Such pairs will stand out against each other in strong contrast. Best to use a complimentary color as an accent or highlight, perhaps not adjacent to your primary choice.
Split Complementary	This color scheme offers two complimentary companions to your primary choice. This offers a high degree of contrast, without the extreme contrast of the complimentary color. There will be greater harmony than with the complimentary color.
Triad Colors	A triad color scheme is balanced and colorful, a good choice if you want to design your website with a three color scheme. Choose something other than the primary red, green, blue trio.
Warm Cold	Red, orange, yellow are considered to have warmth. The colors opposite these on the color wheel are considered to be cold. The psychology of color is a very interesting topic that can be studied on the web. Green is for wealth and can also suggest greed. Green is a poor choice for hospitals as it connotes putrefaction.
Tint And Shade	Tinting a color is to mix in a bit of white, reducing the saturation. Shading is accomplished by adding some black to the mix.
Monotone Chromatic	A monotone chromatic color scheme uses a small set of colors of the same chrominance (e.g. red and pink). Colors range in saturation, varying towards white or towards black. Such a color scheme can tend to be somewhat monotonous. Using an accent color can make this strategy effective.
Monotone Achromatic	Not really a "color" scheme as the colors range on the gray scale from white to black. This approach can be effective if an accent or highlight color is used.
Navigation Colors	Many of the color selection tools on the web offer to calculate your navigation colors. Bad idea. Visitors will feel the most comfortable with your site if it uses the traditional navigation colors (e.g. underlined hyperlinks are blue).