Before&After ®
Continued
XiBAmagazine.com U
Our color wheel 0646
Our color wheelThe color wheel is our tool for understanding
which colors go with what.
Before&After ®
2 of 12
XiBAmagazine.com U
Our color wheel 0646
Our color wheelPart science, part art, the color wheel is our tool for understanding which colors go with what.
Infinity, simplified White light contains all visible colors, which form an infinite spectrum that always appears in the violet-to-red sequence
you see in a rainbow (right, top). To make it practical, the color wheel represents this infinity with 12 basic hues pretty much like those in your first box of crayons.
Wherever there is light, there is color. While we think of colors as independent—this blue, that red—a color is never seen alone but always
in the context of other colors. Like a musical note, no one color is “good” or “bad.” Rather, it’s one part of a composition that as a whole is pleasing or not. The color wheel is our tool for understanding how colors relate to one another. Here’s how it works.
Visible light
Ultraviolet Infra-red
The color wheel is the range of visible light made into a circle.
Before&After ® Our color wheel 3 of 12 XiBAmagazine.com U
3 of 12 Our color wheel 0646
What are the colors?The wheel has 12 basic hues. First are the three primary colors of blue, yellow and red. Primary colors combine to make secondary colors, which combine to make tertiary colors.
Primary colors are the wheel’s “parent” colors; they are the only colors not made from other colors. The primary colors are positioned around the wheel in thirds.
Secondary colors are halfway between the primary colors. Each is made from equal amounts of the nearest primaries.
Tertiary colors fill the remaining gaps. They are made from equal amounts of the adjacent primary and secondary colors.
Before&After ® Our color wheel 4 of 12 XiBAmagazine.com U
4 of 12 Our color wheel 0646
Colors in commonAs you can tell, every color is part of the color next to it, which is part of the next and the next, all the way around the wheel. Colors in common are the basis of color relationships.
Blue is common to all seven colors, which get less blue as they fan out. Green and violet are the secondaries that contain blue.
Yellow is common to all seven colors, which get less yellow as they fan out. Green and orange are the secondaries that contain yellow.
Red is common to all seven colors, which get less red as they fan out. Orange and violet are the secondaries that contain red.
Before&After ® Our color wheel 5 of 12 XiBAmagazine.com U
5 of 12 Our color wheel 0646
Shades hue+black
Color valueColor also has darkness and lightness, or value. To show value, the color wheel has more rings; two big rings for the dark shades and two small rings for the light tints.
Tints hue+white
Hue
Shade
Hue
Tint
Tint
Shade
The color wheel has five concentric rings from dark to light—shades are the big rings, tints are the small, and hues are the middle.
Tints and shades (Left) A shade is the hue plus black, and a tint is the hue plus white.
Infinite gradient (Below) Five steps represent what is actually a continuous gradient from white to black. A tint or shade can fall anywhere on the continuum.
Before&After ® Our color wheel 6 of 12 XiBAmagazine.com U
6 of 12 Our color wheel 0646
Color relationships The following pages illustrate the six basic color relationships. Each can yield an endless number of color palettes.
MonochromaticFirst are the dark, medium and light values of a single color. This is a monochromatic palette. It has no color depth, but it provides the contrast of dark, medium and light that’s so important to good design.
AnalogousAdjacent colors are called analogous. Analogous colors share strong undertones (here, yellow and red), which create pleasing, low-contrast harmony. Analogous palettes are rich and always easy to work with.
Before&After ® Our color wheel 7 of 12 XiBAmagazine.com U
7 of 12 Our color wheel 0646
Any palette can include shades and tints along with the hue. The result can be all dark, all light, or any combination.
ComplementDirect opposites on the color wheel are complements—in this case, blue and orange. What the complement brings is contrast. A color and its complement convey energy, vigor and excite-ment. Typically, the complement is used in a smaller amount as an accent; a spot of orange on a blue field, for example.
Split complementOne step either way are the complement’s own analogous colors. This palette is called a split complement. Its strength is in the low-contrast beauty of analogous colors, plus the added punctuation of an opposite color. In this case the red, because it’s most different, would likely be used as the accent.
Before&After ® Our color wheel 8 of 12 XiBAmagazine.com U
8 of 12 Our color wheel 0646
The amount of color matters. Palettes can be made warmer/cooler, darker/lighter, stronger/quieter and so on by using more or less of some colors.
PrimaryThe primary colors are rarely seen as a trio except in children’s products. Red and yellow, however, are popular in American culture for everything from fast food to gasoline. Red and blue are common but attractive only if separated by open space.
SecondarySecondary colors have a lot in common—two share blue, two share yellow, and two share red—so harmonize easily. As a trio they are soft, inviting and rich, and have pleasing depth and dimension that are hard to get in other ways.
Rare Popular Clash Separated
Before&After ® Our color wheel 9 of 12 XiBAmagazine.com U
9 of 12 Our color wheel 0646
Now for a quizTrain your eye: Each cover uses one of the basic color relationships. Can you name them? Hint: Look at the big colors, not the small ones; ignore black & white. Answers on page 11.
COUNTRY
Garden GreensGreat GourdsA Perfect PorchSimple GiftsStovetop TreatsPlush PulloverAnd more!
Comfort COUNTRYComfort
Garden GreensGreat GourdsA Perfect PorchSimple ScarvesStovetop TreatsPlush PulloverAnd more!
Monochromatic Analogous Complement Split complement Primary Secondary
Monochromatic Analogous Complement Split complement Primary Secondary
Monochromatic Analogous Complement Split complement Primary Secondary
Monochromatic Analogous Complement Split complement Primary Secondary
COUNTRY
Garden GreensGreat GourdsA Perfect PorchSimple GiftsStovetop TreatsPlush PulloverAnd more!
Comfort COUNTRYComfort
Garden GreensGreat GourdsA Perfect PorchSimple GiftsStovetop TreatsPlush PulloverAnd more!
Before&After ® XiBAmagazine.com U
10 of 12 Our color wheel 0646
Our color wheel 10 of 12
Download: Before & After color wheel
Our color wheel | 748kb www.bamagazine.com/ColorWheel/
This color wheel is exactly the one we use in Before & After magazine. It is a reference tool, not an interactive product. Its purpose is to help you understand how colors are related. Its 12 hues and 48 tints represent the full spectrum of color but are only a tiny fraction of the infinity of colors actually in nature.
The format is Adobe PDF. For everything you want to know about working with PDF, please contact Adobe’s Reader support Web site at www.adobe.com/support/products/acrreader.html
Before&After ®
Before&After ® XiBAmagazine.com U
11 of 12 Our color wheel 0646
Our color wheel 11 of 12
18
16
17
COUNTRYComfort
Garden GreensGreat GourdsA Perfect PorchSimple GiftsStovetop TreatsPlush PulloverAnd more!
COUNTRYComfort
Garden GreensGreat GourdsA Perfect PorchSimple GiftsStovetop TreatsPlush PulloverAnd more!
COUNTRY
Garden GreensGreat GourdsA Perfect PorchSimple GiftsStovetop TreatsPlush PulloverAnd more!
ComfortCOUNTRYComfort
Garden GreensGreat GourdsA Perfect PorchSimple GiftsStovetop TreatsPlush PulloverAnd more!
COUNTRYComfort
Garden GreensGreat GourdsA Perfect PorchSimple GiftsStovetop TreatsPlush PulloverAnd more!
Typefaces
1 Giza Nine Three
2 Sloop ScriptOne
3 ITC Goudy Sans Bold Italic
Images
4 (a–d) iStockphoto.com | a b c d
Quiz answers
Article resources
Colors
C65 M35 Y75 K65
C50 M0 Y76 K0
C30 M0 Y64 K0
C26 M0 Y47 K0
C60 M25 Y0 K0
C50 M15 Y0 K0
C15 M5 Y0 K0
C0 M55 Y20 K0
C30 M85 Y75 K55
C20 M80 Y35 K5
C60 M28 Y90 K30
C0 M75 Y95 K0
C25 M75 Y100 K20
C0 M30 Y97 K0
C5 M48 Y96 K0
9
10
1
4a
2
11
12
10
14
13
12
11
4d
4c
4b
3
15
16
14
22
23
21
5 6
7 8
9
20
15
16
17
18
19
20
21
22
5 Monochromatic
6 Complementary
7 Primary
8 Analogous
13
19
23
Before&After ®
12 of 12 | Printing formats
XiBAmagazine.com U
Our color wheel 0646
Our color wheel 12 of 12Our color wheel 12 of 12
Before & After magazine Before & After has been sharing its practical approach to graphic design since 1990. Because our modern world has made designers of us all (ready or not), Before & After is dedicated to making graphic design understand-able, useful and even fun for everyone.
John McWade Publisher and creative directorGaye McWade Associate publisherVincent Pascual Staff designerDexter Mark Abellera Staff designer Before & After magazine323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995E-mail [email protected] www http://www.bamagazine.com
Copyright ©2006 Before & After magazine ISSN 1049-0035. All rights reserved
You may pass along a free copy of this article to others by clicking here. You may not alter this article, and you may not charge for it. You may quote brief sections for review; please credit Before & After magazine, and let us know. To link Before & After magazine to your Web site, use this URL: http://www.bamagazine.com. For all other permissions, please contact us.
Subscribe to Before & After
Subscribe to Before & After, and become a
more capable, confident designer for pennies
per article. To learn more, go to
http://www.bamagazine.com/Subscribe
E-mail this article
To pass along a free copy of this article to
others, click here.
Join our e-list
To be notified by e-mail of new articles as
they become available, go to
http://www.bamagazine.com/email
Back | Paper-saver format
XiBAmagazine.com U®Before&After
For paper-saver format Print: (Specify pages 14–19)
Before & After is made to fit your binder
Before & After articles are intended for permanent reference. All are titled and numbered.
For the current table of contents, click here. To save time and paper, a paper-saver format of this article,
suitable for one- or two-sided printing, is provided on the following pages.
Print Format: Landscape
Page Size: Fit to Page
SavePresentation format or
Paper-saver format
For presentation format Print: (Specify pages 1–12)
Be
fore
&A
fter | w
ww
.bamagazine.com
1 of 6
Ou
r colo
r wh
ee
l 06460646
Ou
r colo
r wh
ee
l
Infi
nity, sim
plifi
ed
W
hite light contains all visible colors, which form
an infinite spectrum
that always appears in the violet-to-red sequence
you see in a rainbow (right, top). To m
ake it practical, the color wheel represents
this infinity with 12 basic hues pretty m
uch like those in your first box of crayons.
Wh
erever there is ligh
t, there
is colo
r. Wh
ile we th
ink o
f co
lors as in
dep
end
ent—
this
blu
e, that red
—a co
lor is
never seen
alon
e bu
t always
in th
e con
text of o
ther co
lors. Like a m
usical
no
te, no
on
e colo
r is “goo
d” o
r “bad
.” Rath
er, it’s o
ne p
art of a co
mp
ositio
n th
at as a wh
ole is p
leasing o
r no
t. Th
e colo
r wh
eel is ou
r too
l fo
r un
derstan
din
g how
colo
rs relate to o
ne
ano
ther. H
ere’s how
it wo
rks.
Visib
le l ig
ht
Ultraviolet
Infra-red
The color wheel is the range of visible light m
ade into a circle.
Our color w
heelT
he color w
heel is ou
r tool for un
derstan
din
g w
hich
colors go with
wh
at.
Be
fore
&A
fter | w
ww
.bamagazine.com
2 of 6
Ou
r colo
r wh
ee
l 06460646
Ou
r colo
r wh
ee
l
Wh
at are th
e co
lors?
Th
e wh
eel has 12 b
asic hu
es. First are th
e three p
rimary co
lors o
f blu
e, yellow an
d red
. P
rimary co
lors co
mb
ine to
make secon
dary co
lors, w
hich
com
bin
e to m
ake tertiary colo
rs.
Prim
ary co
lors are the w
heel’s “parent” colors; they are the only colors not m
ade from
other colors. The primary colors are positioned
around the wheel in thirds.
Se
con
da
ry colo
rs are halfway
between the prim
ary colors. Each is m
ade from equal am
ounts of the nearest prim
aries.
Tertia
ry colo
rs fill the remaining
gaps. They are made from
equal am
ounts of the adjacent primary
and secondary colors.
Co
lors in
com
mo
nA
s you
can tell, every co
lor is p
art of th
e colo
r next to
it, wh
ich is p
art of th
e next an
d th
e n
ext, all the w
ay arou
nd
the w
heel. C
olors in com
mon
are the b
asis of co
lor relatio
nsh
ips.
Blu
e is co
mm
on
to all seven colors, which get
less blue as they fan out. Green and violet are
the secondaries that contain blue.
Ye
llow
is com
mo
n to all seven colors, w
hich get less yellow
as they fan out. Green and
orange are the secondaries that contain yellow.
Re
d is co
mm
on
to all seven colors, which get
less red as they fan out. Orange and violet are
the secondaries that contain red.
Be
fore
&A
fter | w
ww
.bamagazine.com
3 of 6
Ou
r colo
r wh
ee
l 06460646
Ou
r colo
r wh
ee
l
Sh
ad
es
hue+black
Co
lor valu
eC
olo
r also h
as darkn
ess and
lightn
ess, or valu
e. To sh
ow valu
e, the co
lor w
heel h
as m
ore rin
gs; two
big rin
gs for th
e dark sh
ades an
d tw
o sm
all rings fo
r the ligh
t tints.
Tints
hue+white
Hu
e
Sh
ad
e
Hu
e
Tint
Tint
Sh
ad
e
The
colo
r wh
ee
l ha s five concentric rings from
dark to light—shades are the big rings, tints are the sm
all, and hues are the middle.
Tints a
nd
sha
de
s (Left) A
shade is the hue plus black, and a tint is the hue plus w
hite.
Infi
nite
gra
die
nt
(Below
) Five steps represent w
hat is actually a continuous gradient from
white to black. A
tint or shade can fall anyw
here on the continuum
.
Co
lor re
lation
ship
s T
he fo
llowin
g pages illu
strate the six b
asic colo
r relation
ship
s. Each
can yield
an
end
less nu
mb
er of co
lor p
alettes.
Mo
no
chro
ma
ticFirst are the dark, m
edium and light values of a single
color. This is a monochrom
atic palette. It has no color depth, but it provides the contrast of dark, m
edium and
light that’s so important to good design.
An
alo
go
us
Adjacent colors are called analogous. A
nalogous colors share strong undertones (here, yellow
and red), which
create pleasing, low-contrast harm
ony. Analogous
palettes are rich and always easy to w
ork with.
Be
fore
&A
fter | w
ww
.bamagazine.com
4 of 6
Ou
r colo
r wh
ee
l 06460646
Ou
r colo
r wh
ee
l
An
y palette can
inclu
de sh
ades an
d tin
ts alon
g with
the h
ue. T
he resu
lt can b
e all d
ark, all light, o
r any co
mb
inatio
n.
Co
mp
lem
en
tD
irect opposites on the color wheel are com
plements—
in this case, blue and orange. W
hat the complem
ent brings is contrast. A
color and its complem
ent convey energy, vigor and excite-m
ent. Typically, the complem
ent is used in a smaller am
ount as an accent; a spot of orange on a blue field, for exam
ple.
Sp
lit com
ple
me
nt
One step either w
ay are the complem
ent’s own analogous
colors. This palette is called a split complem
ent. Its strength is in the low
-contrast beauty of analogous colors, plus the added punctuation of an opposite color. In this case the red, because it’s m
ost different, would likely be used as the accent.
Th
e amo
un
t of co
lor m
atters. Palettes can b
e mad
e warm
er/coo
ler, darker/ligh
ter, stro
nger/q
uieter an
d so
on
by u
sing m
ore o
r less of so
me co
lors.
Prim
ary
The primary colors are rarely seen as a trio except in children’s
products. Red and yellow
, however, are popular in A
merican
culture for everything from fast food to gasoline. R
ed and blue are com
mon but attractive only if separated by open space.
Se
con
da
rySecondary colors have a lot in com
mon—
two share blue,
two share yellow
, and two share red—
so harmonize easily .
As a trio they are soft, inviting and rich, and have pleasing
depth and dimension that are hard to get in other w
ays.
R
are P
opular C
lash Separated
Be
fore
&A
fter | w
ww
.bamagazine.com
5 of 6
Ou
r colo
r wh
ee
l 06460646
Ou
r colo
r wh
ee
l
No
w fo
r a qu
izTrain
you
r eye: Each
cover uses o
ne o
f the b
asic colo
r relation
ship
s. Can
you
nam
e them
? H
int: Lo
ok at th
e big co
lors, n
ot th
e small o
nes; ign
ore b
lack & w
hite. A
nsw
ers on
page 6.
COUNTRY
Garden G
reensG
reat Gourds
A Perfect Porch
Simple G
iftsStovetop TreatsPlush PulloverA
nd more!
Comfort
COUNTRY
Comfort
Garden G
reensG
reat Gourds
A Perfect Porch
Simple Scarves
Stovetop TreatsPlush PulloverA
nd more!
M
onochromatic
A
nalogous
Com
plement
Split com
plement
P
rimary
Secondary
M
onochromatic
A
nalogous
Com
plement
Split com
plement
P
rimary
Secondary
M
onochromatic
A
nalogous
Com
plement
Split com
plement
P
rimary
Secondary
M
onochromatic
A
nalogous
Com
plement
Split com
plement
P
rimary
Secondary
COUNTRY
Garden G
reensG
reat Gourds
A Perfect Porch
Simple G
iftsStovetop TreatsPlush PulloverA
nd more!
Comfort
COUNTRY
Comfort
Garden G
reensG
reat Gourds
A Perfect Porch
Simple G
iftsStovetop TreatsPlush PulloverA
nd more!
Do
wn
load
: Be
fore
& A
fter co
lor w
he
el
Ou
r colo
r wh
ee
l | 748kb w
ww
.bamagazine.com
/ColorW
heel/
This color wheel is exactly the one w
e use in B
efore & A
fter magazine. It is a reference tool, not
an interactive product. Its purpose is to help you understand how
colors are related. Its 12 hues and 48 tints represent the full spectrum
of color but are only a tiny fraction of the infinity of colors actually in nature.
The format is A
dobe PD
F. For everything you want
to know about w
orking with P
DF, please contact
Adobe’s R
eader support Web site at
ww
w.adobe.com
/support/products/acrreader.html
Befo
re&A
fter ®
Be
fore
&A
fter | w
ww
.bamagazine.com
6 of 6
Ou
r colo
r wh
ee
l 06460646
Ou
r colo
r wh
ee
l
1816 17
COUNTRY
Comfort
Garden G
reensG
reat Gourds
A Perfect Porch
Simple G
iftsStoveto p TreatsPlush PulloverA
nd more!
COUNTRY
Comfort
Garden G
reensG
reat Gourds
A Perfect Porch
Simple G
iftsStoveto p TreatsPlush PulloverA
nd more!
COUNTRY
Garden G
reensG
reat Gourds
A Perfect Porch
Simple G
iftsStoveto p TreatsPlush PulloverA
nd more!
Comfort
COUNTRY
Comfort
Garden G
reensG
reat Gourds
A Perfect Porch
Simple G
iftsStoveto p TreatsPlush PulloverA
nd more!
COUNTRY
Comfort
Garden G
reensG
reat Gourds
A Perfect Porch
Simple G
iftsStoveto p TreatsPlush PulloverA
nd more!
Type
face
s
1 Giza N
ine Three
2 Sloop ScriptOne
3 ITC G
oudy Sans Bold Italic
Ima
ge
s
4 (a–d
) iStockphoto.com |
a b c d
Qu
iz an
swe
rs
Article
reso
urce
s
Co
lors
C65 M
35 Y75 K65
C50 M
0 Y76 K0
C30 M
0 Y64 K0
C26 M
0 Y47 K0
C60 M
25 Y0 K0
C50 M
15 Y0 K0
C15 M
5 Y0 K0
C0 M
55 Y20 K0
C30 M
85 Y75 K55
C20 M
80 Y35 K5
C60 M
28 Y90 K30
C0 M
75 Y95 K0
C25 M
75 Y100 K20
C0 M
30 Y97 K0
C5 M
48 Y96 K0
910
1
4a 2
11
12 10
14 13 12 11
4d 4c
4b 3
1516 14
2223 21
56
78
9
20
151617
18192021
22
5 Monochrom
atic
6 Com
plementary
7 Prim
ary
8 Analogous
13
19
23
Be
fore
& A
fter m
ag
azin
e
Befo
re & A
fter has b
een sh
aring its p
ractical app
roach
to
graph
ic design
since 1990. B
ecause o
ur m
od
ern w
orld
h
as mad
e design
ers of u
s all (ready o
r no
t), Befo
re &
After is d
edicated
to m
aking grap
hic d
esign u
nd
erstand
-ab
le, usefu
l and
even fu
n fo
r everyon
e.
Joh
n M
cWa
de
Pu
blish
er and
creative directo
rG
ay
e M
cWa
de
Asso
ciate pu
blish
erV
ince
nt P
ascu
al Staff d
esigner
De
xte
r Ma
rk A
be
llera
Staff design
er B
efo
re &
Afte
r ma
ga
zine
323 Linco
ln Street, R
oseville, C
A 95678
Tele
ph
on
e 916-784-3880
Fax 916-784-3995E
-mail m
ailbo
x@b
amagazin
e.com
w
ww
http
://ww
w.b
amagazin
e.com
Co
py
righ
t ©2006 B
efo
re &
Afte
r ma
ga
zine
IS
SN
1049-0035. All rig
hts re
serv
ed
You
may p
ass alon
g a free cop
y of th
is article to o
thers
by clickin
g here. Yo
u m
ay no
t alter this article, an
d yo
u
may n
ot ch
arge for it. Yo
u m
ay qu
ote b
rief section
s fo
r review; p
lease credit B
efore &
After m
agazine, an
d
let us kn
ow
. To lin
k Befo
re & A
fter magazin
e to yo
ur
Web
site, use th
is UR
L: http
://ww
w.b
amagazin
e.com
. Fo
r all oth
er perm
ission
s, please co
ntact u
s.
Su
bscrib
e to
Be
fore
& A
fter
Sub
scribe to
Befo
re & A
fter, and
beco
me a
mo
re capab
le, con
fid
ent d
esigner fo
r pen
nies
per article. To
learn m
ore, go
to
http
://ww
w.b
amagazin
e.com
/Sub
scribe
E-m
ail this article
To p
ass alon
g a free cop
y of th
is article to
oth
ers, click here.
Join
ou
r e-list
To b
e no
tified
by e-m
ail of n
ew articles as
they b
ecom
e available, go
to
http
://ww
w.b
amagazin
e.com