Color Theory

Remember back to your early school days, when having a 64-count box of Crayola crayons
to choose from was the ultimate in creative freedom?

Well, as a designer in the digital era, you certainly dont have to stick to the
colors available from paints, inks, or other pigments, though theres a lot we
can learn from fine arts approach to color. In fact, the human eye can see
millions of different hues but sometimes, choosing even just two or three to
use from those millions can seem like a daunting task.
Thats because choosing colors for a design is both highly subjective and, at
times, highly scientific. So where does that leave designers who just want a
color palette that looks nice or makes a client happy? Like it or not, the most
effective color choices go beyond just personal preference because colors
have an extraordinary ability to influence mood, emotions, and perceptions;
take on cultural and personal meaning; and attract attention, both consciously
and subconsciously.
For designers and marketers, the challenge is in balancing these complex roles
that color plays to create an attractive, effective design. Thats where a basic
understanding of color theory can come in handy. Traditional color theory can
help you understand which colors might work well together (or not) and what
kind of effect different combinations will create within your design.
And it all starts with the color wheel.

The Basics: Understanding Color

The Color Wheel
Youve likely seen it in a school art class, or at least are familiar with its
stripped-down form: the primary colors of red, yellow, and blue. Well be

dealing with the traditional color wheel of 12 colors, often used by painters
and other artists. Its an easy visual way of understanding colors relationships
with each other.

The color wheel is all about mixing colors. Mix the primary or base colors red,
yellow, and blue, and you get the secondary colors on the color wheel: orange,
green, and violet. Mix those with a primary color, and you get the third level
of the color wheel, tertiary colors. Those include red-orange, yellow-orange,
yellow-green, blue-green, blue-violet, and red-violet. The primary and
secondary colors (with the addition of indigo) are also part of the visible
spectrum of light, or the colors of the rainbow. You many have memorized
the acronym Roy. G. Biv as a kid to remember these colors: red, orange,
yellow, green, blue, indigo, and violet.
This way of understanding color is known as an subtractive model, which
involves mixing colored pigments like paints or inks both the traditional
color wheel and the CMYK color system that printing equipment uses fall into
this category. Thats opposed to the additive model, which involves mixing
colored light (like the colors you see on your computer screen or TV) and uses
a different set of primary colors: red, green, and blue, often abbreviated RGB.
In Canva, we have our own version of the color wheel that you can pick colors
from. Any color you choose will be identified by a hexadecimal value (or hex
code), a six-digit combination of numbers and/or letters (often preceded by #)
used in many design programs to identify specific colors when designing for
the web.

Color Terms
Before we get into how to use the color wheel to create color palettes for your
designs, lets take a quick look at some color-related terms that will help you
understand the different types of colors you might be using as you work on
design projects:
Hue: synonymous with color or the name of a specific color;
traditionally refers to one of the 12 colors on the color wheel
Shade: a hue darkened with black
Tone: a hue dulled with gray
Tint: a hue lightened with white
Saturation: refers to the intensity or purity of a color (the closer a hue
approaches to gray, the more desaturated it is)

 Value: refers to the lightness or darkness of a color

Color Harmony
Now that weve got the more technical stuff out of the way, lets look at how
the color wheel can be a practical resource in choosing colors for a design
project. We can pull a number of classic palettes from the color wheel that
painters have been using for centuries to create balanced and visually pleasing
(or high-contrast and striking) compositions. In most design applications,
these color schemes will need to be split into one dominant color dominant
either because of how much it appears in the design, or because of how it
stands out in comparison with other colors and one or more accent colors.
1) Monochromatic: various shades, tones, or tints of one color; for instance, a
range of blues varying from light to dark; this type of scheme is more subtle
and conservative
2) Analogous: hues that are side by side on the color wheel; this type of
scheme is versatile and easy to apply to design projects
3) Complementary: opposites on the color wheel, such as red/green or
blue/orange; complementary colors are high-contrast and high-intensity, but
can be difficult to apply in a balanced, harmonious way (especially in their
purest form, when they can easily clash in a design)
4) Split-Complementary: any color on the color wheel plus the two that flank
its complement; this scheme still has strong visual contrast, but is less jarring
than a complementary color combination
5) Triadic: any three colors that are evenly spaced on the color wheel
6) Tetradic/Double-Complementary: two complementary pairs; this scheme is
very eye-catching, but may be even harder to apply than one pair of
complementary colors, since more colors are more difficult to balance. If you

use this type of scheme, youll want to choose one of the four to be the
dominant color and adjust the saturation/value/etc. of some or all the colors so
they work well in different parts of your design like the text and background.

Color Inspiration
In addition to the color combinations found in the color wheel, nature provides
endless inspiration for harmonious color schemes. For 25 great palettes pulled
from nature photography (as well as others inspired by travel, food & drink,
and everyday items), check out another of our Design School articles, 100
Brilliant Color Combinations: And How to Apply Them to Your Designs.
Colors can also be paired by temperature (warm or cool colors), saturation
(vivid colors often look youthful, while faded ones look vintage), mood
(bright & fun, dark & serious), theme (location, season, holiday), and other
qualities. To explore different color schemes, check out one of the many colorpicking tools available online; some will even let you upload an image to
generate a color scheme. Some to try include Paletton, Adobe Colour
CC(formerly Kuler), and ColorExplorer. If you use Chrome as your browser,
you can download the Eye Dropper extension, which lets you identify and pull
colors straight from the web.
Bright, cheerful colored palettes inspired by exotic travel locations.

Looking to different historical periods and art movements for color inspiration
can be another great technique. The palettes below demonstrate the warm,
light-filled colors common to Impressionist paintings; the vivid, unexpected
combinations used by Post-Impressionists; the soft, earthy colors
characteristic of the Art Nouveau movement; and the bright, bold hues of Pop
Art.

Left to right: Wheatstacks (End of Summer) by Claude Monet; Starry Starry

Night by Vincent van Gogh; Reverie by Alphonse Mucha; Marilyn by Andy Warhol

The Psychology of Color

Color is all around us. Whether we realize it or not, it plays a big role in our
everyday lives. That orange or yellow traffic sign you saw on the road today?
It caught your attention for a reason. That box of cereal you bought at the
market even though it was a little more expensive than the others? You might
have been drawn to the colors on its packaging. Color even creeps its way into
language why do we say people are seeing red when theyre angry or
feeling blue when theyre sad? Because color has a unique connection to our
moods and emotions.
But not everyone thinks about or experiences color in the same way. The
meaning and symbolism we associate with different colors are influenced a
great deal by the cultural and societal groups we identify with. Lets take a
look at some common meanings associated with basic colors in Western
culture:
Color Symbolism
Red: This color can communicate many different ideas depending on its
context. Because red is associated with fire, it can represent warmth or
danger. Since red is also the color of blood, its considered an energetic, lively
color and is also associated with matters of the heart, and sometimes violence.
Alternate meanings: In some Eastern cultures, red symbolizes good fortune
and prosperity and is the color worn by brides on their wedding day.
Worldwide, red has been associated with various political movements and has
symbolized revolution.
In branding: Red often communicates strength, confidence, and power and is
a highly visible color.

Dribbble/STUDIOJQ

Orange: Also a fiery color, orange combines the warmth of red with the
cheerfulness of yellow for a hue that communicates activity, energy, and
optimism. Its also associated with the harvest or autumn season.
Dribbble/Mike Jones

Alternate meanings: In India, saffron, a certain yellowish shade of orange, is

considered sacred. In Japan, orange is the color that symbolizes love.
In branding: Orange often represents youthfulness and creativity. Gold, which
is a type of orange or yellow depending on its hue, is a symbol of luxury or
high quality.
Dribbble/Ben Didier

Yellow: As the color of sunshine, yellow often communicates happiness,

cheerfulness, friendliness, and the freshness of spring. It can also signal
warning or caution in certain contexts. Some variations (especially desaturated
and greenish yellows) can look sickly or unpleasant; historically, yellow has
sometimes been associated with illness and quarantine.
Behance/Ronggo Wanggori

Alternate meanings: In some Eastern and Asian cultures, yellow is associated

with royalty or high rank. In parts of Africa and Latin America, yellow is the
traditional color of mourning.
In branding: Pure/bright yellow does a great job of attracting attention, but
can be visually disturbing or even hard to see (for instance, white text against
a bright yellow background or vice versa) if not used with care.

 Green: This is the color of nature, plant life, and growth. As such, it often
communicates health, freshness, or an all-natural quality. Dark green can
represent wealth (or anything money-related) and stability.
Alternate meanings: Among cultures that practice Islam, green is a sacred
color. Green is also associated with Ireland and, by extension, St. Patricks
Day and lucky four-leaf clovers.
In branding: Brands or product that wants to come across as green (in the
sense of natural, healthy, sustainable, environmentally friendly, organic, etc.)
often use nature-inspired colors like green and brown.
Dribbble/Anna Hurley

Blue: The color of the sea and sky, blue often communicates peaceful, clean
qualities. As opposed to more energetic, warmer coolers, blue is seen as
calming. In some contexts, it can represent sadness or depression.
Dribbble/Deepak

Alternate meanings: In Middle Eastern cultures, blue has traditionally

represented protection against evil. Because of its association with the
heavens, blue symbolizes immortality and/or spirituality in many cultures.
In branding: Blue is widely used and one of the most versatile colors. Its
generally used to communicate trustworthiness, security, and stability. Dark or
navy blue is a particularly popular choice for corporate contexts, since its
perceived to have serious, conservative, and professional qualities.
Dribbble/Ali

Purple/Violet: Purple is traditionally associated with royalty, majesty, or

honor. It can also have spiritual/mystical or religious connotations.

Alternate meanings: In many cultures around the world, purple represents

nobility or wealth; however, in Thailand and parts of South America, the color
is associated with mourning.
In branding: Darker shades of purple often still symbolize luxury or opulence,
while lighter/brighter shades can come across feminine or childish.
Behance/Nicolas Hamoy

Black: Like red, black has many (sometimes opposing) meanings. It can
represent power, luxury, sophistication, and exclusivity. On the other hand, it
can symbolize death, evil, or mystery. In apparel, black generally
communicates formality (black tie parties) or mourning/sorrow (as the color
traditionally worn to funerals).
Alternate meanings: In some Asian and Latin American cultures, black is
considered a masculine color. In Egypt, black signifies rebirth. Across many
cultures, the color is associated with magic, superstition, or bad luck or,
similarly, the unexplainable or unknown.
In branding: Black is so widely used thats its almost a neutral, though it can
still communicate the meanings above depending on context. Many designs
are simply black and white, whether thats a deliberate choice or just to save
money on color printing. Colors always look brighter and more intense against
black.
Dribbble/Luan Gjokaj

White: As the color of light and snow, white often represents purity,
innocence, goodness, or perfection (and is traditionally worn by brides), but it
can also come across as stark or sterile.

Alternate meanings: In China, white is the color of mourning. It represents

peace across many cultures a white flag is a universal symbol of truce or
surrender.
In branding: White often communicates simplicity or a clean, modern quality.
Designers seeking a minimalist aesthetic will frequently use a lot of white.
Dribbble/Wojtek Kwiatkowski

Color in Design
Adding colors to a design involves a little more than choosing two or three
hues and plunking them down in equal parts in your layout. Effectively
applying color to a design project has a lot to do with balance and the more
colors you use, the more complicated it is to achieve balance.
An easy way to think of this concept is by splitting your color choices into
dominant and accent colors. The dominant color will be the most visible and
most frequently used hue in your design, while one or more accent colors will
complement and balance out that main color. Paying attention to how these
colors interact with each other the amount (or lack) of contrast, the ease of
readability when text is involved, how certain colors make others look when
theyre side by side, what kind of mood a color combination creates, etc.
will help you fine-tune a perfect palette for your design purposes.
A common rule of thumb for using a basic, three-color palette in a design is
known as the 60-30-10 rule. This approach is often used in interior design, but
can also be effectively applied to web or print design projects. You simply
make your dominant hue account for 60% the color in the design, while two
accent colors use up the remaining 30% and 10%. A good analogy for
understanding how this works is picturing a mans suit: the suit jacket and
pants account for 60% of the color in the outfit; the shirt accounts for 30%;

and the tie offers a small pop of color at 10% creating a balanced, polished
appearance.
Another way to keep your color palette simple and balanced is using shades
and tints (or lighter and darker versions of a chosen hue). That way, youre
able to expand your color choices without overwhelming your design with a
rainbow of colors.
Dribbble/Sen Halpin

Color in Marketing & Branding

Brand recognition is tied strongly to color. Just think of Coca-Cola, Facebook,
or Starbucks, and Ill bet you can immediately name the colors those brands
are associated with.
A study from the University of Winnipeg, titled the Impact of Color on
Marketing, found that peoples initial judgments about products are based
largely on color (with about 60 to 90% of the assessment which takes only
90 seconds based on color alone.) This means that in design, color is not
just an artistic choice, but also an important business decision affecting
everything from consumers perceptions about a brand to product sales.
However, when choosing a color scheme for your logo or brand, you dont
have to stick to any traditional, symbolic, or stereotypical methods. Theres no
foolproof process or hard-and-fast rules when it comes to color. Whats most
important is that the color and how its used within a design is a good fit for a
brands personality and market context. For some inspiration,
visit BrandColors, a website that has compiled a visual guide (with hex codes)
to the color choices made by recognizable brands from around the world.
BrandColors.net

RGB vs. CMYK Color Systems

When youre working on a design project that will need to be printed, your
computer monitor cant accurately display colors as they will look on paper.
What you see is not what you get, because digital monitors/screens and
printers use two different color systems: RGB and CMYK. RGB refers to the
small dots of red, green, and blue light that combine to form visible colors on
a screen; while CMYK stands for the cyan, magenta, yellow, and black ink
that printing equipment mixes together to create color prints. Because the
RGB color space uses a wider color spectrum than CMYK, its worth noting
that some designers like to initially create a print project in RGB for more
color options, then convert the finished design to CMYK before printing.

via The Print Blog

Due to these differences, designers need a way to get consistent color results
when working with both systems for instance, if youre designing a logo to
use on your website but also want to get a business card printed. Thats where
the Pantone Matching System (or PMS) can help. Colors can be matched for
web and print (as well as for different types of printing surfaces) to ensure a
uniform appearance. The Pantone system makes it easy for designers, clients,
and printers to collaborate and ensure that the final product looks as intended.

Color: Understand it, explore with it and love

it!
There are people who specialize in studying things like color theory and the
psychology or neuroscience of color these are complex subjects that land at
the intersection of art and science. But that dynamic is part of what makes
design so interesting and such an effective tool in the marketplace. Though

this guide may only scratch the surface, we hope it helps you make better
informed, more effective color choices for your personal or professional
projects. Happy designing!

https://designschool.canva.com/color-theory/