Frank Stella, Harran II 1967

COLOR Foundations of Digital Design

Prof. Eva Machauf
What is color?
§  Color is light. It travels in waves (as does
sound.)

§  Each color is associated with a unique

wavelength

§  Color is not inherent in objects. An apple

does not have a quality of redness. The
surface of the apple absorbs certain
wavelengths of light and reflects others.

§  An object appears white when it reflects

all wavelengths of light; it appears black
when it absorbs all wavelengths.
How we see
§  The human eye and
brain work together to
translate the reflected
waves of light into the
image.

§  Light receptors
(rods and cones)
in the eye transmit
messages to
the brain, which
produce the
sensations of color.
How we see color
§  There are
wavelengths of
light which our
eyes do not see.

§  Some can be
captured by
special
equipment such
as x-ray and
infra-red
How we see color
§  Some people are ‘color blind’ – that is, their rods and cones are compromised
so that they can not recognize some color differences.

§  How is your color vision? Do you see all four letters?

Light and color perception
Monet’s series of haystacks, painted
different times of the day.

§  In each painting, the color of the

haystack is different because the
daylight is emitting different waves.
§  Each canvas could only be worked
on for an hour or so before the light
would have changed.
Two Color Systems
Additive or RGB:
§  Our eyes perceive light that is emitted from a
computer monitor, or a light source such as a
light bulb or the sun.
§  On a monitor, tablet or phone, this uses the
RGB model, red, green, blue. Each value can
range from from 0-255. (255, 0, 0) represents
Red.)
§  All the colors together (255,255,255) result in
white.

Subtractive or CMYK:
§  Our eyes is perceive the wavelengths
reflected-- not absorbed– by paint/ink on a
surface.
§  When using paint, this is the traditional red,
blue, yellow model. All three colors together
come close to creating black
§  In printing, it is the CMYK ink model: cyan,
magenta, yellow and black (K so it is not
confused with blue.)
3 Attributes of Color
Hue: the place of the color on the spectrum
(the color name.)
red yellow blue violet

Saturation: the intensity of the color

(digital term) also known as brightness and in
painting terms, as Tint, the addition of white

Brightness: the darkness of the color

(digital term) also known as value or luminance:
and in painting terms, as value or shade the
addition of black.
Three Attributes of Color
The 3-D color wheel illustrates three main attributes of color:

HUE: the color name, related to the

wavelength
SATURATION: the intensity of a color
VALUE/BRIGHTNESS: lightness of a
color

The Photoshop color picker

allows the user to choose
color in different ways.

Alerts appear if the color is

not a web-safe color or is
out of gamut for printing
(non-printable) .
Color in Production
Light waves: Inks:
§ Computer monitors vary significantly in the § Desktop printers have a very different
way they present colors. The type and technology than commercial printing
brand and the age of a monitor can make presses.
a difference.
§ Printing a proof on a desktop printer can
§ Different programs, different browsers only be a general guide to how the
affect the way a color looks on the screen.  finished job will look.

§ When designing for digital media, we allow
for this variation by testing on different
systems (PC/Mac, Chrome, Safari, Firefox,
Opera, IE.)
§ Commercial printers provide a proof
from their equipment.    
§ Desktop printers also vary in the way
they treat colors.
§ Monitors and printers can be calibrated
to each other.

Designer monitor client monitor Designer monitor client monitor printed

Pantone Books
The Pantone system allows
designers to identify, match
and communicate colors in
an accurate way.

The information comes in the

form of guides or swatch
books, available for Pantone
colors (mixed from special
inks), CMYK colors, metallics,
fluorescents as well as
specialty uses such as cottons,
nylons or plastics.

Swatches are available for

coated, uncoated and matte
paper stocks.
Attributes of Color
Saturation
and
value/brightness
chart for one hue
Color Schemes
The color wheel is the way we organize the continuous color
hue spectrum into a system we can discuss.
Color Relationships
primary colors: red, yellow and blue.
All other colors are made from these, and they can not be
mixed from other colors.

Johannes Vermeer The Milkmaid, 1658-60 Piet Mondrian , Broadway Boogie Woogie.
Color Relationships
secondary colors are achieved by
equal mixing of two of the primaries.

red + yellow = orange

blue + yellow = green
Red + blue = purple

Sunday Afternoon on the Island of

La Grande Jatte
(Un dimanche après-midi à l’Ile de
la Grande Jatte),
Georges Seurat, 1884-1886.
Color Relationships
“All colors are the friends of their
neighbors and the lovers of their
opposites.”- Marc Chagall,  1887-1985

Complementary colors:
opposite one another on the color wheel.
High in contrast, they create a vibrant look, can
make elements stand out, but must be used
carefully so as not to be jarring.

The Arnolfini Wedding by Jan Van Eyck, 1434

The red/green complementary palette of the

right combined with the monochromatic
colors on the left suggests the coming
together of opposites.
Color Relationships:

Analogous colors:
next to one another on the
color wheel.
They are in harmony with one
another (friends = harmony)
They usually match well and
create serene and
comfortable designs.
Analogous color schemes are
Madame Marquise de la Pompadour, Francois Boucher often found in nature and
are harmonious and
The blues, violets and touches of red create an elegant pleasing to the eye.
and thoughtful mood.
Warm/cool colors
Warm colors are on the red/ Cool green/blue colors are said
yellow side of the color wheel to be ‘passive’, or calming, like
and are said to ‘active’ or ice. These colors appear to
exciting, like fire and light. recede into the distance.
These colors appear to
advance, to come forward.

Boulevard des
Capucines
Eduard Monet
Grayscale/Monochrome

Vija Celmins, Mark Tansey (American, 1949-),

Ocean with Cross #1, 2005 Forward Retreat, 1986
Oil on Canvas
Graphite on acrylic ground on paper
Transparent/Opaque
§  Transparent colors are colors that you can see
through. When you overlay two transparent colors
they will mix to create a third.
§  Opaque colors are colors that you cannot see
through.
Color Context

Same color on different backgrounds.

Josef Albers The two squares A and B are the same color.
Choosing a color scheme
Identify a color mood for your
project.

Start with black and white or just

two colors.

Add one color at a time, using

dominant, subordinate and
accent colors to create hierarchy
and flow.
Color schemes in design

Dull colors recede, bright colors advance

Color schemes in design

Hue can be used to separate subjects from the background.

Color schemes in design

Color is used to control the flow and the path of the eye