CONSCIOUS COLORS A WORKBOOK ON COLOR SELECTION AND APPLICATION
-1-
For the woman that taught me a girl should never have just one favorite color. You done learned me right, Mama.
-2-
CONSCIOUS COLORS A WORKBOOK ON COLOR SELECTION AND APPLICATION
designed by Alexandria Diaz-Tello featuring essays from Cameron Chapman Andrew J. Elliot and Markus A. Maier
-3-
-4-
CONTENTS PINK 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
-5-
-6-
INTRODUCTION: What’s in this book?
The first chapter, Pink 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 scholarly 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.
-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.
INTRODUCTION: Where are these photos from? “Inspiration is everywhere!” If there is one thing you learn from this book, I hope it’s that any environment, planned or not, can be endlessly inspirational. The East Cesar Chavez neighborhood located just East of IH-35 in downtown Austin, Texas is a unique area that captures this idea perfectly. As the area faces gentrification and an influx of design-centric establishments, the neighborhood has still maintained its own rich hispanic culture, even informing the identity of new businesses. The visual language of this neighborhood is one that juxtaposes meticulously planned color schemes of “hipster” hangouts with beautiful Mexican 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. Hopefully with the new knowledge
-8-
PINK AND THE BRAIN A PRIMER IN COLOR THEORY AND PALET TE SELECTION 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. Don’t forget to take notes in the margins!
-9-
COLOR AND PSYCHOLOGICAL FUNCTIONING ANDREW J. ELLIOT AND MARKUS A. MAIER Color is a ubiquitous perceptual experience, yet little scientific information about the influence of color on affect, cognition, and behavior is available. Accordingly, we have developed a general model of color and psychological functioning, which we present in this article. We also describe a hypothesis derived from this model regarding the influence of red in achievement contexts. In addition, we report a series of experiments demonstrating that a brief glimpse of red evokes avoidance motivation and undermines intellectual performance, and that it has these effects without conscious awareness or intention. We close with thoughts on the need for rigorous scientific work on color psychology.
PREFACE Every visual stimulus processed
scientific rigor. As such, although
by the human perceptual system
the popular and applied literatures
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
little theoretical or empirical work
peaceful and helps people relax’’),
has been conducted to date on the
the lack of theory and carefully
influence of color on psychological
controlled experimentation makes
functioning, and the work that
clear
has been done has been driven
associations and their implications
mostly by practical concerns, not
elusive (Levy, 1984; Whitfield &
-10-
replete
with
conclusions
statements
about
color
Wiltshire, 1990). Given
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
we have developed a general
with different personality types?
model of color and psychological
Such research simply seeks to
functioning. In this article, we set
establish relations between color
a conceptual and empirical context
stimuli and affect, cognition, or
for our model, present the model,
behavior for pragmatic purposes; it
and describe one main hypothesis
seeks neither to explain why such
derived from it. Then, we overview a
relations occur nor to test basic
research program designed to test
principles regarding psychological
various aspects of this hypothesis.
functioning.
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
on the need for rigorous scientific
(1942) proposal that red and
work on color psychology.
yellow are naturally experienced as stimulating and disagreeable, that these colors focus people on
THEORETICAL AND EMPIRICAL WORK
the outward environment, and that
Most existing work on color and
they produce forceful, expansive
psychological functioning is applied,
behavior, whereas green and blue
as opposed to theoretically based.
are experienced as quieting and
The questions that drive this type
agreeable, focus people inward,
of research include: What colors
and
influence retail behavior? What
behavior. Subsequent researchers
colors influence food preference?
have tended to interpret Goldstein’s
-11-
produce
reserved,
stable
proposal in terms of wavelength
between colors and functioning
and arousal: Longer-wavelength
across situations.
colors like red are experienced as
Existing
research
on
these
arousing, and shorter-wavelength
proposals tends to be sparse and
colors like green are experienced
spotty,
as calming (e.g., Stone & English,
some hypotheses but not others.
1998). Aside from Goldstein’s
Although the popular and even
proposal and its derivatives, most
scientific literatures commonly state
theoretical
about
as fact that long-wavelength colors
color rely on general associations.
are arousing and shortwavelength
Different colors are presumed
colors are calming, the actual data
to have different associations,
simply are not supportive. Frank
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)
For example, Frank and Gilovich
is not. Furthermore, the extant
(1988)
is
research on color and psychological
associated with evil and death
functioning in general is plagued by
and, therefore, leads to aggressive
several weaknesses.
statements
posited
that
black
occasionally
supporting
behavior. Likewise, Soldat, Sinclair,
First, perhaps due to the applied
and Mark (1997) proposed that
nature of the work, many studies
red
have neglected to follow basic
with
and
blue
happiness
are and
associated sadness,
experimental
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 the
Such models tend to focus on
manipulations in these studies
one or two colors/associations
have
and typically propose general links
presenting color on an office
-12-
been
uncontrolled
(e.g.,
wall for 4 days) or have altered participants’
typical
perceptual
experience (e.g., presenting color via overhead lights). Third, and most important, almost no extant research has examined the effect of hue while controlling for lightness (similar to brightness) and chroma (similar to saturation), despite the fact that these other color attributes can themselves influence psychological functioning.
CONCLUSION Our research both provides a conceptual framework to guide research in the neglected area of color psychology and illustrates how rigorous empirical work in this area may be conducted. We think that this is a highly promising research area in which many pressing questions await empirical consideration. How
do
color
associations
develop, and how does this differ when
predispositions
that
are
biologically different are present versus absent?
-13-
NOTES, THOUGHTS, ETC
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 careful assessment and calibration of lightness and chroma, as well as hue. However, we believe such efforts pale in comparison to the benefits of documenting the influence of a ubiquitous feature of the perceived social environment on important affective, cognitive, and behavioral processes outside of conscious awareness. Social-cognitive
research
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.
-14-
MODEL OF COLOR AND PSYCHOLOGICAL FUNCTIONING
often serve a signal function
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 eating), thereby facilitating fitnessrelevant
behavior
(Hutchings,
1997). If, as we suspect, humans are ‘‘prepared’’ to respond to color
FIRST Colors carries specific meanings. Color is not just about aesthetics— it
for nonhuman animals (e.g., the
also
communicates
specific
information.
stimuli in a similar fashion, then at least some color associations may represent a cognitive reinforcing or shaping of biologically based response tendencies.
SECOND
THIRD
Color meanings are grounded
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
-15-
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
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
-16-
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.
-17-
COLOR THEORY FOR DESIGNERS CAMERON CHAPMAN
Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there’s a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences mean that something 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
-18-
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.
Red can be associated with
Red can be very versatile, though,
anger, but is also associated with
with brighter versions being more
importance (think of the red carpet
energetic and darker shades being
at awards shows and celebrity
more powerful and elegant.
events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).
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.
campaign. In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too
-19-
more
friendly
and
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.
Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward). Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red. In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants. In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than
-20-
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, and are usually calming, relaxing, and somewhat reserved. Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to
give
a
sense
of
calm
or
professionalism.
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
responsibility. Light blues can be refreshing and friendly. Dark blues
GREEN
are more strong and reliable. Blue
Green is a very down-to-earth
is also associated with peace,
new
and has spiritual and religious
beginnings and growth. It also
connotations in many cultures and
signifies renewal and abundance.
traditions (for example, the Virgin
color.
It
can
Alternatively,
represent
green
can
also
represent envy or jealousy, and a lack of experience.
-21-
Mary is generally depicted wearing blue robes).
The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.
PURPLE Purple
was
long
associated
with royalty. It’s a combination of red and blue, and takes on some 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 lighter
purples
(like
lavendar)
are considered more romantic. In
design,
dark
purples
can
give a sense wealth and luxury. Light
purples
are
softer
and
are associated with spring and romance.
-22-
conservative or modern, traditional
NEUTRALS Neutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts.
The
meanings
and
impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.
or unconventional, depending on the colors it’s combined with. In design, black is commonly used 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 the spectrum from black, but like
BLACK
black, it can work well with just
Black is the strongest of the neutral colors. On the positive side,
about any other color. White is often associated with
it’s commonly 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.
occult. Black
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
-23-
convey cleanliness and simplicity,
BROWN
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
depending on the other design
a warm neutral. Brown can be
motifs and colors that surround it.
associated with dependability and
natural
color
and
reliability, with steadfastness, and
GRAY Gray is a neutral color, generally
with earthiness. It can also be considered dull.
considered on the cool end of the
In design, brown is commonly
color spectrum. It can sometimes
used as a background color. It’s
be considered moody or depressing.
also seen in wood textures and
Light grays can be used in place of
sometimes in stone textures.
white in some designs, and dark
It helps bring a feeling of warmth
grays can be used in place of black.
and wholesomeness to designs.
Gray is generally conservative and
It’s sometimes used in its darkest
formal, but can also be modern. It
forms
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 brown, is sometimes seen as dull. It’s a conservative color in most
-24-
instances, and is usually reserved for
backgrounds.
It
can
also
symbolize piety. Beige in design is generally used in backgrounds, and is commonly seen
in
backgrounds
with
a
paper texture. It will take on the characteristics of colors around it,
IVORY AND CREAM Ivory and cream are sophisticated colors, with some of the warmth of brown and a lot of the coolness of white. They’re generally quiet, and can often evoke a sense of history. Ivory is a calm color, with some of the pureness associated with 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.
-25-
PART TWO: Understanding Concepts and Terminology CHROMA
SATURATION
Chroma refers to the purity of a
Saturation refers to how a hue
color. A hue with high chroma has
appears under particular lighting
no black, white or gray in it. Adding
conditions. Think of saturation in
white, black or gray reduces its
terms of weak vs. strong or pale
chroma. It’s similar to saturation
vs. pure hues.
but not quite the same. Chroma
In design, colors with similar
can be thought of as the brightness
saturation levels make for more
of a color in comparison to white.
cohesive-looking designs. As with
In design, avoid using hues that
chroma, colors with similar but not
have a very similar chroma. Opt
identical saturations can have a
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 various hues.
-26-
VALUE Value
TINTS could
also
be
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
higher values. For example, orange
pastels, but any pure hue with
has a higher value than navy blue
white added to it is a tint.
or dark purple. Black has the
Tints are often used to create
lowest value of any hue, and white
feminine or lighter designs. Pastel
the highest.
tints are especially used to make
When applying color values to
designs more feminine. They also
your designs, favor colors with
work well in vintage designs and
different values, especially ones
are popular on websites targeted
with high chroma. High contrast
at parents of babies and toddlers.
values generally result in more aesthetically pleasing designs.
SHADES 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.
-27-
PART THREE: Creating Your Own Color Palettes
ex. 1
ex. 2
ex. 3
MONOCHROMATIC Monochromatic color schemes are made up of different tones, shades
this from left to right) would likely be used for headlines.
and tints within a specific hue. These
The second color would be used for
are the simplest color schemes to
body text or possibly the background.
create, as they’re all taken from the
The third color would likely be used for
same hue, making it harder to create
the background (or body text if color
a jarring or ugly scheme (though both
#2 was used as the background). And
are still possible).
the last two colors would be used as
For the most part with these
accents or within graphics.
schemes, the first color (if we look at
-28-
ex. 1
ex. 2
ex. 3
ANALAGOUS Analogous color schemes are the
The top is a traditional analogous
next easiest to create. Analogous
color scheme, and while it’s visually
schemes are created by using three
appealing, there isn’t enough contrast
colors that are next to each other on
between the colors for an effective
the 12-spoke color wheel. Generally,
website design.The second is a color
analogous color schemes all have the
scheme with the same hues as the one
same chroma level, but by using tones,
above, but with the chroma adjusted
shades and tints we can add interest
to give more variety. It’s now much
to these schemes and adapt them to
more suitable for use in a website.
our needs for designing websites.
-29-
ex. 1
ex. 2
ex. 3
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.
-30-
ex. 1
ex. 2
SPLIT-COMPLEMENTARY Split complementary schemes are
It is important to have enough
almost as easy as the complementary
difference
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.
-31-
in
chroma
and
value
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.
-32-
ex. 1
ex. 2
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.
-33-
Just add a neutral (such as dark gray or black) for text and accents. It works just as well for darker color schemes.
ex. 1
ex. 2
ex. 3
CUSTOM COLOR SCHEMES Custom color schemes are the
The colors here all have similar
hardest to create. Instead of following
chroma and saturation levels. Using
the
colors
predefined
color
schemes
with
similar
chroma
and
discussed above, a custom scheme
saturation creates a sense of cohesion
isn’t based on any formal rules. Keep
across a color scheme. Using one
in mind things like chroma, value, and
color with a high chroma among other
saturation when creating these kinds
colors with lower chromas is another
of color schemes.
effective method (the higher chroma color can act as an accent).
-34-
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 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, 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 the color scheme types already mentioned, custom
and
schemes.
create While
some it’s
For our apparel store, here’s a
important to know the ways that
traditional monochromatic scheme,
different colors interact and how
with white added in as a neutral.
traditional schemes are created, for most design projects you’ll likely create custom schemes that don’t strictly adhere to any predefined For our design blog, we’ve gone
patterns. So, for the purposes of our project here, we’ll create three color schemes each for two different
-35-
with a color scheme made up of shades and tints of gray.
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
serves as our neutral, and looks more like an off-white color when compared to our other hues.
purple and reddish-purple. These two colors fall next to each other on the color wheel, and work well together, especially when they’re used
in
different
values
and
saturation levels.
While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue.
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.
Blue and red make up two thirds of a tetradic color scheme, but work just fine together without yellow, especially when the red is kept pure but the blue is toned down to the point of almost being gray.
Here, we’ve gotten rid of the purple hues and switched over to a burgundy. Again this is next to the reddish-purple on the color wheel. We’ve also added in a very pale
-36-
WHY SHADES, TONES, AND TINTS ARE IMPORTANT
ADDING IN SOME NEUTRALS Neutrals are another important
As you can see from the color
part of creating a color scheme.
schemes shown, using tints, tones,
Gray, black, white, brown, tan, and
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
When you mix in tones, shades, and tints, you expand the basic 12-spoke color wheel into an infinite number of colors for use in your designs. One of the simplest ways to create a professional looking color scheme is to take a few tones, tints, and shades of a given color (avoiding the pure hue), 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) as an accent color. This adds visual interest to your color scheme while still retaining a sense of balance.
take on a warm or cool impression 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
-37-
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 to use a photograph. There are automated tools online that can do 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 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 words on Flickr. Sometimes this can result in finding color schemes that you might not have thought of on your own. Find a photo you like on Flickr, one that you think evokes the feeling of the design you want to create.
-38-
COLOR ME EAST THEORY BECOMES PRACTICE Now, you may think you understand color schemes, but you’ll never really know until you’ve tried picking some out. On the following pages you will find a wealth of imagery from the striking Cesar Chavez neighborhood in East Austin.
-39-
-40-
photo by Ali Diaz-Tello
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:
Mood:
TAKE THREE Scheme type:
Mood:
-41-
-42-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Issa Galvan
-43-
-44-
TAKE ONE Scheme type:
Mood:
TAKE ONE Scheme type:
Mood:
TAKE ONE Scheme type:
Mood:
photo by Ali Diaz-Tello
-45-
-46-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Travis Daigle
-47-
-48-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Jessica Buie
-49-
-50-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Whitney McCaskill
-51-
-52-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Issa Galvan
-53-
-54-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Issa Galvan
-55-
-56-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Whitney McCaskill
-57-
-58-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Mia Carameros
-59-
-60-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Mia Carameros
-61-
-62-
TAKE ONE Scheme type:
Mood:
TAKE TWO Scheme type:
Mood:
TAKE THREE Scheme type:
Mood:
photo by Issa Galvan
-63-
NOTES, THOUGHTS, ETC
-64-
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.
-65-
affix photo here
PRACTICE ONE: Scheme type:
Mood:
Notes: hint: you will probably want to note things like value, color meaning, etc
Thumbnails:
-66-
affix photo here
PRACTICE TWO: Scheme type:
Mood:
Notes:
Thumbnails:
-67-
affix photo here
PRACTICE THREE: Scheme type:
Mood:
Notes:
Thumbnails:
-68-
affix photo here
PRACTICE FOUR: Scheme type:
Mood:
Notes:
Thumbnails:
-69-
affix photo here
PRACTICE FIVE: Scheme type:
Mood:
Notes:
Thumbnails:
-70-
affix photo here
PRACTICE SIX: Scheme type:
Mood:
Notes:
Thumbnails:
-71-
affix photo here
PRACTICE SEVEN: Scheme type:
Mood:
Notes:
Thumbnails:
-72-
affix photo here
PRACTICE EIGHT: Scheme type:
Mood:
Notes:
Thumbnails:
-73-
affix photo here
PRACTICE NINE: Scheme type:
Mood:
Notes:
Thumbnails:
-74-
affix photo here
PRACTICE TEN: Scheme type:
Mood:
Notes:
Thumbnails:
-75-