Color Theory

Ms. CJ De Leon
Color is a powerful tool in graphic design. It can be used to attract attention,
organize content, emphasize elements, evoke emotion and help a design look
aesthetically pleasing. But what colors should be used? In order to choose the right
colors and color combinations, it is important that the graphic designer have a basic
understanding of color theory.

Color theory is the study of color in art and design, their relationships with each
other and principles used to create harmonious color schemes.

Color theory is a science and art unto itself, which some build entire careers on, as
color consultants or sometimes brand consultants. Knowing the effects color has on
a majority of people is an incredibly valuable expertise that designers can master
and offer to their clients.
The concept of the color wheel was invented by Sir Isaac Newton in 1666 when he
bent the color spectrum, or the range of all visible light, into the shape of a circle. It is a
circular diagram used to visually show the relationships between colors and can be
used to logically choose color schemes.
 Primary colors are red, blue and yellow.
These three colors are the most basic colors on the color wheel.
They cannot be made from any other colors but all other colors on
the color wheel are made from them. They are commonly used
together to attract attention, such as children’s products or at a
circus.
 Tertiary colors are blue-green, yellow-green, yellow-
orange, red-orange, red-purple and blue-purple.
They are formed by mixing a primary color and a secondary
color together. For example, blue-green is made from mixing
blue and green. Tertiary colors help create a wider color
palette.
 Lighter versions of colors are formed by adding white and are called tints.
Darker versions are formed by adding black and are called shades. This is
illustrated on the color wheel by adding two inner rings for tints and two outer
rings for shades. The middle ring is the hue.
Analogous colors are beside or near each other on
the color wheel, such as blues and blue-greens.
This color scheme is similar to monochromatic
colors but with more range. They have low contrast
but work well together because they have common
undertones.
Split complementary colors
is a color and two colors
adjacent to its
complementary color, such
as green-yellow, purple and
red. These colors provide
high contrast without the
strong tension of the
complementary scheme.
 Triadic colors are three colors
equally spaced around the color
wheel. They are not as contrasting
as complementary colors but look
more balanced. Primary colors
and secondary colors are both
examples of triadic color
schemes.
Tetradic colors are two pairs of
complementary colors, also
known as double
complementary, such as blue-
purple, green, yellow-orange
and red. It may look like too
much color if all four colors are
used in equal amounts.
Therefore one or two colors
should be dominant.
 &
Colors
Their Meanings
Ms. CJ De Leon
 WARM COLORS
Warm Colors include red, orange, and yellow, and
variations of those three colors. These are the colors of fire,
of fall leaves, and of sunsets and sunrises, and are
generally energizing, passionate, and positive.
Red and yellow are both primary colors, with orange falling
in the middle (making it a secondary color), which means
warm colors are all truly warm and aren’t created by
combining a warm color with a cool color. Use warm colors
in your designs to reflect passion, happiness, enthusiasm,
and energy.
 R E D
• Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and
passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect
on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.
• Red can be associated with anger, but is also associated with importance (think of the red carpet at awards
shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that
warning labels are often red).
• Outside the western world, red has different associations. For example, in China, red is the color of
prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by
brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated
with communism.
• Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED]
campaign.
• In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in
designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in
the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades
being more powerful and elegant.
The bright pinkish red of the background on Ming Lab’s website is
inviting and passionate.
The bright pinkish red of the background on Ming Lab’s website is
inviting and passionate.
The muted red on the Startup Lab website is energetic without being
aggressive.
 Bigsound Buzz’s website uses a monochromatic design of various
shades and tones of red, which in this instance gives a poppy, retro
vibe
Build in Amsterdam’s website uses a vibrant red accent color that
draws attention to the middle of the page immediately.
 Orange
• Orange is a very vibrant and energetic color. In its muted forms it can
be associated with the earth and with autumn. Because of its
association with the changing seasons, orange can represent change
and movement in general. Orange is also strongly associated with
creativity.
• Because orange is associated with the fruit of the same name, it can
be associated with health and vitality. In designs, orange commands
attention without being as overpowering as red. It’s often considered
more friendly and inviting, and less in-your-face.
Bitter Renter’s bright and bold home page takes full advantage of the
energy that orange can provide to a design.
We Are Not Sisters’ dark orange, oversized typography makes an
immediate impact
Christopher Kimball’s Milk Street’s subtle use of orange as an accent
color shows it can be used in more elegant and conservative designs.
Sbjct mixes a subtle peach color with a dark orange for a more
monochromatic design that still has a lot of energy.
 Robin De Niro also uses a very light peach background with two
shades of orange for the typography, in a much more understated
design.
 Yellow
Yellow is often considered the brightest and most energizing of the warm colors. It’s
associated with 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 bright
yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in
designs where a sense of permanence is desired.
Kettle’s not-quite-true-yellow is lively and vibrant without being
overwhelming.
Deskpass uses a slightly darker yellow, giving it an eye-catching but
slightly muted look.
Toyfight uses a bright goldenrod background, but otherwise keeps
their design simple and straightforward.
Milano Contract District’s website is simple and minimalist, with all
of the impact of the design coming from the bright yellow
background.
Susa Ventures uses a goldenrod hue as an accent color in their
typography to great effect.
 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).
Because of this, green takes 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.
 Green
• Green is a very down-to-earth color. It can represent new beginnings
and growth. It also signifies renewal and abundance. Alternatively,
green can also represent envy or jealousy, and a lack of experience.
• Green has many of the same 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 and vibrant, while olive
greens are more representative of the natural world. Dark greens are
the most stable and representative of affluence.
The site for Memory is Our Homeland uses a blue-green hue that’s
energized by the yellow typography without being too bright.
The Rhythm of Food’s site uses a bright kelly green that’s ideal for a
site that ties together food and information.
Rich, hunter green makes a great accent color on an elegant
restaurant website like Le Farfalle Osteria’s.
Anna Rosa Krau’s website has a soft sage green background, which
works almost as a neutral for this portfolio.
HelloMind’s bright green background is youthful and gives a sense of
growth (in line with their product for improving your brain function).
Studio Farquhar’s lime green accents are punchy and modern, and
stand out in their minimalist layout.
 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 are more strong and reliable. Blue is also
associated with peace and has spiritual and religious connotations in many
cultures and traditions (for example, the Virgin 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, like navy, are
excellent for corporate sites or designs where strength and reliability are
important.
The bright blue background of the Future of Design Survey results
website homepage stands out, and is then used as an accent color
throughout the rest of the site.
Versett uses a bright blue as the primary color on their website, along
with a number of other bright hues to differentiate different sections.
Deep Mind’s website uses various shades of blue for its background,
giving it a trustworthy, authoritative feel.
 Purple
In ancient times, the dyes used for creating purple hues were extracted
from snails and were very expensive, so only royals and the very
wealthy could afford them.
Purple is 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 lavender) 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.
The first project in Filippo Bello’s portfolio uses a purple color scheme
that adds to the sense of creativity.
The site for the One Shared House documentary uses a vibrant shade
of purple and hot pink accents to give a sense of energy, creativity,
and imagination.
 On Content Stack, reddish purple works great as an accent color
against a neutral background, and draws attention to important page
elements, like buttons.
The dark purple hues of Orbit’s website give a sense of sophistication
fitting their AI.
Purple is the perfect hue for a creative endeavor like KIKK Festival
2016.
 Neutral COLORS
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.
 Black
• Black is the strongest of the neutral colors. On the positive side, it’s
commonly associated with power, elegance, and formality. On the negative
side, it can be associated with evil, death, and mystery. Black is the
traditional color of mourning in many Western countries. It’s also
associated with rebellion in some cultures, and is associated with
Halloween and the occult.
• Black, when used as more than an accent or for text, is commonly used in
edgier designs, as well as in very elegant designs. It can be either
conservative or modern, traditional or unconventional, depending on the
colors it’s combined with. In design, black is commonly used for typography
and other functional parts, because of its neutrality. Black can make it
easier to convey a sense of sophistication and mystery in a design.
The faded black (technically dark gray, but close enough to black that
it makes sense to classify it as such) of the DUA website works
beautifully in such a minimalist design.
Anonymous Hamburger Society’s black background is a perfect
canvas for the amazing food photos on the site.
Many of the images on Timothy Saccenti’s portfolio are dominated by
black, which is also the color of the transparent menu, giving the
entire site an edgy, modern feel.
Minimal design with black used as an accent color gives Heco’s site a
super modern feeling.
The black hue used here along with the animation gives it an edgy,
almost creepy feel.
ReFErEnces
Troy Templeman. August 31, 2010. Color Theory in Graphic Design.
http://www.troytempleman.com/2010/08/31/color-theory-in-graphic-design-3/
Cameron Chapman. January 28, 2010. Color theory for designers Part 1: The Meaning Of Color.
https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/