Conscious Colors

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