The Art of

Marvin De Leon
using Color
Content
What is Colors?
How do We See Colors?
Basic Colors
Color Models
Color Characteristics
Color Combinations
Color Depth
Web & Color
Color and Emotions
What is Color Good For?
Common Mistakes in Color Usage
Color Blindness
References
What is Color?
How humans perceive color depends on the interplay of three
elements: the nature of light, the reflective properties of an object,
and the ways in which our retina and visual cortex process light
waves
Pure white light, such as sunlight, is composed of the visible colors.
Sir Isaac Newton discovered this in 1666 by passing a beam of light
through a prism.
Cont
Newton observed that color is not inherent in objects. Rather, the
surface of an object reflects some colors and absorbs all the others.
We perceive only the reflected colors.








When light waves strike an object in nature, the object can transmit,
absorb, or reflect various individual light waves. Depending on the
nature of the object and its atomic structure.


How do We See Colors?
The human eye and brain together translate light into color.
Light receptors within the eye transmit messages to the brain,
which produces the familiar of color.









Retina is covered by millions of light-sensitive cells, some
shaped like rods and some like cones.
Cont
Cones are concentrated in the middle of the retina, Six million cones
in each eye give the brain enough information to interpret colors.
Three types of cone, each sensitive to a different wavelength-this allows
color vision
The actual wavelength that the cone are most sensitive to are 560nm,
530nm, 430nm, commonly labeled "red" "green" "blue" respectively (better
labeling would be short, medium, and long wavelengths).
Rods transmit mostly black and white information to the brain There
are over 120 million of them in each eye.
Rods are very sensitive to light, and allow us to see under very low level of
illumination.
They give us our night vision, in the shades of white, gray and black.
Human eye can distinguish over 10millon different colors.
Birds, fish and many other mammals perceive
the full spectrum.
Bees, can see ultraviolet colors which is
invisible to the human eye.
It was thought that dogs didn't see any color at
all. Recent studies now show, however, that
dogs can differentiate between red and blue
Infants are able to distinguish hues after
several weeks.

FACTS
Additive Subtractive
red + green + blue = white magenta + yellow + cyan = black
There are two color
systems
Learn the
color wheel
Primary colors:
yellow, red and blue
colors at their basic essence; those colors that
cannot be created by mixing others.
Secondary colors:
orange, violet and
green, born of
primary colors
combining any two
adjacent primary colors
Tertiary colors: yellow green,
yellow orange, blue green,
blue violet, red violet, red
orange
formed by combining a secondary
color with its neighboring primary
Color
Relationships
Analogous
Complement Monochrome Triad
The color wheel or color circle is the basic tool for
combining colors. The first circular color diagram was
designed by Sir Isaac Newton in 1666.
Color Harmony
The principle of harmony refers to the
visual agreement of all parts of a work.
The successful application of
harmony results in unity.
Monochromatic
The monochromatic color scheme uses
variations in lightness and saturation of a
single color.
Pros:
Looks clean and elegant
Produces a soothing effect.
Can be used to establish an overall
mood.
Cons:
This scheme lacks color contrast.
It is not as vibrant as the
complementary scheme.
Tips:
Use tints, shades, and tones of the key
color to enhance the scheme.
Different levels of brown is used in this
composition.
Analogous
The analogous color scheme uses colors
that are adjacent to each other on the color
wheel. One color is used as a dominant
color while others are used to enrich the
scheme.
Pros:
as easy to create as the monochromatic,
but looks richer.
Cons:
Lacks color contrast. It is not as vibrant as
the complementary scheme.
Tips:
Avoid using too many hues in the
analogous scheme, because this may
ruin the harmony.
Avoid combining warm and cool colors in
this scheme.
This composition makes use of the
adjacent colors of the color wheel,
from red to blue.
Complementa
ry
The complementary color scheme is
made of two colors that are opposite
each other on the color wheel.
Pros:
offers stronger contrast than any other
color scheme, and draws maximum
attention.
Cons:
This scheme is harder to balance than
monochromatic and analogous
schemes, especially when de-
saturated warm colors are used.
Tips:
For best results, place cool colors
against warm ones, for example, blue
versus orange.
If you use a warm color (red or yellow)
as an accent, you can de-saturate the
opposite cool colors to put more
emphasis on the warm colors.
Avoid using de-saturated warm colors
(e.g. browns or dull yellows)
This composition makes two opposite
colors in the color wheel; red and green.
Other Color
Schemes
Split-Complementary
Relationship One hue plus
two others equally spaced
from its complement.
Double-Complementary
Relationship Two
complementary color sets; the
distance between selected
complementary pairs will effect
the overall contrast of the final
composition.
Triad Relationship Three
hues equally positioned on a
color wheel.
Color its about balance
Think with your eyes !
Color palette
tips & tools
[1]Strive for
harmony
[2]Be mindful of
contrast effects
[3]Understand
color dominance
godisnowhere
godisnowhere
How to you read this?
Analogous any three neighboring colors
Always harmonious as they share the
same base
Analogous
Complement
Complementary any opposite colors to
give details
Monochromatic drawn from the
same hue
Monochrome
Triad
Triad Three hues equally positioned on
a color wheel.
Monochrome
de Lempicka,
1925
Compliments
Kelly, 1964
Analogous
Monet,
Water Lillies, 1914
Triad
Mondrian, 1923
Warm colors Toulouse Lautrec, 1892
Cool colors Van Gogh, 1889
Colors change according to their surroundings

A large block and a same-color line on white,
the line will appear darker
Surround a color with a lighter color and it will appear
darker. Surround a color with a darker color and it will
appear lighter.
Surround a color with a less saturated color and it will
appear more saturated. Surround a color with a more
saturated color and it will appear less saturated.
Surround a color with another hue and
its hue will shift towards the complement
of the surrounding color.
To make surrounded look the same you
need to use two different colors
To make surrounded look the same you
need to use two different colors
Colors shift relative to
their backgrounds
Similar colors next to each other will
have soft edges that blur.
Adding a thin gray edge will
minimize the blur.
Saturated complementary colors next to
each other will have hard edges that
vibrate.
Hue
name and
properties
of a color
that enables it
to be perceived

Brilliance
how light
or dark
a color is

the level and
mixture of white,
black, grey or
complimentary
included in colors

Saturatio
n
Tints-add white Shades-add black
Tints & Shades
Do colors have
personality ?
Selecting Your Color Scheme
Two Important Issues to consider
[1] Message trying to send
[2] Audience you are trying to reach
Cont
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
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
Red
Strong, brave,
passionate
Dangerous, aggressive,
domineering
Yellow
Happy, friendly,
optimistic
Cowardly, annoying, brash
Green
Natural, tranquil,
relaxing
Jealous, inexperienced,
greedy
Brown Warm, earthy, mature Dirty, sad, cheap
Blue
Strong, trustworthy,
authoritative
Cold, depressing, gloomy
Color Country: Meaning
Yellow
China: nourishing
Egypt: color of mourning
Japan: courage
India: merchants
Western: hope, hazards, coward
Green
China: green hats indicate a mans wife is cheating on him,
exorcism
India: Islam
Ireland: <the whole country>
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
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
Orange
Ireland: Religious (Protestants)
Western: Halloween (with black), creativity, autumn
Rules of thumb
for designers
Ensure text readability through
contrast
Avoid the use of textures and pattern for
backgrounds behind texts
Avoid contrasts that cause eye fatigue
Avoid color combinations that cause illusions
when positioned together
Enhance user experience
Establish conventions and use color consistently
Use color both to support users tasks and for
branding
Use color to enhance aesthetic appeal and user
satisfaction
Use color for identification,
grouping, and emphasis
Relate visual elements
Demarcate different areas
Highlight important task-related information
Use color associations in
expressing state information
Be consistent with job-related color associations
Learn about cultural color associations

Color depth(Bit depth), determines the
number of colors used to display (or
print) an image. (the number of bits of
color information per pixel).
Bit has two possible states: it can be
on or off. One bit produces two
possible colors.
A basic color monitor has 8-bit pixels
and is capable of displaying 256
colors.
RGB, grayscale, and CMYK images
contain 8 bits of data per color
channel. With three channels in an
RGB image, this translates to a 24-bit
RGB bit depth (8 bits x 3 channels)
Color Depth
Here's a breakdown of bit depth and color depth. Color
depth is sometimes called color resolution
Bit Depth Color Resolution Calculation
1 bit
2 colors 2
1
(2)
2 bit
4 colors 2
2
(2x2)
3 bit
8 colors 2
3
(2x2X2)
4 bit
16 colors 2
4
(2X2X2X2)
5 bit
32 colors 2
5
(2X2X2X2X2)
6 bit
64 colors 2
6
(2X2X2X2X2X2)
7 bit
128 colors 2
7
(2X2X2X2X2X2X2)
8 bit
256 colors 2
8
(2X2X2X2X2X2X2X2)
16 bit
65,536 colors 2
16

32 bit
16,777,21 colors 2
32

Color Depth
In General GIF(graphics Interchange Format) and JEPG(Joint
Photographic Expert Group) file format are using for web
graphics.
The JPEG format supports 24-bit color(16.7 million colors).
The JPEG compression scheme is Lossy compression
scheme, because of Some loss of image quality.
JPEG is ideal for images that are photographic, organic in
nature, and continuous in tone.
Any JPEG file can be saved as a Progressive JPEG. This is
very similar to the interlaced GIF.
The JPEG format should be used on photographic images,
and images which do not look as good with only 256 colors.
Web and Colors
GIF files support only 8-bit, or 256 colors.
GIF files support exact (Adaptive)palette.If your image contain
fewer than 256 colors, it is the best choice for producing GIFs and
it containg smallest number of colors possible.
GIF files use LZW compression which is referred to as lossless
GIF files support transparency, and interlacing. GIFs can also be
animated.
Transparency allows a graphic designer to designate the
background of the image transparent.
The interlacing feature in a GIF file creates the illusion of faster
loading graphics
Web and Colors
Dithering a process(in GIF) of placing different-colored
pixels next to one another to create the illusion of
additional colors.
Original image
100% Dither image
50% Dither image
Web and Colors
Anti-Aliasing a process that filters or softens the hard stair-stepped
edge (and thus removes the jaggies) in bitmapped images by
creating a series of gradually blending pixels.
Anti-Aliased text Aliased text
Anti-Aliased Aliased
Web and Colors
Conveying emotion and meaning.
Changing perception of space
Changing apparent size
Showing similarities and differences
Linking spatially separated objects together
Attracting attention
Creating emphasis
Smoothing to improve image quality
Creating aesthetic and emotional appeal
What is Color Good For?
Using insufficient brightness contrast.
Paying attention only to aesthetics
Using color for colors sake without a specific
plan or color scheme.
Assigning different colors to the same type or
the same color to different types.
Creating large fields of saturated color.
Using too many colors.
Common Mistakes in
Color Usage
People with normal color vision are called "trichromats". The
trichromatic eye has three cone types.
Color blindness comes as a result of a lack of one or more of the
types of color receptors, more correctly called color deficiencies.
About 10% of males have a color perception defect. but this is
rare in females (1% in 200).
There are many different types and degrees of colorblindness.
Color Blindness
Many color blind people cannot tell whether a woman is wearing lipstick or
not.
Many can not tell the difference between green and ripe tomatoes or
between ketchup and chocolate syrup
FACTS
Deuteranope (a form of red/green color deficit)
Normal Deuteranope Vision
Color Blindness
Protanope (another form of red/green color deficit)
Normal
Protanope Vision
Color Blindness
Tritanope (a blue/yellow deficit- very rare)
Normal
Tritanope Vision
Color Blindness
Branding
with Color
Whats in a
color?
Well, a lot really.
Its not about choosing a color
for your brand that you
like
but choosing a color that is right
Your personal favorite color is irrelevant.
The right color
is completely relevant to your company,
your audience and your brand
The use of color can be so powerful
that your brand presence can be
recognized at a glance
Such as identifying your rental car shuttle
from a distance or the fast-food restaurant
of your choice from the highway
It can evoke
powerful emotions
and help customers choose
your brand over others.
Any of these colors look familiar?
Happy eating!
Planning your families future
Professing your faith
When you want great pizza
All these colors evoke personal,
emotional responses
for customer
Choosing the right color is also critical in
differentiating your brand
from others in sometimes-crowded fields
Generally,
warm color are more
passionate
and emotional
Cool colors are solid and trusted
The subtleties of these colors
are what make the difference in
successful marketing
Choose a color carefully.
Colors means different things in different
cultures.
Once youve decided on the right color,
use it everywhere.
Not just in your logo.
In your products
On your vehicles
In your office design
Your packaging
Your memo pads
Your e-mails
Your website
Your giveaways

Make that color your
identifying mark
The more consistently
you use your color,
the more powerful
your brand will become
Itten, Johannes
The Art of Color
New York: John Wiley & Sons, 1974

Pabini, Gabriel-Petit
Color Theory for Digital Displays
http://www.uxmatters.com/

Pabini, Gabriel-Petit
Applying Color Theory to Digital Displays
http://www.uxmatters.com/


Web References
http://www.colormatters.com/entercolormatters.html
http://veerle.duoh.com/blog/comments/choosing_color_combinations/
http://www.ficml.org/jemimap/style/color/wheel.html
http://meyerweb.com/eric/tools/color-blend/
http://www.colortoy.net/
http://www.vischeck.com/vischeck/vischeckImage.php
http://www.apple.com/pro/color/
http://juicystudio.com/services/luminositycontrastratio.php
http://www.worqx.com/color/index.htm
http://www.webexhibits.org/causesofcolor/index.html