Color Theory: Why study color theory?

If you are involved in the creation or design of visual documents, an understanding of color will help when incorporating it into your own designs. Choices regarding color often seem rather mystical, as many seem to base decisions on nothing other than "it looks right." Although often told I had an eye for color, the reason why some colors worked together while others did not always intrigued me and I found the study of color theory fascinating. While attending the University of Minnesota I enrolled in almost every course I could from different departments: graphic design, interior design, and fine arts. During my studies, I learned that there were 2 main reasons why scholars investigated color—the first involved the communication of colors; the other involved the application of color. Communicating Color What is red? Candy apple red, blood red, catsup red, rose red... to try and communicate a specific hue is difficult without some sort of coding system. Early in the 1900's, Albert Munsell, a professor at an art school in Boston developed a color system which offered a means to name colors. With a published system, people could be specific about which red they were referring. Munsell's system has been reworked for today's use with the Pantone color system, TRUEMATCH, CIE systems and others.

Color Application With respect to the arts, color was part of the realistic, visual representation of form, but one group of painters abandoned the traditional practices regarding color in painting. This group of artists were influenced by Cezanne, Van Gogh, and Gauguin. Led by Henri Matisse, they were known as the Fauves, or "the wild beasts." Their exuberant use of brilliant hues seem to disregard imitative color 1. Whereas other artists had used color as the description of an object, the Fauves let color become the subject of their painting. A painting in the "Fauvist Manner" was one that related color shapes; rather than unifying a design with line, compositions sought an expressiveness within the relationships of the whole. This turn from tradition brought an integrity to color in that color was regarded on its own merit. The next several pages of this site offer a tutorial regarding color theory. After reviewing the information, I hope you will see that the successful use of color is not at all mystical, and that by understanding a few things about color, it is possible to incorporate into your designs with a confidence based on tested concepts and methods.

Color Basics Color is the perceptual characteristic of light described by a color name. Specifically, color is light, and light is composed of many colors —those we see are the colors of the visual spectrum: red, orange, yellow, green, blue, and violet. Objects absorb certain wavelengths and reflect others back to the viewer. We perceive these wavelengths as color. A color is described in three ways: by its name, how pure or desaturated it is, and its value or lightness. Although pink, crimson, and brick are all variations of the color red, each hue is distinct and differentiated by its chroma, saturation, intensity, and value. Chroma, intensity, saturation and luminance/value are inter-related terms and have to do with the description of a color.

Chroma: How pure a hue is in relation to gray Saturation: The degree of purity of a hue. Intensity: The brightness or dullness of a hue. One may lower the intensity by adding white or black. Luminance / Value: A measure of the amount of light reflected from a hue. Those hues with a high content of white have a higher luminance or value. Shade and tint are terms that refer to a variation of a hue.

Shade: A hue produced by the Tint: A hue produced by the addition of white.

addition

of

black.

the result gets darker and tends to black. or through the printing process. Subtractive Color. If we are working on a computer. Those colors used in painting—an example of the subtractive color method. an artist has a variety of paints to choose from. Additive Color. When a designer is utilizing the computer to generate digital media. The CMYK color system is the color system used for printing. colors are achieved with the additive color method. we are using the subtractive color method. the colors we see on the screen are created with light using the additive color method. as one adds color. Additive color mixing begins with black and ends with white. The RGB colors are light primaries and colors are created with light. & blue light are used to generate color on a computer screen. When painting. green. the result is lighter and tends to white. as more color is added. When we mix colors using paint. Subtractive color mixing means that one begins with white and ends with black. Percentages of red. .Color Systems Available color systems are dependent on the medium with which a designer is working. and mixed colors are achieved through the subtractive color method.

Reproducing color can be problematic with regard to printed. digital media.000 colors).Working With Systems The Visible spectrum consists of billions of colors. Although a monitor may be able to display 'true color' (16. Since digital designs are generated using the RGB color system. and older computer systems may be limited to 216 cross-platform colors. because what we see is not what is possible to get. a high quality printer is only capable of producing thousands. then create a bridge between primaries using secondary and tertiary colors. Begin a color wheel by positioning primary hues equidistant from one another. These terms refer to color groups or types: Primary Colors: Colors at their basic essence. or choosing colors from Pantone© palettes insures proper color rendering. those colors that cannot be created by mixing others. a monitor can display millions. Color Wheel A color wheel (also referred to as a color circle) is a visual representation of colors arranged according to their chromatic relationship.000. Working within the CMYK color system. colors used in those designs must be part of the CMYK spectrum or they will not be reproduced with proper color rendering. millions of these colors are outside of the spectrum available to printers. .

. Analogous Colors: Those colors located close together on a color wheel. Tertiary Colors: Those colors achieved by a mixture of primary and secondary hues.Secondary Colors: Those colors achieved by a mixture of two primaries. Complementary Colors: Those colors located opposite each other on a color wheel.

saturated. light value hues are "active" and visually advance.The color wheel can be divided into ranges that are visually active or passive. and yellow. Passive colors appear to recede when positioned against active hues. Color relationships may be displayed as a color wheel or a color triangle. The primary hues are red. and the resulting tertiaries formed are dark neutrals. dark value hues are "passive" and visually recede. Most often warm. Nine-part harmonic triangle of Goethe begins with the printer's primaries. blue and yellow. The Printers' color triangle is the set of colors used in the printing process.      Advancing hues are most often thought to have less visual weight than the receding hues. cyan. Some colors remain visually neutral or indifferent. Active colors will appear to advance when placed against passive hues. Cool. . the secondaries formed are the painter's primaries. low saturated. The primaries are magenta. Tints or hues with a low saturation appear lighter than shades or highly saturated colors. The Painter's color triangle consists of colors we would often use in art class—those colors we learn about as children.

Analogous colors are positioned in such a way as to mimic the process that occurs when blending hues. Due to the physiological differences between individuals. The colors that are positioned opposite one another are complementary colors. cones are sensitive to red. We learn from the relationships displayed by a color wheel that every color has an opposite. green & blue light and responsible for color vision.) Perceptual Opposites. it is still possible to find the opposite of a color and this is due to a phenomenon of our eyes. (Notice the illusion of highlighted edges and raised text. Every color has both a color wheel opposite as well as a perceptual opposite. These photoreceptors convey the color of light to our brain. interesting effects are noticeable. Complementary colors bring out the best in each other.located in the retina of the eye.com) . at BiologyMad. (Learn more about rods and cones. When fully saturated complements are brought together.Complementary Colors We look at a color wheel to understand the relationships between colors. everyone's perceptions do vary— the complements shown below are my own perceived opposites: source >> result After Images Color is light and colored objects absorb and reflect different wavelengths. Note that Vibrating Boundaries may occur when opposing colors are brought together. Light & color are seen by the human eye because of the two types of photoreceptor cells rods and cones . Rods are sensitive to light and dark. Without a color wheel. or a problem if creating visuals that are to be read. This may be a desirable illusion. To call those hues in direct opposition to each other "complements of each other" is appropriate.

When our eyes are exposed to a hue for a prolonged period. Every color has an opposite.Results What you see here is a called an after image. of the image. This occurrence can be advantageous if you are seeking the opposite. There is some constancy with after images as people see images within the same general hue families. if you don't see anything. After Images . and although individual's perceptions do vary. People see the opposite colors or a negative image because staring at one color for an extended period will fatigue the eyes rods & cones. click on the image or the link below to proceed to the next page. These are the after image colors many/most people will see. light sensitive photoreceptors (whose job it is to convert light into electrical activity) in your retina respond to the incoming . This may be dismaying to a viewer if presented with prolonged exposure to colored screens or reading materials. scroll down the page. or contrast. the rods & cones become fatigued. A more in depth explanation offered by Peter Kaiser. MD while at York University. Take the After Image Test Stare at this image for at least 20 seconds. and then look away—you often see the inverse. CA: When you focus on a [strong stimulus]. You might notice this if you are reading something on colored paper. try again! To view the image most people see. or complement. When finished. the range of after images seen is consistent. of a color. This may be VERY faint.

But desensitization also leads to afterimages. :( Color Combinations Color combinations may pass unnoticed when pleasing.unfortunately. because a changing stimulus is usually more important. We determine whether or not we are successful by critically assessing the visual balance and harmony of the final composition—balance and harmony are achieved by the visual contrast that exists between color combinations. The desensitization is strongest for cells viewing the brightest part of the figure. The British psychologist Kenneth Craik burned a tiny hole in his right retina and permanently scarred his eye at that spot. no longer around. When we view a bright flash of light. A constant stimulus is usually ignored in favor of a changing one by the brain. when the screen becomes white. — found at: www. Using a color wheel and a template. but weaker for cells viewing the darkest part of the figure.illusionworks. we see both positive and negative afterimages. As you continue to stare at the [strong stimulus] your photoreceptors become desensitized (or fatigued). or are blinded by the headlights of an approaching car at night. after a year or so. of color relationships. the least depleted cells respond more strongly than their neighbors. NEVER look at any bright light source. Most afterimages last only a few seconds to a minute. Afterimages are constantly with us. His brain cleverly filled-in information at this damaged piece of retina. briefly look at the sun. .light. the relationships between colors are easy to identify. Other neurons that receive input from these photoreceptors respond as well.com . since in the absence of strong stimulation. producing the brightest part of the afterimage. One outcome we seek in the final form or composition. To prevent permanent damage to your eyes. and understanding. Then. when he stared directly into the sun for two minutes. DON'T TRY THIS AT HOME! For the first few days following his experiment--in which he wanted to find out whether such a lesion in the eye is visible--he saw a dim orange disk with closed eyes (positive afterimage) and a black afterimage with open eyes. Your photopigment is "bleached" by this constant stimulation. Fortunately. is a successful use of color. yet offend dramatically when compositions seem to clash. Planning a successful color combination begins with the investigation. Craik's vision at that location in his eye appeared to return to normal. most nerve cells quickly readjust. in particular the sun. Desensitization of the retina can be important for survival.

Double-Complementary Relationship Two complementary color sets. Complementary Relationship Those colors across from each other on a color wheel. .Monochromatic Relationship Colors that are shade or tint variations of the same hue. Split-Complementary Relationship One hue plus two others equally spaced from its complement. the distance between selected complementary pairs will effect the overall contrast of the final composition.

such as red text on a blue background. The Design of visual documents or signage without thought to the overall contrast level between figure and ground can be problematic for people with sight deficiencies. offering the viewer enough contrast between the background (paper or screen) and the text is important. or cast a shadow. Text presentations ideally offer at least an 80% contrast between figure and ground.) may happen when opposing colors are placed in close proximity to each other. When we create visuals that are intended to be read. If a visual document uses . the more an object contrasts with its surrounds. cause illusions when positioned together. Unfortunately. Yellow text on a white background or blue text on a black background.Analogous Relationship Those colors located adjacent to each other on a color wheel. This relationship between a subject (or figure) and its surrounding field (ground) will evidence a level of contrast. The hospital had creatively marked the floor with "road maps" to various areas like the lab. An occurrence known as 'simultaneous contrast' (or chromostereopsis. are difficult to read due to the low level of contrast between figure and ground. (Black text on a white background is ideal. Color & Contrast Every visual presentation involves figure-ground relationships. a viewer will squint to view the text. Some color combinations. lobby. they used red and green lines and my friend could not distinguish between the colors. Triad Relationship Three hues equally positioned on a color wheel. Eye strain and fatigue will result if a viewer focuses on a document displaying similar properties for an extended time period. My first-hand experience with this occurred years ago when visiting a hospital with a friend who was colorblind. the more visible it becomes. Text may appear to vibrate. Sensitivity to Colorblind Deficiencies. causing eye fatigue.) If there is not enough contrast between figure and ground. etc.

e. . or dark value. fully saturated colors will offer the highest level of contrast. moderate. or potentially misunderstood. Itten's Color Contrasts Johannes Itten was one of the first people to define and identify strategies for successful color combinations.color to relate important information. Through his research he devised seven methodologies for coordinating colors utilizing the hue's contrasting properties. insure that no information is lost. The contrast of light and dark The contrast is formed by the juxtaposition of light and dark values. The contrast of saturation The contrast is formed by the juxtaposition of light and dark values and their relative saturation. When choosing complementary colors. These contrasts add other variations with respect to the intensity of the respective hues. Choosing from tints or shades within the hue family reduces the overall contrast of the composition. contrasts may be obtained due to light. i. when the color is not available. This could be a monochromatic composition.

The contrast of complements The contrast is formed by the juxtaposition of color wheel or perceptual opposites. The contrast of hue .The contrast of extension Also known as the Contrast of Proportion. Some interesting illusions are accomplished with this contrast. The contrast is formed by assigning proportional field sizes in relation to the visual weight of a color. Simultaneous contrast The contrast is formed when the boundaries between colors perceptually vibrate.

Alternating color by intensity rather than proportion will also change the perceived visual mix of color. This mix will differ depending on the proportions of allocated areas. the whole area will appear light. intensity. our eyes perceive a visual mix. the greater the contrast. conversely. Smaller areas are subdominant colors. If large areas of a light hue are used.The contrast is formed by the juxtaposition of different hues. color colors Dominant Sub-dominant Accent Dominant Sub-dominant Accent color colors Dominant Sub-dominant Accent color colors . The contrast of warm and cool The contrast is formed by the juxtaposition of hues considered 'warm' or 'cool.' Proportion & Intensity When colors are juxtaposed. or saturation (the figure). Accent colors are those with a small relative area. the whole area appears dark. Placing small areas of light color on a dark background. but offer a contrast because of a variation in hue. or a small area of dark on a light background will create an accent. The greater the distance between hues on a color wheel. if large areas of dark values are used.       The color with the largest proportional area is the dominant color (the ground).

Conversely. the overall composition a displays lower contrast level. it has a light value. If the proximity between the neighboring hues is less apparent when you squint. the value level is dark. attention grabbing ad. or more moderate level of contrast? These decisions concern what is known as the dominant elements of the design. and high contrast. if the overall composition appears light. medium. Examples of Contrast Dominance In the examples below. The choice of colors will enhance or minimize the overall impact. or by squinting your eyes a bit. a determination for the final impact of the whole presentation needs to be identified." Designs that evidence contrast dominance or value dominance are then sub-divided into low. the contrast is high. Low contrast Low contrast compositions use colors within a narrow range of luminosity or . It is easiest to understand the difference between dominant elements in the following compositions from a distance. Understanding how the relationships between the colors of a chosen palette will affect the final outcome of an overall composition is integral to mastering the use of color. if distinctions between hues are very apparent. The dominant element may be classified as either "contrast dominant" or "value dominant. Is your intent to craft a vibrant. and if the overall composition appears dark. moderate. or a more text based layout. and dark value categories. the overall contrast level of a composition changes with the range of luminosity between chosen hues. or light.Dominant Sub-dominant Accent color colors Contrast & Dominance When creating a composition—either something freeform. or a presentation with a low.

Medium value A medium value composition is made up of a balance between tints. Light value A composition made up of tints. the overall value of each composition changes with the incorporated hues' relative saturation. Moderate contrast moderate contrast compositions use colors within a moderate range of luminosity or brightness levels. saturated . Examples of Value Dominance In the examples below.brightness levels. displays an overall light value. High contrast High contrast compositions colors range from very light (high-luminosity) to very dark (low luminosity).

High contrast.) Moderately-high contrast. The split complementary relationship shown in this example presents many possible combinations. and shades. tints & various saturation levels. composition using fully saturated hues. . (Click on the wheel at the left to view a larger image. medium value. Dark A dark value composition displays mostly shades. you can achieve quite a variety of palette options. By varying the saturation and experimenting with shades and tints within the hue relationship. value Color Shade and Tints Using a color wheel divided into various shades and tints is one method of identifying possible options for color schemes. composition using shades.hues. medium value.

tints & various saturation levels. . using shades. High contrast. tints & various saturation levels. Moderately-low contrast. using shades. medium-dark value. using Moderately-high contrast. using tints & various saturation levels. Low contrast. medium value. using shades & various saturation levels. medium-light value. light value. tints & various saturation levels. using shades.Moderately-low contrast. medium value. shades. tints & various saturation levels. Moderate contrast. medium value.

Colors reassigned with proportions allocated to dominant and subdominant areas. Colors applied to composition.Color Studies Colors of a complementary relationship. Color intensity and proportion modified. Colors of a complementary relationship assigned equal proportion. Using tints and shades of the original colors results in a moderate level of contrast and medium value. .

Colors applied to Colors of a triad relationship assigned equal proportion. subdominant.Color intensity and proportion modified . composition.the whole area displays a moderately-high contrast and medium value. Colors of a triad relationship. and accent areas. . Colors reassigned with proportions allocated to dominant.

Colors applied to composition.the whole area displays a medium/dark value. . Colors applied to composition.the whole area displays a moderately low contrast level.the whole area displays a moderately-high contrast level. Colors applied to composition. Color intensity and saturation modified . Color intensity and saturation modified .Color intensity and saturation modified .

the whole area displays a light value.Color intensity and saturation modified . Colors applied to composition. .

Sign up to vote on this title
UsefulNot useful