| Graphic Design Home Page | Project Overview |
Color in layouts can convey moods, create images, attract attention, and identify objects. When selecting colors for a publication or a web page, think about what you want the color to do and what is appropriate for your purpose. There are many schemes for organizing colors and navigating the relationships among them. Most schemes are based on color wheels. A few simple principles, such as those on the following pages, describe how to use these wheels when choosing color combinations.
Colors of high value or chroma "bleed" into surrounding regions. The result is a blurring of edges (see "negative" button below)—a significant problem with the legibility of brightly colored type. This blurring is especially pronounced when transmitted red light is involved. When adjacent colors are of low value, whatever the relative hues, the result is a "washing" in which colors become indistinguishable. On the other hand, adjacent colors of contrasting value or hue show greater visual distance between them. One color "advances" out of the screen while the other "recedes" (see "positive" button below). This can be used to increase the legibility of colored type on a suitably contrasting background.
Color Systems
Color is the response of the eye to differing wavelengths of radiation within the visible spectrum. The visible spectrum is what we perceive as light. It is the part of the electromagnetic spectrum that we can see. The typical human eye will respond to wavelengths between 400-700 nanometers (nm), with red being at one end (700 nm), violet at the other (400 nm) and every other color in between these two.
There are many different kinds of color systems, and many different theories on color. There are three main components of color:
Color harmonies
Color harmonies serve to describe the relationships certain colors have to one another, and how they can be combined to create a palette of color.
Complementary: A complementary relationship is a harmony of two colors on the opposite side of the color wheel. When complementary colors are placed side-by-side they tend to enhance the intensity (chroma) of each other, and when they are blended together they tend to decrease the intensity of each other.
Analogous: An analogous relationship is a harmony of colors whose hues are adjacent to one another on the color wheel. Analogous colors tend to be families of colors such as blues (blue, blue-violet, blue-green) and yellows (yellow, yellow-orange, yellow-green).
Triadic: A triadic relationship is a harmony of three colors equidistant from one another on the color wheel. Primary colors and secondary colors are examples of color triads.
Color spaces
Color is typically organized in a hierarchal fashion, based on how colors are mixed. A color space helps to define how the colors are mixed, based on the medium in which the colors are used. There are two different kinds of color spaces:
Subtractive: A subtractive color space is the traditional color space that most people refer to when they talk about color. It is pigment-based color, as in the mixing of paint. In a subtractive color space, the pigments manipulate the wavelengths that our eyes see. The absence of any pigment produces white, and all pigments blended together produces black.
Additive: An additive color space is an electronic color space. It is light-based color, as in the mixing of color on the computer. In an additive color space, light is added to the screen in differing amounts to produce color. The absence of any light is black, the presence of all light, or light at full intensity, is white.
Color combinations that vary only in hue produce another kind of "washing", whether or not the colors are of low value (again, see "negative" button below). The reason for this is that the edge of any region is perceived primarily through brightness gradients. To be seen distinctly, boundaries should vary in value as well as in hue. The color blue, it should be noted, is idiosyncratic in this respect: it contributes little to the perception of brightness, and boundaries relying entirely on shades of blue will remainm indistinct.
Color combinations are probably the most difficult design elements to manage. (Indeed, black and white photographers remove this element entirely, leaving only surface elements such as tone, contrast and shading.) On this page, color has been minimized, and the central design consideration is mostly one of balance. The difficulty with color is that individual choices may appear changed when contrasted with the other colors of a design. Trial and error is inevitable when choosing colors, and designers often work with books of "working" combinations that help to simplify the process. As a basis, however, an understanding of the psychological idiosyncrasies associated with color combinations is essential for creating well-considered overall designs. A few are illustrated on the following pages.
Warm colors (yellow, orange, red) evoke pleasant, often dynamic, reactions. Cool colors (green, blue, purple) evoke a quieter mood, and are considered less outgoing than the warm colors. The "temperature" of colors can also indicate action levels and priorities: warm colors advance from the background and imply a required reaction, while cool colors recede and imply rest or background status. In any hue, single colors, free of dynamic interactions with other colors, are more appealing and memorable when presented against a background of neutral gray.
The
Psychology of Color |
||
Color |
Associations |
|
|
Energy, Passion, Power, Excitement | |
|
Happy, Confident, Creative, Adventurous | |
|
Wisdom, Playful, Satisfying, Optimistic | |
|
Health, Regeneration, Contentment, Harmony | |
|
Honesty,
Integrity, Trustworthiness |
|
|
Regal,
Mystic, Beauty, Inspiration |
|
|
Easiness,
Passivity |
|
|
Finality,
Transitional Color |
|
Colors carry a strong emotional weight for most people, due to the social connotations that are often associated with them. Blue, for example, connotes not only maleness, but often water, cold, and sometimes death. Red, when used in type, almost universally suggests a warning or an error. Used in images, however, red is less threatening—even uplifting—though it is just as attention-getting. Color combinations carry even greater weight. Red, white, and blue, for example, immediately suggests patriotism ... at least to American or French readers. Red, white, and black, on the other hand, may, in certain contexts, have the very different effect of suggesting National Socialism.
Bright or saturated colors draw immediate attention, but only if used in limited amounts. They are useful for error messages, annotations, urgent commands, and, when simultaneously emphasized by a font change or special placement, key words. Used together, saturated colors (especially saturated complements) are extremely fatiguing, causing the eye to constantly refocus. The effect produces after-images. Except for unusual circumstances where visual vibration may be desired, combinations of bright or saturated colors should be avoided.
... but not details. The principle is entirely physiological: The central portion of the retina (fovea), where detailed vision occurs, has a low sensitivity to the color blue. It is very difficult, and very tiring, to distinguish details (such as type) that are outlined in shades of pure blue. For this reason, blue text, thin blue lines, and small blue things generally should be avoided. Blue makes an ideal background color, however. Registered by the rest of the retina, it provides an excellent contrast to detailed central elements in analogous or monochromatic shades.
... but not for background or peripheral elements. The retina is largely insensitive to pure reds and greens outside of its central region. When focusing on the
optical center
of a page, reds and greens provide additional perceptual cues. On the periphery, reds, greens, and yellow mixes tend to wash away. If other design considerations put reds and greens at the periphery, increasing the background contrast or adding blinking will increase visibility. Undifferentiated reds and greens at the periphery can be used to cue "secondary" elements of a presentation.
This principle is familiar to users of windows-based interfaces: Items that appear to be in the foreground of the screen are interpreted as having an increased importance or level of activity. This importance/activity level is reduced as the items appear to move further into the background. There are a number of ways of indicating depth on a two-dimensional screen. These include:
When similar (but not identical) colors are used, the suggestion is one of relationship, with the degree of color similitude denoting the strength of the relationship. Colors of varying hue and saturation are therefore used very effectively to organize elements within any type of hierarchy. Navigating the chapter/section/sub-section hierarchy within a text, for example, is much more natural for the reader if this type of color coding is used. In hypertext, such coding can be used effectively to denote the proverbial trail of breadcrumbs leading back from multiple branching.
A "halftone" is the array of tiny dots that make up a newspaper photograph. Scanned and digitized images, similarly, are composed of an array of small "bit-mapped" dots. To manage the relationship between a halftone image and the colors in other design elements, color may be added to these arrays with a wash between the dots. More subtle relationships can be achieved when the halftone is overlaid with one or more colored "duotones" — arrays of colored dots that (at least partially) reproduce and enhance the halftone image. Using duotone overlays, one hue can be made to subtly dominate an image. This may be used to suggest less obvious relationships among various elements.
Elapsing time, the appearance of critical events and information, attainment of new levels, and the visualization of input are all associated, psychologically, with changes in color. For the designer, this provides both opportunities and possible pitfalls. When color is linked to dynamic events, the experience becomes much more memorable. When psychological expectations are confused, however, the reader may question what is happening, leading to a redirection of energy away from the task at hand. Dynamic color changes must be balanced, of course, with other principles advocating color parsimony.
Color should be used as a cognitive and an aesthetic tool throughout the design of a text, not as an afterthought. When applied indiscriminately, color becomes distracting. However, when distinct colors are limited to the development of clarity and consistency—that is, when each color has a meaning—then color serves to organize ideas within the text. Readers will assume that elements of the same color are categorically related, whether they are on a single page or separated by several pages. Color memory is quite limited, however, with short-term capacities ranging from only 3 to 7 colors.
Color coding should be limited to the emphasis of visual information conveyed by other means. Information should be carried, primarily, by font, text shape, layout, and the text itself. As outlined in some of the other principles of this section, there are many differences among individual perceptions of color, both physically (e.g., degrees of color blindness) and psychologically (e.g., in color connotations). An old designer's trick is to convert doubtful designs to monochrome (say by printing on a black & white printer), and then see how much information has been lost.
There are many types of color blindness, caused by the dysfunction of certain photoreceptors in the retina. Among the colors and color distinctions that individuals may find difficult or impossible to perceive are: red, green, blue, red-green, blue-green, red-blue, and red-green-blue (total color blindness). Males are ten times more likely to be color blind than females. The disability is especially pronounced among male caucasians: 8% suffer some form of red-green color blindness. For color distinctions to be perceived, it is important to vary as many primary colors as possible. Perception of color contrast also decreases with age: brighter colors are better for older readers.
In general, women are more sensitive to color than men. (Men are ten times as likely to be color blind.) Studies also show gender differences in color memories and color preferences. Statistically, women find dark blue, and then yellow the most memorable colors. Men find purple, and then dark blue most memorable. Yellow is much less memorable for men. Preferentially, women list shades of red first; men list shades of blue. The social associations of pink and blue may be largely responsible. With mixed genders, top preferences are: 1.Red, 2.Blue, 3.Purple, 4.Green, and 5.Orange. Designers must weigh the contradictory indications of preference and memorability, considering reader engagement vs. the dictates of pedagogy.
Many factors affect the perception of color, and these effects are generally not uniform across the spectrum. Apart from physiological differences among readers, external conditions such as lighting, screen brightness, and surrounding colors dramatically change the way in which color is perceived. Impressionist painters were masters at capturing these perceptual subtleties. A basic principle, therefore, is to design in an environment that is as close as possible to the one in which a text will be used. For darker viewing, light elements on a darker background are easier to read and less tiring; for brighter environments, the reverse is true. In any case, contrast is the most important factor for legibility.