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.
Sir Isaac Newton's Color Wheel
Sir Isaac Newton's Color Wheel
Claude Boutet's Painter's Circle
Claude Boutet's Painter's Circle

















Ignaz Schiffermüller's Color Wheel
Ignaz Schiffermüller's Color Wheel





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.








Moses Harris's Color Circle
Moses Harris's Color Circle






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.
primary.jpg

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

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

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

complementry.jpg

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

Analogous: any three hues adjacent to one another on the color wheel
analogious.jpg

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.

CMYK is a subtractive color system
CMYK is a subtractive color system


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 is an additive color system
RGB is an additive color system



RGB VS. CMYK




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

external image websafe_color_chart.gif

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.
color_blind_colors.JPG
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:

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.
Daggett, Cobble, and Gertel, (2008) came up with a list of color associations that work well for subjects in school.
Biology: Nature: blue, green, teal, brown, beige
Chemistry: Logic: blue, green, indigo
Physics: Energy: blue, yellow, green, indigo
Foreign Language: Friendship: yellow
History: Age: amber, blue, yellow, sea green
Mathematics: Logic: indigo, blue
Social Studies: Social: orange, green, brown
Drama: Passion: orange, indigo, blue, violet, red, white
Art: Creative: green, violet, red, peach, pink, light yellow
Language Arts: Communication: sea green, blue, green; no avocado, yellow-green, purple, chartreuse
Economics: Wealth: emerald green, amber, violet, gold

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
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.

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.

Study on Color of Text and Background Color:

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.

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:

  • Use color for emphasis and for indicating differences.
  • Ensure good contrast between foreground and background colors, especially for text.
  • Use only a few colors for color coding.
  • Allow learner control of color coding.
  • Use colors in accordance with social conventions.
  • Be consistent in the use of color.
  • Test programs on noncolor displays to assess their effect on persons with color vision deficiency or with older equipment.
  • 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 Extracts colors from images and builds color schemes

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 http://www.aoa.org/x4702.xml
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 http://www.webexhibits.org/colorart/bh.html.
Eldridge, K., & Sawahata, L. (2007). The complete color harmony workbook. Gloucester, MA: Rockport Publishers Inc.
Kyrnin, J. (2011) Are your web pages color sensitive: Color blindness can make your webpages unusable. Retrieved from http://webdesign.about.com/od/accessibility/a/aa062804.htm
Lowengard, S. (2006). The creation of color in eighteenth-century Europe. Columbia University Press. Retrieved from http://www.gutenberg-e.org/lowengard/A_Chap03.html.
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
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