Color Why study color theory? Color in everyday life is very diverse,

from knowing that a fruit is ripe to eat, to understanding how Color can affect our moods.

If you are involved in the creation or design of visual documents such as Multimedia application, then an understanding of color will help

when incorporating it into your own designs

04/19/23 Color 1

Color Seeing color depends on 3 factors:

The nature of light: consists of a large number of waves varying frequencies and wave length

The interaction of light with matter: parts are absorbed and parts are reflected.

The physiology of human vision: photoreceptors receive the light and different frequencies gives different color sensations. For example short wave colors like violet, blue,

and green while longer frequencies gives yellow, orange, and red

04/19/23 Color 2

04/19/23

History of color Newton (1704) used a prism to show

that sunlight was composed of light with all colors in the rainbow. He defined it as the spectrum.

3Color

04/19/23 Color

Light Light combining intensity of all frequencies is called white

light

Sun light is called white light. It preserves the color of objects.

Black is the absence of light, not a color. Object that appear black absorb light of all visible frequencies.

Achromatic light has no color, but may vary in intensity, also called luminance (physical concept), which is perceived as brightness (psychological term) or level of grey. We can represent it by a scalar between 0 (black) and 1

(white)

4

04/19/23 Color

Light Energy

We are all surrounded by electromagnetic waves of energy.

Light (color) is just one form of energy that we can actually see.

A wavelength is the distance between the same locations on adjacent waves.

The frequency of a wave is determined by the number of complete waves, that pass a given point each second.

5

04/19/23 Color

The color of light Candlelight lacks high frequencies. It emits

yellowish light. Shining light emits light at all visible

frequencies, but is richer towards the low frequencies and hence enhances the reds.

Fluorescent light is richer in high frequencies and enhances blues.

Sunlight has all frequencies but they have an uneven distribution: the mid-range (yellow, green) are stronger.

Since humans evolved in sunlight, we are most sensitive to yellow and green.

6

Color Terminology There are several other terms used to

describe color, including Hue Saturation Value

04/19/23 7Color

Hue Definition – a distinct

color of the range of a color model defined by a particular wavelength

This is what most of us refer to when we say “color”

ROY G. BIV = Red Orange Yellow Green Blue Indigo Violet

04/19/23 8Color

SaturationRefers to the amount of a color used.

When a color is at full saturation, it is extremely bright and vibrant( بالحياة .(نابض

When a color is "desaturated," a large amount of color has been removed.

These desaturated colors constitute the grayscale; running from white to black with all of the intermediate

grays in between High saturation

Low saturation

04/19/23 9Color

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?

04/19/23 10Color

Value The intensity of light present, also referred to

as “brightness” or “intensity” how light or dark the color is

Range from “tints الصبغات” (light values) to “shades” (dark values)

Often accomplished by mixing the color with various amounts of white or black

tints shades

04/19/23 11Color

Hue, Saturation and Value

04/19/23 12Color

Color Model: HSV/HSL

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”

<------ hue ------>

<--

----

sat

----

-->

<--

----

lu

m -

----

->

04/19/23 13Color

04/19/23 Color

HSV color coding Hue: cyclic [0,360] R-Y-G-C-B-M Saturation: pure color Value: Luminance or Brightness

Black

Red

Green

Blue Magenta

Yellow

Cyan

White

Black

Red

YellowGreen

Cyan

Blue Magenta

S

V

14

White

Color Wheels Help to arrange colors and determine

appropriate combinations of color Two types

subtractive color wheel(artist’s wheel or paint mixing)

additive color wheel

04/19/23 15Color

Additive colors Are colors that are associated with

emitted light directly from a source before an object reflects the light.

When equal amounts of Red Green and Blue light are combined, they produce white light.

04/19/23 Color <#>

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 BLUEFrom which we get RGB

Used in computer monitors, TV sets, and stage lighting (LCD lights)

04/19/23 17Color

04/19/23 Color Color, slide 18

The 3D space of additive colors

Black (0,0,0)

Red (1,0,0)

Green (0,1,0)

Blue (0,0,1)

Magenta (1,0,1)

Yellow (1,1,0)

Cyan (0,1,1)

White (1,1,1)

Where does the gray appear?

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

04/19/23 19Color

Subtractive colors are colors that are associated with

reflected light. Blue red and yellow are associated

with the subtraction of light and used in pigments for making paints, inks, colored fabrics.

All printing processes use subtractive colors in the form of Cyan (blue) Magenta (red) Yellow and sometimes Black.

04/19/23 Color 20

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…

04/19/23 21Color

Subtractive Color Wheel Printers (computer) use the

following primary colors = CYAN MAGENTA YELLOW

From which we get CMYK Subtractive color works

through light absorption (what we see is the color not absorbed) Magenta + Cyan = Blue Cyan + Yellow = Green Yellow + Magenta = Red

04/19/23 22Color

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)

04/19/23 23Color

04/19/23 Color

Subtractive color mixing Colors can be mixed to combine their

absorbing powers Blue paint reflects blue, violet, green, but

absorbs red, orange, yellow Yellow paint reflects, red, orange, yellow,

green, but absorbs blue, violet When mixed, they reflect only green

This is called color mixing by subtraction

24

Color Model: CMYK

Used especially in the printing of images

+ + =+

≈

04/19/23 25Color

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

04/19/23 26Color

Using the color wheel: Primary Colors

In the traditional wheel, the colors of the wheel that consist of RED BLUE YELLOW

Primary colors are useful for designs or art that needs to have a sense of urgency.

Primary colors are the most vivid colors when placed next to each other,

Notice that most fast food joints use primary colors in their logos, as it evokes speed.

04/19/23 27Color

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)

Secondary are usually more interesting than primary colors, but they do not evoke speed and urgency

04/19/23 28Color

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

04/19/23 29Color

Using the color wheel: Complementary Colors

Exist across from each other on the color wheel that is a primary and a secondary

Contrast because they share no common colors (e.g., red and green (blue and orange))

Produce excitement and “action”

Combining complements produces a neutral grey

Seen often in color schemes and logos

Example: BLUE and ORANGE

04/19/23 30Color

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

04/19/23 31Color

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

04/19/23 32Color

Using the color wheel: Analogous Colors

Colors adjacent to each other on the color wheel

Share enough common attributes that can complement each other

They are good for very serene-feeling designs and artwork where you want viewers to feel comfortable.

But, provides little contrast Example:

BLUE BLUE- GREEN GREEN

04/19/23 33Color

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?

04/19/23 34Color

Selecting Your Color Scheme

Two Important Issues to consider…Message trying to sendAudience you are trying to reach

04/19/23 35Color

Webpage Example

Which would you feel most comfortable from buying from?

04/19/23 36Color

Selecting Color Warm Colors: Colors such as red, yellow, and

orange. These colors evoke warmth because they remind us of things like the sun or fire.

Cool Colors: Colors like blue, green, and purple (violet). These colors evoke a cool feeling because they remind us of things like water or grass.

Neutral Colors: Gray, Brown. These aren't on most color wheels, but they're considered neutral because they don't contrast with much of anything.

04/19/23 37Color

Selecting Your Color Scheme Age Differences

Younger children prefer brighter, more solid colors Adults prefer more light colors

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, grays Spring = spring greens and bright colors Summer = yellows , whites Fall = browns and golds

04/19/23 38Color

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

Color Positive Negative

White Clean, innocent, pure Cold, empty, sterile

Red Strong, brave, passionateDangerous, aggressive, domineering

Yellow

Happy, friendly, optimistic Cowardly, annoying, brash

Green Natural, tranquil, relaxing Jealous, inexperienced, greedy

Brown

Warm, earthy, mature Dirty, sad, cheap

BlueStrong, trustworthy, authoritative

Cold, depressing, gloomy

04/19/23 39Color

Selecting Your Color Scheme Cultural Examples

Color Country: Meaning

BlackChina: color for young boysWestern: funerals, death, bad guys, rebellion

White

Japan: white carnation symbolizes deathEastern: funeralsWestern: brides, angels, good guys, hospitals, doctors, peace (white dove)

Red

China: good luck, celebration, summoningCherokees: success, triumphIndia: puritySouth Africa: color of mourningRussia: Bolsheviks and CommunismEastern: Worn by bridesWestern: excitement, danger, love, passion, stop

Orange

Ireland: Religious (Protestants)Western: Halloween (with black), creativity, autumn

04/19/23 40Color

Selecting Your Color Scheme Cultural ExamplesColor Country: Meaning

Yellow

China: nourishingEgypt: color of mourningJapan: courageIndia: merchantsWestern: hope, hazards, coward

Green

China: green hats indicate a man’s wife is cheating on him, exorcismIndia: IslamIreland: <the whole country>Western: spring, new birth, go, St. Patrick’s Day

BlueCherokees: defeat, troubleIran: color of heaven and spiritualityWestern: depression, sadness, conservative, corporate

PurpleThailand: color of mourning (widows)Western: royalty

04/19/23 41Color

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

04/19/23 42Color

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?

04/19/23 43Color

Selecting Your Color Scheme

Using tools MS color palette

allows you to select rows for “harmonious” color schemes

04/19/23 44Color