Color

= Color =

"The whole world, as we experience it visually, comes to us through the mystic realm of color." - Hans Hofmann

**History:**

Sir Isaac Newton (1642-1726) conducted a series of experiments showing his understanding of the rainbow. He refracts white light with a prism showing the colors red, orange, yellow, green, blue, and violet. His findings fascinated artists because he created a conceptual arrangement of colors in a circle. This allowed the primary colors, red, yellow, and blue, to be arranged opposite their complementary colors, green, orange, and violet. Claude Boutet created a painter’s circle in 1708 based on Newton’s circle .



An entomologist, Ignaz Schiffermüller wished to create a more variated color wheel, one that would express the logical connections between musical and chromatic harmonies but that would also prove useful in practical endeavors, including natural-history classification and color production. (Lowengard, S., 2006). The ﻿twelve colors of Schiffermüller's color wheel included the three primaries, the secondaries formed by their combination, and six tertiary colors.



In The Natural System of Colours, Moses Harris crafted a circle that expanded the color relationships depicted in other circle-based systems. He divided the circle into arced segments to show, in a single format, not only pure colors but also shades and tones. (Lowengard, S., 2006).

**The Basics:**

Light enters the eye as spectrum of colors, distributed by wavelength. This spectral distribution function impacts the retina in the back of the eye and is absorbed by the cones. Human beings have three types of cones, which respond to different wavelengths of light. These are called either long, medium and short wavelength cones, or, red, green and blue cones. Each cone absorbs light and sends a signal to the brain. This is the principle of trichromacy.

The actual distribution of the spectrum is only indirectly “seen” by the eye. The response of each cone can be encoded as a function of wavelength. Multiplying the spectrum produces the signal that is sent from the eye to the brain. Different spectra can produce the same signal, causing it to “look the same.” This principle is called metamerism.

According to Stone (2002) the principle of metamerism underlies all color reproduction technologies. She reports that instead of reproducing the spectral stimulus, they create an equivalent response, or metameric match by mixing primary colors in a controlled way.

**Color:** a visual attribute of things that results from the light they emit or transmit or reflect. **Hue:** a pure color, with the exception of black and white. **Tint:** a hue mixed with white. **Shade:** a hue mixed with black. **Tone:** a hue mixed with gray. **Chroma**: the intensity or saturation of a hue. **Value:** the lightness and brightness of a color.

**Basic Color Schemes:**

**Primary Colors:** colors that cannot be made by mixing other colors.

**Secondary Colors:** hues made by mixing two primary colors together.

**Tertiary Colors**: hues made by mixing a primary color with a secondary color.

**Complementary Colors:** opposite colors on the color wheel, when mixed together produce a neutral color.




 * Monochromatic:** a single hue combined with any of it's tints or shades.


 * Analogous:** any three hues adjacent to one another on the color wheel

= Color Systems =

Available color systems are dependent on the medium with which a designer is working. When painting, an artist has a variety of paints to choose from, and mixed colors are achieved through the subtractive color method. When a designer is utilizing the computer to generate digital media, colors are achieved with the additive color method.


 * Subtractive Color.** When mixing colors using paint, or through the printing process, the subtractive color method is being used. Subtractive color mixing means that one begins with white and ends with black; as one adds color, the result gets darker and tends to black.The CMYK color system is the color system used for printing. Those colors used in painting—an example of the subtractive color method.




 * Additive Color.** If we are working on a computer, the colors we see on the screen are created with light using the additive color method. Additive color mixing begins with black and ends with white; as more color is added, the result is lighter and tends to white.The RGB colors are light primaries and colors are created with light. Percentages of red, green, & blue light are used to generate color on a computer screen.

**RGB VS. CMYK**

media type="youtube" key="0K8fqf2XBaY" height="390" width="480"

** Hexadecimal Codes:**

Hexadecimal refers to a numbering scheme that uses 16 characters as its base, expressed in a combination of letters and numbers. A hexadecimal system uses 0-9 for the first 10 digits and A-F to represent the remaining 6 digits. Letter A corresponds to the number 10, B to 11, C to 12, and so on up to 15, which is represented by F. Hexadecimal values are another way of expressing an RGB value.

There are 216 web-safe colors. A web-safe color is a hexadecimal color comprised of any combination oft he following: FF, CC, 99, 66, 33, 00, for a potential of 216 colors. These colors were originally identified and given their web-safe name by Lynda Weinman, a graphic and web design guru and author of numerous graphic and web design books. These 216 colors were identified as colors safe for cross-plat-form, cross-browser use on computer systems capable of displaying only 256 colors.

Important Hex Codes to be aware of:

#FFFFFF = white #000000 = black #FF0000 = red #00C000 = green #0000FF = blue #FFFF00 = yellow


 * picture from ColorTools.net

**Color Blindness and Web Design:**

According to the American Optometric Association, Color vision deficiency is the inability to distinguish certain shades of color or in more severe cases, see colors at all. The term "color blindness" is also used to describe this visual condition, but very few people are completely color blind. Most people with color vision deficiency can see colors, but they have difficulty differentiating between red and green or yellow and blue. Protanope color deficiencies make it difficult to see reds and oranges. Tritanope color deficiencies make it difficult to see blues, greens, and purples. Deuteranope color deficiencies make it difficult to see greens and reds, this is the most common color deficiency occurring in about six percent of males.

The following are the simulation images of how the color patches appear to a protanope, deuteranope, and tritanope. However, these are not completely accurate due to the differences between each of the user's monitor's characteristics.  Tips to keep your design color blind friendly: (Adapted from Kyrnin, 2011)
 * 1) Color should not be the only indicator for directions. Remember to use text as well.
 * 2) Avoid placing red and green together.
 * 3) Choose your color scheme with a color conscious eye.

**Color Associations:**

=
<span style="background-color: #ffffff; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; line-height: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The relationship between color and emotion is closely tied to color preferences, i.e. whether the color elicits a positive or negative emotion. (Daggett, Cobble, & Gertel, 2008). Many people have different views of what each color represents. Blue is often referred to as a cool and calming color, this may be due to the fact that many people associate blue with water and water tends to be calming. On the other hand red is often seen as hot and angry. This could be based on the association with fire and the amount of destruction it could cause. ======

=
<span style="background-color: #ffffff; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; line-height: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Daggett, Cobble, and Gertel, (2008) came up with a list of color associations that work well for subjects in school. ======

=
<span style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"><span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Biology** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Nature: blue, green, teal, brown, beige ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"><span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Chemistry:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Logic: blue, green, indigo ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Physics:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Energy: blue, yellow, green, indigo ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Foreign Language** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Friendship: yellow ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**History:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Age: amber, blue, yellow, sea green ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Mathematics:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Logic: indigo, blue ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Social Studies:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Social: orange, green, brown ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Drama:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Passion: orange, indigo, blue, violet, red, white ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Art:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Creative: green, violet, red, peach, pink, light yellow ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Language Arts:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Communication: sea green, blue, green; no avocado, yellow-green, purple, chartreuse ======

=
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal;"> <span style="color: #000000; font-style: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">**Economics:** <span style="color: #000000; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Wealth: emerald green, amber, violet, gold ====== = =

=
<span style="background-color: #ffffff; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; line-height: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Dagget, Cobble, and Gertel, (2008) also found that color can also be associated differently based on the cultural backgrounds. Red for example red can initiate feelings of danger in the U.S., aristocracy in France, death in Egypt, creativity in India, anger in ======

=
<span style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: normal; white-space: pre-wrap;">Japan, or happiness in China. Blue also holds different cultural associations, meaning masculinity in the U.S., peace in France, faith in Egypt, and villainy in Japan. ======

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">**Color Preferences:**

According to Daggett, Cobble, and Gertel, (2008) young children are attracted to warm bright colors. They found that elementary school age children tend to enjoy tints and pastel colors. Where as Middle school age children tend to enjoy bright medium cool colors including green, blue, and blue-greens. During high school the color preference seems to lean towards darker colors such as burgundy, gray, navy dark green, and deep turquoise. Daggett, Cobble, and Gertel, (2008) also found that as children shifted to adolescence they lost the preference for primary colors, this is due to the association of primary colors to immaturity.

When creating instructional media it is important to think about the target audience. A high schooler would not be excited about a program using primary or pastel colors since they may appear too young or "babyish". On the other end of the spectrum, choosing a color scheme including the bright primary colors or even more muted pastels will be preferred by younger students. Daggett, Cobble, and Gertel, (2008) also reported that an overuse of color, more than six colors, in a learning environment strains the mind's cognitive abilities. Color can be a huge benefit to the program when chosen carefully.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">**Study on Color of Text and Background Color:**

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin: 0px; padding: 0px;">Zufic and Kalpic (2009) researched the most efficient text and background color for student learning. Data was collected by comparing the experiment group, using various colored texts and backgrounds, to the control group, using traditional black text on a white background. Their data suggests that black text on a light yellow background yields higher test results. The data also suggested that these color combinations also yield high test results: yellow text on a sea green background, yellow text on a blue background, and black text on a violet background.

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">**More Suggestions for Color in Instructional Media Design:**

Alessi and Trollip (2001) recommend that colors towards the middle of the visible spectrum are "easier to perceive than others". Alessi and Trollip also suggest that the following combinations be avoided: red with green, red with blue, blue with yellow, and blue with green. Other suggestions about using color offered by Alessi and Trollip are as follows:


 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Use color for emphasis and for indicating differences.
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Ensure good contrast between foreground and background colors, especially for text.
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Use only a few colors for color coding.
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Allow learner control of color coding.
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Use colors in accordance with social conventions.
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Be consistent in the use of color.
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Test programs on noncolor displays to assess their effect on persons with color vision deficiency or with older equipment.
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;">Balance learner affect and learning effectiveness when using color.

**Resources:**

Kuler: explore, create, and share color themes

Color Palette Generator: Enter in an image URL to generate a color scheme

Color Scheme Designer 3: Create your own color scheme

Color Schemer: more color scheme ideas

Color Laboratory test your color scheme for color blind users

ColourLovers Color inspiration from the masters of painting

Color Sucker for Firefox <span style="color: #444444; font-family: 'helvetica neue',arial,helvetica,sans-serif; line-height: 20px;">Extracts colors from images and builds color schemes

<span style="color: #444444; font-family: 'helvetica neue',arial,helvetica,sans-serif; line-height: 20px;">Web safe Color Chart a chart showing all 216 web safe hex codes and RGB codes

**References:**

Alessi, S., & Trollip, S. (2001). //Multimedia for Learning Methods and Development.// Boston, MA: Allyn and Bacon. American Optometric Association (n.d.). Color vision deficiency. Retrieved from [] Cyr, D., Head, M., & Larios, H. (2008, June) Colour appeal in website design within and across cultures: A multi-method evaluation. Paper presented at the Administrative Sciences Association of Canada Conference, Halifax, Nova Scotia. doi:10.1016/j.ijhcs.2009.08.005 Daggett, W. R., Cobble, J. E. & Gertel, S. J. (2008). Color in an Optimum Learning Environment. Retrieved from @http://www.leadered.com/pdf/Color%20white%20paper.pdf Douma, M., curator. (2006). Color Vision & Art from WebExhibits, Institute for Dynamic Educational Advancement, Washington, DC. Retrieved from []. Eldridge, K., & Sawahata, L. (2007). The complete color harmony workbook. Gloucester, MA: Rockport Publishers Inc. <span style="font-family: Arial,Helvetica,sans-serif;">Kyrnin, J. (2011) Are your web pages color sensitive: Color blindness can make your webpages unusable. Retrieved from [] Lowengard, S. (2006). The creation of color in eighteenth-century Europe. Columbia University Press. Retrieved from []. Stone, M.C. (2002). A field guide to digital color. Natick, MA: A.K. Peters, Ltd. Retrieved from @http://ironduke.cs.gsu.edu/gso_classes/private/siggraph_courses/S2002/disk1_1_23/notes/21/21.pdf <span style="background-color: #ffffff; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 10pt; font-style: normal; font-weight: normal; line-height: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">York, R. (2005). Beginning CSS: Cascading style sheets for web design. Indianapolis, IN: Wiley Publishing Inc. Zufic, J. & Kalpic, D. (2009). More efficient e-learning through design: Color of text and background. Paper presented at the World Conference on E-Learning in Corporate, Government, Healthcare, and Higher Education, Vancouver, Canada. Paper retrieved from ERIC database. (ED510610).

Last updated on April 20, 2011 Sarah Barnes mrsbarnes123@gmail.com