CONSCIOUS COLORS A WORKBOOK ON COLOR SELECTION AND APPLICATION
-1Untitled-1 1
4/2/2013 1:33:54 AM
CONSCIOUS COLORS A WORKBOOK ON COLOR SELECTION AND APPLICATION
designed by Alexandria Diaz-Tello
For the woman that taught me a girl should never have just one favorite color.
featuring essays from Cameron Chapman Andrew J. Elliot and Markus A. Maier
You done learned me right, mama.
-2Untitled-1 2-3
-34/2/2013 1:33:54 AM
CONTENTS PINKY AND THE BRAIN a primer in color theory 10 Color and Psychological Functioning 18 Color Theory for Designers, Part 1:
The Meaning of Color 26 Color Theory for Designers, Part 2:
Understanding Concepts and Terminology 28 Color Theory for Designers, Part 3:
Creating Your Own Color Palettes COLOR ME EAST theory in practice 39 Identifying Color Schemes in the East Austin
Environment
WALK THE TALK practice makes perfect 65 Hands On: Making Your Own Color
Palettes
-4Untitled-1 4-5
-54/2/2013 1:33:54 AM
INTRODUCTION: What To Expect
The first chapter, Pinky and the Brain should help you get started on viewing your world in a new way. The first essay, an excerpt from a journal by researchers Andrew Elliot and Marcus Maier, should satisfy your nerdy side and provide the psychological context for color theory. The second, threepart essay by Cameron Chapman will explain and provide examples of the basics , as well as teach you how to create your own color schemes and incorporate them into your design work.
-6Untitled-1 6-7
-7-
In the second chapter, Color Me East, you will find a wealth of color schemes generated from images taken by St. Edward’s University Graphic Design students in the East Cesar Chavez neighborhood. Here you will be asked to think critically and identify what types of palettes they are, and analyze the effect of each. The third and final chapter, Walk the Talk, is more open ended than the first two. You are encouraged to paste in your own photographs, derive your own color schemes, and draft thumbnail layouts for your designs. Happy color hunting! 4/2/2013 1:33:54 AM
INTRODUCTION: Background The
neighborhood
located
just East of IH-35 in downtown Austin, area
Texas
that
is
a
unique
perfectly
captures
this idea perfectly. As the area faces
gentrification
immigration young
of
and
the
design-savvy
entrepreneurs,
it
also
PINKY AND THE BRAIN
maintains its own rich hispanic culture.
A PRIMER IN COLOR THEORY AND PALETTE SELECTION
The visual language of this neighborhood
is
one
that
juxtaposes meticulously planned color
schemes
of
Here I have collected a few nifty and informative essays on color theory for your own edification. Learn all about the effect of color on our brains and how we can use this to make engaging design decisions.
“hipster”
hangouts with unintentionally beautiful
signage
that
graces
the walls of car dealerships and taquerias. Naturally, it is a designer’s
dream
destination.
However, you don’t have to hop on a train to Texas to be amazed by your environment. Inspiration is everywhere. If you take away anything from this workbook, I hope that’s it.
-8Untitled-1 8-9
-94/2/2013 1:33:55 AM
Wiltshire, 1990). Given
COLOR AND PSYCHOLOGICAL FUNCTIONING
the
disparity
between
What
colors
mood
and
influence productivity?
worker What
the ubiquity of color stimuli and
colors influence physical health
the dearth of extant theory and
and aggressive behavior? What
research
psychology,
color preferences are associated
information about the influence of color on affect, cognition, and
we have developed a general
with different personality types?
behavior is available. Accordingly, we have developed a general model
model of color and psychological
Such research simply seeks to
of color and psychological functioning, which we present in this article.
functioning. In this article, we set
establish relations between color
We also describe a hypothesis derived from this model regarding the
a conceptual and empirical context
stimuli and affect, cognition, or
influence of red in achievement contexts. In addition, we report a
for our model, present the model,
behavior for pragmatic purposes; it
series of experiments demonstrating that a brief glimpse of red evokes
and describe one main hypothesis
seeks neither to explain why such
avoidance motivation and undermines intellectual performance, and
derived from it. Then, we overview a
relations occur nor to test basic
that it has these effects without conscious awareness or intention. We
research program designed to test
principles regarding psychological
various aspects of this hypothesis.
functioning.
Andrew J. Elliot and Markus A. Maier Color is a ubiquitous perceptual experience, yet little scientific
close with thoughts on the need for rigorous scientific work on color psychology.
Preface
on
color
Finally, we briefly describe a
Of the existing research that
second hypothesis generated from
is theoretically based, most has
our model, and close with thoughts
been loosely guided by Goldstein’s
Every visual stimulus processed
scientific rigor. As such, although
on the need for rigorous scientific
(1942) proposal that red and
by the human perceptual system
the popular and applied literatures
work on color psychology.
yellow are naturally experienced
contains color information. Given
are
the prevalence of color, one would
regarding the content of color
expect color psychology to be a
associations and their presumed
well-developed area. Surprisingly,
impact on behavior (e.g., ‘‘Green is
Most existing work on color and
they produce forceful, expansive
little theoretical or empirical work
peaceful and helps people relax’’),
psychological functioning is applied,
behavior, whereas green and blue
has been conducted to date on the
the lack of theory and carefully
as opposed to theoretically based.
are experienced as quieting and
influence of color on psychological
controlled experimentation makes
The questions that drive this type
agreeable, focus people inward,
functioning, and the work that
clear
color
of research include: What colors
and
has been done has been driven
associations and their implications
influence retail behavior? What
behavior. Subsequent researchers
mostly by practical concerns, not
elusive (Levy, 1984; Whitfield &
colors influence food preference?
have tended to interpret Goldstein’s
-10Untitled-1 10-11
replete
with
conclusions
as stimulating and disagreeable,
statements
about
that these colors focus people on
Theoretical and Empirical Work
the outward environment, and that
produce
reserved,
stable
-114/2/2013 1:33:55 AM
proposal in terms of wavelength
between colors and functioning
wall for 4 days) or have altered
and arousal: Longer-wavelength
across situations.
participants’
colors like red are experienced as
Existing
research
on
these
typical
perceptual
experience (e.g., presenting color
arousing, and shorter-wavelength
proposals tends to be sparse and
colors like green are experienced
spotty,
supporting
Third, and most important, almost
as calming (e.g., Stone & English,
some hypotheses but not others.
no extant research has examined
1998). Aside from Goldstein’s
Although the popular and even
the effect of hue while controlling
proposal and its derivatives, most
scientific literatures commonly state
for lightness (similar to brightness)
theoretical
about
as fact that long-wavelength colors
and chroma (similar to saturation),
color rely on general associations.
are arousing and shortwavelength
despite the fact that these other
Different colors are presumed
colors are calming, the actual data
color attributes can themselves
to have different associations,
simply are not supportive. Frank
influence psychological functioning.
and viewing a color is thought to
and Gilovich’s (1988) proposal is
trigger psychological responses
supported by some data, but that
consistent with these associations.
proffered by Soldat et al. (1997)
Our research both provides a
For example, Frank and Gilovich
is not. Furthermore, the extant
conceptual framework to guide
(1988)
is
research on color and psychological
research in the neglected area of
associated with evil and death
functioning in general is plagued by
color psychology and illustrates
and, therefore, leads to aggressive
several weaknesses.
how rigorous empirical work in
statements
posited
that
black
occasionally
via overhead lights).
conclusion
behavior. Likewise, Soldat, Sinclair,
First, perhaps due to the applied
this area may be conducted. We
and Mark (1997) proposed that
nature of the work, many studies
think that this is a highly promising
red
have neglected to follow basic
research area in which many
experimental
pressing questions await empirical
with
and
blue
happiness
are and
associated sadness,
procedures
respectively, and therefore lead to
as
cognitive processing and behavior
hypothesis and condition.
consistent with those emotions.
experimenter
Second,
many
such
blindness of
to
consideration. How
the
do
color
associations
develop, and how does this differ
Such models tend to focus on
manipulations in these studies
when
one or two colors/associations
have
biologically different are present
and typically propose general links
presenting color on an office
-12Untitled-1 12-13
been
uncontrolled
(e.g.,
NOTES, THOUGHTS, ETC
predispositions
that
are
versus absent?
-134/2/2013 1:33:55 AM
How potent are color effects in real-world contexts containing a wide variety of color stimuli? What is the duration of color priming? The scientific study of color and psychological functioning is not an easy enterprise, as it requires
We have developed a general model of color and psychological functioning, the core premises of which are stated in the following.
redness of fruit signals readiness for
Color is not just about aesthetics—
as hue. However, we believe such
it
efforts pale in comparison to
also
communicates
specific
information.
the benefits of documenting the influence of a ubiquitous feature of
and behavioral processes outside of conscious awareness. on
priming focuses extensively on the effects of lexical, contextual, and relational stimuli on psychological functioning; we think the time has come to broaden this focus to include color stimuli.
relevant
behavior
(Hutchings,
1997). If, as we suspect, humans stimuli in a similar fashion, then at least some color associations may represent a cognitive reinforcing or shaping of biologically based
third
Color meanings are grounded
on important affective, cognitive,
eating), thereby facilitating fitness-
response tendencies.
second
the perceived social environment
for nonhuman animals (e.g., the
are ‘‘prepared’’ to respond to color
Colors carries specific meanings.
of lightness and chroma, as well
research
often serve a signal function
first
careful assessment and calibration
Social-cognitive
Model of Color and Psychological Functioning
The mere perception of color
in two basic sources: learned
evokes
associations that develop from
Color computations occur at an
repeated pairings of colors with
early level within the visual system,
particular
concepts,
and evaluative processes are so
or experiences; and biologically
fundamental that they are present,
based
respond
at least in rudimentary form, in all
to particular colors in particular
animate life (Schneirla, 1959). By
ways
in
‘‘evaluative processes’’ we mean
Some
color
messages,
proclivities particular
to
situations.
associations
evaluative
processes.
may
basic mechanisms that discern
emerge from learning alone, but
whether a stimulus is hostile or
color theorists suspect that many
hospitable (Elliot & Covington,
such associations emerge from
2001).
evolutionarily ingrained responses to color stimuli (Mollon, 1989). Research indicates that colors
-14Untitled-1 14-15
-154/2/2013 1:33:55 AM
Our research to date has focused primarily on the color red in achievement contexts. Our hypothesis is that red carries the meaning of danger in such contexts, specifically the psychological danger of failure (Elliot, Maier, Moller, et al., 2007).
fourth The evaluative processes evoked by color stimuli produce motivated behavior. Color stimuli that carry a positive meaning produce approach responses, whereas those that carry a negative meaning produce avoidance responses.
One source of this red–danger link is presumed to be teachers’ use of red ink to mark students’ mistakes and errors. This specific association is likely grounded in a more general societal association between red and danger where negative possibilities are salient, such as stop signs and warning signals.
fifth Fifth, its
color
influence
typically on
exerts
psychological
functioning in an automatic fashion; the full process from evaluation of the color stimulus to activation and operation of motivated behavior typically
takes
place
without
that may themselves emerge from biologically based proclivities, red carries the meaning of failure in achievement contexts, warning that a dangerous possibility is at hand. This warning signal is posited to produce avoidance-based motivation that primarily has negative implications for achievement outcomes. The influence of red in achievement contexts is presumed to take place outside of individuals’ conscious awareness.
conscious intention or awareness. Given that the influence of color tends to be nonconscious in nature, color effects tend to persist, even when they are deleterious. sixth Sixth, color meanings and effects are contextual. A given color has different implications for feelings, thoughts, and behaviors in different contexts
(e.g.,
achievement
contexts, relational contexts).
These learned associations may be bolstered by or even derived from an evolutionarily ingrained predisposition across species to interpret red as a signal of danger in competitive contexts. For example, in primates, red on the chest or face (due to a testosterone surge) signals the high status, and thus danger, of an opponent; Setchell & Wickings, 2005). Thus, through both specific and general associative processes
-16Untitled-1 16-17
-174/2/2013 1:33:55 AM
Color Theory for Designers Cameron Chapman
physical effect on people, raising
much in designs, especially in its
blood pressure and respiration
purest form. It’s a great color to
rates. It’s been shown to enhance
use when power or passion want
human metabolism, too.
to be portrayed in the design.
Color in design is very subjective. What evokes one reaction in one
Red can be associated with
Red can be very versatile, though,
person may evoke a very different reaction in somone else. Sometimes
anger, but is also associated with
with brighter versions being more
this is due to personal preference, and other times due to cultural
importance (think of the red carpet
energetic and darker shades being
background. Color theory is a science in itself. Studying how colors
at awards shows and celebrity
more powerful and elegant.
affect different people, either individually or as a group, is something
events). Red also indicates danger
some people build their careers on. And there’s a lot to it. Something as
(the reason stop lights and signs
simple as changing the exact hue or saturation of a color can evoke a
are red, and that most warning
completely different feeling. Cultural differences mean that something
labels are red).
that’s happy and uplifting in one country can be depressing in another.
Part One: The Meaning of Color warm colors Warm colors include red, orange,
with a cool color. Use warm colors
and yellow, and variations of those
in your designs to reflect passion,
three colors. These are the colors
happiness, enthusiasm, and energy.
of fire, of fall leaves, and of sunsets and sunrises, and are generally
Red
energizing, passionate, and positive.
Red is a very hot color. It’s
Red and yellow are both primary
associated with fire, violence, and
colors, with orange falling in the
warfare. It’s also associated with
middle, which means warm colors
love and passion. In history, it’s
are all truly warm and aren’t
been associated with both the Devil
created by combining a warm color
and Cupid. Red can actually have a
-18Untitled-1 18-19
orange Orange is a very vibrant and energetic color. In its muted forms,
Outside the western world, red
it can be associated with the earth
has different associations. For
and with autumn. Because of its
example, in China, red is the color
association
of prosperity and happiness. It
seasons, orange can represent
can also be used to attract good
change and movement in general.
with
the
changing
luck. In other eastern cultures, red
Because orange is associated
is worn by brides on their wedding
with the fruit of the same name,
days. In South Africa, however, red
it can be associated with health
is the color of mourning. Red is also
and vitality. In designs, orange
associated with communism. Red
commands attention without being
has become the color associated
as overpowering as red. It’s often
with AIDS awareness in Africa
considered
due to the popularity of the [RED]
inviting, and less in-your-face.
more
friendly
and
campaign. In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too
-194/2/2013 1:33:55 AM
yellow
bright yellows. Dark yellows and
Yellow is often considered the
gold-hued yellows can sometimes
brightest and most energizing of
look antique and be used in designs
the warm colors. It’s associated
where a sense of permanence is
with
desired.
happiness
and
sunshine.
Green has many of the same
cool colors Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature,
Yellow can also be associated
and are usually calming, relaxing,
with deceit and cowardice, though
and somewhat reserved.
(calling someone yellow is calling
Blue is the only primary color
them a coward).
within the cool spectrum, which
Yellow is also associated with
means the other colors are created
hope, as can be seen in some
by combining blue with a warm
countries when yellow ribbons are
color (yellow for green and red for
displayed by families who have
purple). Greens take on some of
loved ones at war. Yellow is also
the attributes of yellow, and purple
associated with danger, though not
takes on some of the attributes of
as strongly as red.
red.
In some countries, yellow has very
Use cool colors in your designs
different connotations. In Egypt, for
to
example, yellow is for mourning. In
professionalism.
give
a
sense
of
calm
or
calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more
energizing
while
olive
and
greens
vibrant,
are
more
representative of the natural world. Dark greens are the most stable
blue Blue is often associated with sadness in the English language. Blue is also used extensively to
represent
calmness
and
Japan, it represents courage, and
responsibility. Light blues can be
in India it’s a color for merchants.
refreshing and friendly. Dark blues
green
In your designs, bright yellow can lend a sense of happiness and
are more strong and reliable. Blue
Green is a very down-to-earth
is also associated with peace,
cheerfulness. Softer yellows are
color.
new
and has spiritual and religious
commonly used as a gender-neutral
beginnings and growth. It also
connotations in many cultures and
color for babies (rather than blue or
signifies renewal and abundance.
traditions (for example, the Virgin
pink) and young children.
can
Alternatively,
Light yellows also give a more
represent
green
can
also
represent envy or jealousy, and a
calm feeling of happiness than
Mary is generally depicted wearing blue robes).
lack of experience.
-20Untitled-1 20-21
It
-214/2/2013 1:33:56 AM
The meaning of blue is widely affected depending on the exact
Neutral colors often serve as
shade and hue.
the backdrop in design. They’re
In design, the exact shade of blue
commonly combined with brighter
you select will have a huge impact
accent colors. But they can also
on how your designs are perceived.
be used on their own in designs,
Light blues are often relaxed
and can create very sophisticated
and calming. Bright blues can be
layouts.
energizing and refreshing. Dark
and cool colors.
purple
neutral colors. On the positive side,
attributes of both. It’s associated with creativity and imagination, too. In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while purples
(like
lavendar)
are considered more romantic. In
design,
dark
purples
can
Light
purples
are
softer
are associated with spring and romance.
-22Untitled-1 22-23
for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.
white White is at the opposite end of
about any other color. White is often associated with purity,
power, elegance, and formality.
In the West, white is commonly
On the negative side, it can be
worn by brides on their wedding
associated with evil, death, and
day. It’s also associated with the
mystery. Black is the traditional
health care industry, especially
color of mourning in many Western
with doctors, nurses and dentists.
countries. It’s also associated with
White is associated with goodness,
rebellion in some cultures, and is
and angels are often depicted in
associated with Halloween and the
white.
Black
and
design, black is commonly used
it’s commonly associated with
occult.
give a sense wealth and luxury.
the colors it’s combined with. In
black, it can work well with just
Black is the strongest of the
red and blue, and takes on some
or unconventional, depending on
the spectrum from black, but like
black
associated
with royalty. It’s a combination of
lighter
and
that surround them than are warm
and reliability are important.
long
meanings
much more affected by the colors
sites or designs where strength
was
The
impressions of neutral colors are
blues are excellent for corporate
Purple
conservative or modern, traditional
neutrals
cleanliness,
and
virtue.
In design, white is generally is
commonly
used
in
considered a neutral backdrop
edgier designs, as well as in very
that lets other colors in a design
elegant designs. It can be either
have a larger voice. It can help to
-234/2/2013 1:33:56 AM
convey cleanliness and simplicity,
brown
instances, and is usually reserved for
backgrounds.
It
can
also
though, and is popular in minimalist
Brown is associated with the
designs. White in designs can also
earth, wood, and stone. It’s a
portray either winter or summer,
completely
and
Beige in design is generally used
depending on the other design
a warm neutral. Brown can be
in backgrounds, and is commonly
motifs and colors that surround it.
associated with dependability and
seen
reliability, with steadfastness, and
paper texture. It will take on the
with earthiness. It can also be
characteristics of colors around it,
gray Gray is a neutral color, generally
natural
color
symbolize piety.
in
backgrounds
with
a
considered dull.
ivory and cream
considered on the cool end of the
In design, brown is commonly
color spectrum. It can sometimes
used as a background color. It’s
Ivory and cream are sophisticated
be considered moody or depressing.
also seen in wood textures and
colors, with some of the warmth of
Light grays can be used in place of
sometimes in stone textures.
brown and a lot of the coolness of
white in some designs, and dark
It helps bring a feeling of warmth
white. They’re generally quiet, and
grays can be used in place of black.
and wholesomeness to designs.
can often evoke a sense of history.
Gray is generally conservative and
It’s sometimes used in its darkest
Ivory is a calm color, with some
formal, but can also be modern. It
forms
of the pureness associated with
is sometimes considered a color of
black, either in backgrounds or
mourning. It’s commonly used in
typography.
as
a
replacement
for
corporate designs, where formality and professionalism are key. It can
beige and tan
be a very sophisticated color. Pure
Beige is somewhat unique in
grays are shades of black, though
the color spectrum, as it can take
other grays may have blue or brown
on cool or warm tones depending
hues mixed in. In design, gray
on the colors surrounding it. It
backgrounds are very common, as
has the warmth of brown and
is gray typography.
the coolness of white, and, like
white, though it’s a bit warmer. In design, ivory can lend a sense of elegance and calm to a site. When combined with earthy colors like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colors, without the stark contrast of using white.
brown, is sometimes seen as dull. It’s a conservative color in most
-24Untitled-1 24-25
-254/2/2013 1:33:56 AM
value
PART TWO: Understanding Concepts and Terminology
called
A tint is formed when white is
“lightness.” It refers to how light or
added to a hue, lightening it. Very
dark a color is. Ligher colors have
light tints are sometimes called
chroma
higher values. For example, orange
pastels, but any pure hue with white added to it is a tint.
saturation
Value
tints could
also
be
Chroma refers to the purity of a
Saturation refers to how a hue
has a higher value than navy blue
color. A hue with high chroma has
appears under particular lighting
or dark purple. Black has the
Tints are often used to create
no black, white or gray in it. Adding
conditions. Think of saturation in
lowest value of any hue, and white
feminine or lighter designs. Pastel
white, black or gray reduces its
terms of weak vs. strong or pale
the highest.
tints are especially used to make
chroma. It’s similar to saturation
vs. pure hues.
When applying color values to
designs more feminine. They also
but not quite the same. Chroma
In design, colors with similar
your designs, favor colors with
work well in vintage designs and
can be thought of as the brightness
saturation levels make for more
different values, especially ones
are popular on websites targeted
of a color in comparison to white.
cohesive-looking designs. As with
with high chroma. High contrast
at parents of babies and toddlers.
In design, avoid using hues that
chroma, colors with similar but not
values generally result in more
have a very similar chroma. Opt
identical saturations can have a
aesthetically pleasing designs.
instead for hues with chromas that
jarring effect on visitors.
are the same or a few steps away from each other.
tones Tones are created when gray is
hue
added to a hue. Tones are generally
Hue is the most basic of color terms and basically denotes an
duller or softer-looking than pure hues.
object’s color. When we say “blue,”
Tones are sometimes easier to
“green” or “red,” we’re talking
use in designs. Tones with more
about hue. The hues you use in
gray can lend a certain vintage
your designs convey important
feel to websites. Depending on
messages
the hues, they can also add a
to
your
website’s
visitors. Read part 1 of this article
sophisticated or elegant look.
for the meanings conveyed by
A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black. In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.
various hues.
-26Untitled-1 26-27
shades
-274/2/2013 1:33:56 AM
PART Three: Creating Your Own Color Palettes
ex. 1
ex. 1
ex. 2
ex. 2
ex. 3
ex. 3
monochromatic Monochromatic color schemes are made up of different tones, shades
this from left to right) would likely be used for headlines.
analagous Analogous color schemes are the
The top is a traditional analogous
next easiest to create. Analogous
color scheme, and while it’s visually
and tints within a specific hue. These
The second color would be used for
schemes are created by using three
appealing, there isn’t enough contrast
are the simplest color schemes to
body text or possibly the background.
colors that are next to each other on
between the colors for an effective
create, as they’re all taken from the
The third color would likely be used for
the 12-spoke color wheel. Generally,
website design.The second is a color
same hue, making it harder to create
the background (or body text if color
analogous color schemes all have the
scheme with the same hues as the one
a jarring or ugly scheme (though both
#2 was used as the background). And
same chroma level, but by using tones,
above, but with the chroma adjusted
are still possible).
the last two colors would be used as
shades and tints we can add interest
to give more variety. It’s now much
accents or within graphics.
to these schemes and adapt them to
more suitable for use in a website.
For the most part with these schemes, the first color (if we look at
our needs for designing websites.
-28Untitled-1 28-29
-294/2/2013 1:33:56 AM
ex. 1
ex. 2
ex. 3
ex. 1
complementary Complementary
schemes
are
This is best avoided either by
created by combining colors from
leaving white space between them or
opposite sides of the color wheel. In
by adding another, transitional color
their most basic form, these schemes
between them.
consist of only two colors, but can
A wide range of tints, shades, and
easily be expanded using tones,
tones makes the top a very versatile
tints, and shades. A word of warning,
color scheme. The second example is
though: using colors that are exact
another complementary color scheme
opposites with the same chroma and
with a wide range of chromas. Don’t
or value right next to each other can
forget that beige and brown are really
be very jarring visually.
tints and shades of orange.
-30Untitled-1 30-31
ex. 2
Split-complementary Split complementary schemes are
It is important to have enough
almost as easy as the complementary
difference
in
chroma
and
value
scheme. Instead of using colors that
between the colors you select for this
are opposites, you use colors on
type of scheme. The second example
either side of the hue opposite your
is another palette with a wide range of
base hue. The top is a scheme where
chromas.
yellow-green is the base hue.
-314/2/2013 1:33:57 AM
ex. 1
ex. 2
ex. 1
ex. 2
triadic Triadic schemes are made up of hues
shades/tones/tints of the other two
equally spaced around the 12-spoke
colors makes the single color almost
color wheel. This is one of the more
work as a neutral within the scheme.
diverse color schemes.
Alternately, using one very bright hue
Using a very pale or dark version of one color in the triad, along with two
with paired muted hues makes the single bright hue stand out more.
-32Untitled-1 32-33
Double-complementary (tetradic) Tetradic
color
schemes
are
probably the most difficult schemes to pull off effectively. Tetradic color schemes can work well for creating color schemes with similar chromas and values.
Just add a neutral (such as dark gray or black) for text and accents. It works just as well for darker color schemes.
-334/2/2013 1:33:57 AM
websites. Our hypothetical clients
creating a color scheme Creating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start. We’ve been over the different
ex. 1
types of color schemes above. Now, let’s try creating a few of our own. There are plenty of tools online that will help you create a color scheme,
ex. 2
but let’s forget about those for now and just use Photoshop.
are a modern architecture design blog and a high-end women’s clothing retailer who specializes in Victorian-influenced apparel. We’ll
start
monochromatic
with
a
scheme,
basic just
to get a feel for each. While I mentioned that traditional color scheme patterns aren’t used as often in design, monochomatic color schemes are the exception to that rule. You’ll likely find yourself using monochromatic schemes on a fairly regular basis.
Lets try breaking away from ex. 3
the color scheme types already mentioned, custom
custom color schemes
and
schemes.
create While
some it’s
For our apparel store, here’s a
important to know the ways that
traditional monochromatic scheme, with white added in as a neutral.
Custom color schemes are the
The colors here all have similar
different colors interact and how
hardest to create. Instead of following
chroma and saturation levels. Using
traditional schemes are created,
the
colors
and
for most design projects you’ll likely
discussed above, a custom scheme
saturation creates a sense of cohesion
create custom schemes that don’t
isn’t based on any formal rules. Keep
across a color scheme. Using one
strictly adhere to any predefined
in mind things like chroma, value, and
color with a high chroma among other
patterns.
saturation when creating these kinds
colors with lower chromas is another
So, for the purposes of our
of color schemes.
effective method (the higher chroma
project here, we’ll create three color
color can act as an accent).
schemes each for two different
predefined
color
schemes
-34Untitled-1 34-35
with
similar
chroma
For our design blog, we’ve gone with a color scheme made up of shades and tints of gray.
-354/2/2013 1:33:57 AM
yellow tone, which sits opposite purple on the color wheel. This This is almost an analogous color scheme, but we’ve left out one color. It’s made up of shades of
part of creating a color scheme.
more like an off-white color when
schemes shown, using tints, tones,
Gray, black, white, brown, tan, and
compared to our other hues.
and shades in your color schemes
off-white are generally considered
is vital. Pure hues all have similar
neutral colors. Browns, tans, and
values and saturation levels. This
off-whites tend to make color
leads to a color scheme that is
schemes feel warmer (as they’re
both overwhelming and boring at
really all just tones, shades, and
the same time.
tints of orange and yellow). Gray will
on the color wheel, and work well together, especially when they’re different
values
and
saturation levels.
Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.
Neutrals are another important
As you can see from the color
two colors fall next to each other
in
adding in some neutrals
serves as our neutral, and looks
purple and reddish-purple. These
used
WHY SHADES, TONES, AND TINTS ARE IMPORTANT
While this color scheme at first glance looks like another standard
When you mix in tones, shades,
gray and red palette, if you look
and tints, you expand the basic
more closely you’ll see that the
12-spoke color wheel into an
grays are actually tones of blue.
infinite number of colors for use in
Blue and red make up two thirds of
your designs. One of the simplest
a tetradic color scheme, but work
ways to create a professional
just fine together without yellow,
looking color scheme is to take a
especially when the red is kept
few tones, tints, and shades of a
pure but the blue is toned down to
given color (avoiding the pure hue),
the point of almost being gray.
and then add in another pure hue (or close to pure) that’s at least three spaces away on the color wheel (part of a tetradic, triatic, or split-complementary color scheme)
Here, we’ve gotten rid of the
as an accent color. This adds visual
purple hues and switched over to a
interest to your color scheme while
burgundy. Again this is next to the
still retaining a sense of balance.
reddish-purple on the color wheel.
depending on surrounding colors. Black and white can also look either warm or cool depending on the surrounding colors. Black and white are the easiest neutrals to add into just about any color scheme. To add a bit more visual interest, though, considering using a very light or very dark shade of gray in place of white or black. Adding browns, tans, and off-white hues are a bit trickier, but with some practice you’ll find adding them gets easier. For browns, consider using a very dark, chocolate brown in place of black. A pale off-white can be used in place of white or light gray in many casues. And tan
We’ve also added in a very pale
-36Untitled-1 36-37
take on a warm or cool impression
-374/2/2013 1:33:57 AM
can be used in place of gray, as well (create a tone by adding some gray to make it even easier).
USING PHOTOS FOR COLOR SCHEMES One of my personal favorite ways to create a color scheme is
COLOR ME EAST
to use a photograph. There are automated tools online that can do
theory becomes practice
this automatically for you (Adobe Kuler is one of them, and my personal favorite), or you can do it in Photoshop yourself. Using Adobe Kuler, you can either browse or search for photos on
Now, you may think you understand color schemes, but you’ll never really know until you’ve tried picking some out.
Flickr, or you can upload your own image. If you’re stumped for what colors you want to use in a website design, try searching for related can result in finding color schemes
On the following pages you will find a wealth of imagery from the striking Cesar Chavez neighborhood
that you might not have thought of
in East Austin.
words on Flickr. Sometimes this
on your own. Find a photo you like on Flickr, one that you think evokes the feeling of the design you want to create.
-38Untitled-1 38-39
-394/2/2013 1:33:57 AM
COLOR PALETTE SELECTION an interactive workspace How do we determine color schemes? Which colors are best suited for backgrounds or headlines? Use this space to work it out, sketch thumbnails, and take additional notes.
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
photo by Ali Diaz-Tello
Mood:
-40Untitled-1 40-41
TAKE three Scheme type:
Mood:
-414/2/2013 1:33:58 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Issa Galvan
-42Untitled-1 42-43
-434/2/2013 1:33:58 AM
TAKE ONE Scheme type:
Mood:
TAKE ONE Scheme type:
Mood:
TAKE ONE Scheme type:
Mood:
photo by Ali Diaz-Tello
-44Untitled-1 44-45
-454/2/2013 1:33:59 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Travis Daigle
-46Untitled-1 46-47
-474/2/2013 1:33:59 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Jessica Buie
-48Untitled-1 48-49
-494/2/2013 1:34:00 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Whitney McCaskill
-50Untitled-1 50-51
-514/2/2013 1:34:01 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Issa Galvan
-52Untitled-1 52-53
-534/2/2013 1:34:02 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Issa Galvan
-54Untitled-1 54-55
-554/2/2013 1:34:02 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Whitney McCaskill
-56Untitled-1 56-57
-574/2/2013 1:34:03 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Mia Carameros
-58Untitled-1 58-59
-594/2/2013 1:34:03 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Mia Carameros
-60Untitled-1 60-61
-614/2/2013 1:34:06 AM
TAKE ONE Scheme type:
Mood:
TAKE two Scheme type:
Mood:
TAKE three Scheme type:
Mood:
photo by Issa Galvan
-62Untitled-1 62-63
-634/2/2013 1:34:06 AM
NOTES, THOUGHTS, ETC
WALK THE TALK practice makes perfect
The following pages are for you to experiment with incorporating your own unique color palettes into layouts. Use tape, staples, bubble gum, whatever to affix your own photos. Then, using what we’ve just told you about color schemes, embrace your inner designer and select four to five components.
-64Untitled-1 64-65
-654/2/2013 1:34:06 AM
affix photo here
affix photo here
Practice TWO:
Practice ONE: Scheme type:
Mood:
Scheme type:
Mood:
Notes: hint: you will probably want to note things like value, color meaning, etc
Thumbnails:
Notes:
Thumbnails:
-66Untitled-1 66-67
-674/2/2013 1:34:06 AM
affix photo here
Practice THREE:
affix photo here
PRACTICE FOUR:
Scheme type:
Mood:
Scheme type:
Mood:
Notes:
Thumbnails:
Notes:
Thumbnails:
-68Untitled-1 68-69
-694/2/2013 1:34:06 AM
affix photo here
Practice FIVE:
affix photo here
Practice SIX:
Scheme type:
Mood:
Scheme type:
Mood:
Notes:
Thumbnails:
Notes:
Thumbnails:
-70Untitled-1 70-71
-714/2/2013 1:34:06 AM
affix photo here
Practice SEVEN:
affix photo here
Practice EIGHT:
Scheme type:
Mood:
Scheme type:
Mood:
Notes:
Thumbnails:
Notes:
Thumbnails:
-72Untitled-1 72-73
-734/2/2013 1:34:07 AM
affix photo here
Practice NINE:
affix photo here
Practice TEN:
Scheme type:
Mood:
Scheme type:
Mood:
Notes:
Thumbnails:
Notes:
Thumbnails:
-74Untitled-1 74-75
-754/2/2013 1:34:07 AM