BCM2043-Multimedia

Technology &
Application

Chapter 7 - FUNDAMENTAL
OF MULTIMEDIA:
COLOR
Learning Outcomes
• In this chapter, Student will be able
– To understand the color features
– To select color that suitable for their
project
Color Terminology

• There are several other terms used to

describe color, including
–Hue
–Saturation
–Value
Hue

• Definition – a distinct • ROY G. BIV =

color of the color – Red
gamut (range of a – Orange
color model) – Yellow
• Defined by a particular – Green
wavelength – Blue
– Indigo
• This is what most of
– Violet
us refer to when we
say “color”
Saturation

• Definition: High saturation

– “the amount of white light
(or gray paint) mixed with
the hue”
– how MUCH color; the
dominance of the hue
• High Saturated colors
– include little gray or white
light Low saturation
– These are bright and vibrant
• Low Saturated colors
– appear grayish in color
– These include pastels and
“muddier” colors
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:
– “the intensity of light
present”
– how light or dark the color is tints
• 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 shades
black
Color Model: <-------- hue -------->

HSV/HSL

<-------- lum -------->

<-------- sat -------->
• 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 HSV’s black to hue),
therefore providing a “double
cone”
• PowerPoint example
Color Wheels

• Help to arrange colors and determine

appropriate combinations of color
• Three types
–artist’s 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 (artist’s 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
SELECTING YOUR COLOR
SCHEME
Two Important Issues to consider…
Message trying to send
Audience you are trying to reach.
Selecting Your Color Scheme
• Age Differences
– Younger children prefer brighter, more solid colors
– Adults prefer more subdued colors (i.e., light values/tints) (e.g.,
pastels)
• Class Differences
– Working class prefer “named” colors: blue, red, green, etc.
– More “highly educated” class prefers obscure colors: taupe,
azure, mauve
• Gender
– 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
• Warm climates = strong colors
• Cooler climates = cooler, “more washed out” colors
– Colors and their common connotations in Western culture
– Cultural Examples (next slide)

Color Positive Negative

White Clean, innocent, pure Cold, empty, sterile
Dangerous, aggressive,
Red Strong, brave, passionate
domineering
Yello
Happy, friendly, optimistic Cowardly, annoying, brash
w
Green Natural, tranquil, relaxing Jealous, inexperienced, greedy
Brown Warm, earthy, mature Dirty, sad, cheap
Strong, trustworthy,
Blue Cold, depressing, gloomy
authoritative
Selecting Your Color Scheme –
Cultural Examples
Color Country: Meaning
China: color for young boys
Black
Western: funerals, death, bad guys, rebellion
Japan: white carnation symbolizes death
White Eastern: funerals
Western: brides, angels, good guys, hospitals, doctors, peace (white dove)
China: good luck, celebration, summoning
Cherokees: success, triumph
India: purity
Red South Africa: color of mourning
Russia: Bolsheviks and Communism
Eastern: Worn by brides
Western: excitement, danger, love, passion, stop
Orang Ireland: Religious (Protestants)
e Western: Halloween (with black), creativity, autumn
Selecting Your Color Scheme –
Cultural Examples
Color Country: Meaning
China: nourishing
Egypt: color of mourning
Yellow Japan: courage
India: merchants
Western: hope, hazards, coward
China: green hats indicate a man’s wife is cheating on him, exorcism
India: Islam
Green
Ireland: <the whole country>
Western: spring, new birth, go, St. Patrick’s Day
Cherokees: defeat, trouble
Blue Iran: color of heaven and spirituality
Western: depression, sadness, conservative, corporate
Thailand: color of mourning (widows)
Purple
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
Selecting Your Color Scheme

• Using tools
– MS color palette
allows you to select
rows for
“harmonious” color
schemes
Conclusion
• Color Terms
• Color Wheel
– Hue – Additive
– Saturation – Subtractive
– Value
• Color Choices
• Color models
– Age
– HSV
– Class
– RGB
– Gender
– CMYK
– Season
– Culture
References
• Tay Vaughan. Multimedia: Making It Work, Ninth Edition. Mc Graw
Hill. 2014. ISBN-13: 978-0071832885.
• Zhe-Nian Li, Mark S. Drew.S & Jiangchuan Liu. Fundamentals of
Multimedia (Texts in Computer Science) 2nd ed. 2014 Edition.
Springer Publication. 2014. ISBN-13: 978-3319052892.
• Khalid Sayood. Introduction to Data Compression, Fourth Edition
(The Morgan Kaufmann Series in Multimedia Information and
Systems) 4th Edition. Elsevier. 2012 ISBN-13: 978-0124157965.
• Savage, T.M., Vogel, K.E. An Introduction to Digital Multimedia 2nd
ed.. 2013. Jones & Bartlett Learning ASIN: B00LZM6ESY.
• Parag Havaldar, Gerard Medioni. Multimedia Systems: Algorithms,
Standards, and Industry Practices (Advanced Topics) 1st Edition.
Cengage Learning. 2011. ISBN-13: 978-1418835941

Computing 33
Web Links
• “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/framePic.htm April 10,
2006.
• Wollin, Lisa. “Choosing Colors for your Web Site.” Online.
http://blogs.msdn.com/lisawoll/archive/2004/12/14/301340.as
px Accessed April 10, 2006.
• “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.

Computing 34
Web Links
• “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/en-
us/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.
• Zarnia,Steve. 2006. teaching material
Computing 35
 THANKS BE TO GOD!

Computing