The Importance of Color Stephen Zanias CSE 332

The Importance of Color Stephen Zanias CSE 332

The Importance of Color Stephen Zanias CSE 332 Multimedia April 11, 2006 Outline Color Terminology Color Wheels Additive vs. Subtractive Color Using the Color Wheel Selecting Your Color Scheme Examples

Computer Color Schemes Color Terminology There are several other terms used to describe color, including Hue Saturation Value Hue Definition a distinct ROY G. BIV = Red

color of the color Orange gamut (range of a Yellow color model) Green Defined by a particular wavelength Blue Indigo This is what most of Violet us refer to when we say color Saturation Definition: High Saturated colors include little gray or white light

the amount of white light (or gray paint) mixed with the hue how MUCH color; the dominance of the hue These are bright and vibrant Low Saturated colors appear grayish in color These include pastels and muddier colors High saturation Low saturation Webpage Example The two screen shots primarily differ based on their saturation How has the appeal

changed? Is one of the slides more generally appealing than the others? Value Definition: tints the intensity of light present how light or dark the color is Also referred to as brightness or intensity Range from tints (light values) to shades (dark values) Often accomplished by mixing the color with various

amounts of white or black shades HSV specifies a value from 0 to 255 for Hue Saturation Value HSL (Hue, Saturation, and Lightness/ Luminance) is a similar model, but L expands from white to black (rather than HSVs black to hue), therefore providing a double

cone PowerPoint example <-------- lum --------> <-------- hue --------> <-------- sat --------> Color Model: HSV/HSL Color Wheels Help to arrange colors and determine appropriate combinations of color Three types

artists wheel (paint mixing) subtractive color wheel additive color wheel Additive Color Wheel Models how projected color combines Black = no light (i.e., no color) White = all light (i.e., all color) Primary colors = RED GREEN BLUE

From which we get RGB Used in computer monitors, TV sets, and stage lighting (LCD lights) Color Model: RGB RGB stands for the primary additive colors RED GREEN BLUE Has become a standard and

is often used in languages and programs (i.e., HTML, Flash) Each value given an integer range from 0 to 255 Can also be expressed as a hexadecimal value Subtractive Color Wheel Models how painted color combines (since it is now on the paper and reflecting the light) White = no color (all reflected) Black = all color (none reflected) Traditional (artists

wheel) primary colors = RED YELLOW BLUE OR Subtractive Color Wheel Printers (computer) use the following primary colors = CYAN MAGENTA YELLOW From which we get

CMYK (more detail later Subtractive color works through light absorption (what we see is the color not absorbed) Magenta + Cyan = Blue Cyan + Yellow = Green Yellow + Magenta = Red Color Model: CMYK CMYK stands for the primary additive colors CYAN

MAGENTA YELLOW BLACK The K stands for key, which is short for key plate (printing term) Color Model: CMYK Used especially in the printing of images + + + = Using the color wheel

The color wheel makes it simple to determine color schemes for a multimedia project Types of Colors Primary Secondary Tertiary Complementary colors Split-complementary Triad Analogous

Using the color wheel Primary Colors The defining colors of the wheel In the traditional wheel, these consist of RED BLUE YELLOW Using the color wheel Secondary Colors

colors equidistant between the primary colors In the traditional wheel, these consist of VIOLET (blue and red) GREEN (yellow and blue) ORANGE (red and yellow) Using the color wheel Tertiary Colors

colors between the primary color and secondary color In the traditional wheel, these consist of RED-VIOLET BLUE-VIOLET BLUE- GREEN YELLOW-GREEN YELLOW-ORANGE RED-ORANGE Using the color wheel Complementary Colors

Exist across from each other on the color wheel A primary and a secondary Contrast because they share no common colors (e.g., red and green (blue and yellow)) Produce excitement and action Combining complements produces a neutral grey Seen often in color schemes and logos

Example: BLUE and ORANGE Using the color wheel Split-Complementary Colors Exist on either side of the complementary color A primary and two tertiary Contrast, but not as significantly as complementary colors Example:

BLUE and YELLOW-ORANGE RED-ORANGE Using the color wheel Triad Colors Three colors located equidistantly around a color wheel Primary colors Secondary colors

Group of tertiary colors Provides a balanced color scheme Can be a good place to start exploring color palettes Using the color wheel Analogous Colors Colors adjacent to each other on the color wheel Share enough common attributes that can complement each other But, provides little contrast Example:

BLUE BLUE- GREEN GREEN Webpage Example The two screen shots differ based on their contrast Analogous colors are used As well as various values and saturations How has the appeal

changed? How has the perception of quality changed? Selecting Your Color Scheme Two Important Issues to consider Message trying to send Audience you are trying to reach Webpage Example Which sells the most/least expensive moods?

Which would you feel most comfortable from buying from? If you were looking for financial information, which site would you be most/least likely to use? The woman is telling you a secret. In each case, what do you think it might be about? (Source: Nolan, 2003) Selecting Your Color Scheme Age Differences Class Differences

Working class prefer named colors: blue, red, green, etc. More highly educated class prefers obscure colors: taupe, azure, mauve Gender Younger children prefer brighter, more solid colors Adults prefer more subdued colors (i.e., light values/tints) (e.g., pastels) Men tend to prefer cool colors (blues and greens) Women tend to prefer warm colors (reds and yellows) Seasonal issues

Winter = blacks, whites, grays Spring = spring greens and bright colors Summer = yellows Fall = browns and golds Selecting Your Color Scheme Cultural Issues Geography Color Warm climates = strong colors Cooler climates = cooler, more washed out colors

Colors and their common connotations in Western culture Cultural Examples (next slide) Positive Negative White Clean, innocent, pure Cold, empty, sterile Red Strong, brave, passionate Dangerous, aggressive, domineering Yello w Happy, friendly, optimistic Cowardly, annoying, brash Green Natural, tranquil, relaxing

Brow Warm, earthy, mature Jealous, inexperienced, greedy Dirty, sad, cheap Selecting Your Color Scheme Cultural Examples Color Country: Meaning Black China: color for young boys Western: funerals, death, bad guys, rebellion White Japan: white carnation symbolizes death Eastern: funerals Western: brides, angels, good guys, hospitals, doctors, peace (white dove)

Red China: good luck, celebration, summoning Cherokees: success, triumph India: purity South Africa: color of mourning Russia: Bolsheviks and Communism Eastern: Worn by brides Western: excitement, danger, love, passion, stop Orang Ireland: Religious (Protestants) Selecting Your Color Scheme Cultural Examples Color Country: Meaning China: nourishing Egypt: color of mourning Yellow Japan: courage India: merchants Western: hope, hazards, coward

Green China: green hats indicate a mans wife is cheating on him, exorcism India: Islam Ireland: Western: spring, new birth, go, St. Patricks Day Blue Cherokees: defeat, trouble Iran: color of heaven and spirituality Western: depression, sadness, conservative, corporate Purple Thailand: color of mourning (widows) Western: royalty Selecting Your Color Scheme Setting Moods

Example: evidence suggests using green in the workplace results in less absenteeism through illness Univ. of Iowa coach painted visitors locker room pink because research shows that it reduces aggression Webpage Example The two screen shots differ based on their temperature Blue projects businesslike and authoritative

Explains use in many business websites However, also cold, conservative, and unapproachable Addition of red and yellow brings warmth and dynamism Do you agree? Selecting Your Color Scheme Using tools MS color palette allows you to select rows for harmonious color schemes

Conclusion Color Terms Hue Saturation Value Color models HSV RGB CMYK

Color Wheel Additive Subtractive Color Choices Age Class Gender Season Culture The End Questions? Color Fun

Color Wheel 2.1. Online. http://www.ficml.org/jemimap/style/color /wheel21.html April 10, 2006. Website Color Picker. Online. http://www.digitdesigns.com/colrPick/fra mePic.htm April 10, 2006. Wollin, Lisa. Choosing Colors for your Web Site. Online. http://blogs.msdn.com/lisawoll/archive/2 004/12/14/301340.aspx Accessed April 10, 2006. References

Color Principles Hue, Saturation, and Value. NC State Scientific Visualization. Online. http://www.ncsu.edu/scivis/lessons/colormodels/ color_models2.html Accessed April 11, 2006. CMYK Color Model. Wikipedia. Online. http://en.wikipedia.org/wiki/CMYK_color_model Accessed April 9, 2006. HSL Color Space. Wikipedia. Online. http://en.wikipedia.org/wiki/HLS_color_space Accessed April 8, 2006. Image:ColourShading.png. Wikipedia. Online. http://en.wikipedia.org/ wiki/Image:ColourShading.png Accessed April 10, 2006. Nolan, Katherine. Color It Effective: How Color Influences the User. MS Office Online. January, 2003. Online. http://office.microsoft.com/enus/assistance/HA010429371033.aspx Accessed April 10, 2006. Study Art: Color. Online. http://www.sanford-artedventures.com/study/g_color.html Accessed April 8, 2006. What is Color? Online. http://www.devx.com/projectcool/Article/19954. Accessed April 8, 2006.

Recently Viewed Presentations

  • The Odyssey By Homer All content taken from

    The Odyssey By Homer All content taken from

    The next morning Odysseus asks for a sign, and Zeus sends a clap of thunder out of the clear blue sky. A servant recognizes it as a portent and prays that this day be the last of the suitors' abuse....
  • CE 394K.2 Hydrology

    CE 394K.2 Hydrology

    Example Silty-Loam soil, 30% effective saturation, rainfall 5 cm/hr intensity Neutron scattering (attenuation) Measures volumetric water content ( v) Attenuation of high-energy neutrons by hydrogen nucleus Advantages: samples a relatively large soil sphere repeatedly sample same site and several depths...
  • The journey to personal responsibility - KSHA

    The journey to personal responsibility - KSHA

    Furthermore, the shortage of educational audiologists across the US has resulted in teachers and students bearing the responsibility of monitoring hearing aid and FM system use in the classroom so as to ensure that children with hearing loss have adequate...
  • 5-Minute Check 1

    5-Minute Check 1

    SOFTBALL. The diagram shows the path of the softball in a drill developed by four players. Find the measure of each numbered angle. Plan: You know that <1 and <2 are vertical angles. Use the Ver. Angles Thmto find ....
  • A2 Physical Education Sport Psychology

    A2 Physical Education Sport Psychology

    Review your summary sheet for aggression A2 Physical Education Sport Psychology Week 3 Revision AGGRESSION AND CONFIDENCE Aggression vs assertion "Any behaviour that is intended to harm another individual by physical or verbal means." (BULL) "Any form of behaviour directed...
  • Specifications Breakout - IQ Consortium

    Specifications Breakout - IQ Consortium

    Impurities - Qualification Threshold. The proposal presented in the Pharm. Tech. paper was discussed at length for different perspectives: For doses up to 2 g, qualification threshold for impurities in drug substance used in early phase studies should be 3x...
  • Friends for Language

    Friends for Language

    xxx,xxx refugees November 2015-present. xxx,xxx government-sponsored. Xxx,xxx from YYY; xx,xxx from YYY. ... ESL teachers looking for a new volunteer challenge. Have teachers work in pairs. Always focus on what students want/need to learn. Be flexible: schedule, pedagogy ...
  • Unit 4

    Unit 4

    The magnitude of the ionization energy is determined by the attraction of the positive nucleus for the negative electrons that are being removed (essentially Coulomb's law) and the force of attraction is dependent upon two factors; The nuclear charge (how...