Color

In-Depth
The comprehensive study of colors composed by Zain Wirasat
Color Wheel
Basics
A color wheel tries to make sense of millions of different
colors by organizing them in logical way.
You will see six main colors represented on the wheel. These
are called hues and they consist of just one color and nothing
else. So a blue hue is just blue, a red hue only contains the
color red.
No black, white, or gray added.
You will notice that warm colors are in the right half of this
color wheel above and consist of Red, Orange and Yellow,
while the cooler colors, Green, Blue and Purple are on the left
side of the wheel.

Hues
Primary &
Secondary Colors
The three primary colors are Red, Blue and Yellow. They are primary because you cannot
create them by mixing any two colors together. That leads us to secondary colors, Purple, Orange and Green. You can mix
two primary colors to create secondary colors.
Creating Secondary colors from
mixing Primary colors
You can see in the figure how you can take any two of the three main primary colors (red,
blue and yellow) to create secondary colors. In this case yellow and blue (both primary) come
together to create green, and red and blue come together to create purple.

We can slowly create more and more colors

by mixing both primary and secondary colors
together.
This allows the full gamut of colors. The mixing of
a primary and secondary color is called Tertiary
Colors

Color Wheel Including Tertiary Colors

With enough color mixing you will end up with an
endless amount of color options with the only limit
being what is out of range for the human eye to
see.
What is Color, Hue, Shade,
Tint & Tone?

Color Hue
This term is used to describe any This is the general color family our
color we see whether it is a hue, color belongs to. You will notice the
shade, tone or tint. absence of grays, blacks and
whites; this only includes color.

Tint
Shade
A tint is the presence of a hue with
Shade is just the opposite with the
only white added to it. The more
addition of just black to a single
tint or white you add to the hue the
hue.This tends to make hues appear
lighter it becomes.
darker.

Tone
Tone is the same thing as tints and
shades but is a hue with the color
gray added to it.
Value
You may have heard of the term Value before and it is the measurement of the brightness
of a color. So for instance, yellow has a higher value compared to blue. Some people use
the word “lightness” interchangeably with the word value. You may also have seen the
term Intensity used for value.

To find out how much value a color has, convert your colors to black and white to find out how dark the gray tones go.

As you can see, blue has one of the darkest values while yellow has one
of the lightest. When you strip all of the hue out of a color you are left
with something called Grayscale, which only contains black at certain
levels.

When we look at photos that have a lot of yellow

hues in them we tend to think, “wow, that is
bright!” Yellow actually reflects more light, giving
it a much higher value. Compare that to cooler
colors which reflect less light. It is also a reason
why yellow tends to be reserved for
all-to-actions or important elements and text
while cooler colors tend to work better in larger
areas.
Saturation
When you add gray to a hue, we call it tone . What do we call the variation we see when this process happens? We call this
saturation. If value describes the lightness of the color then saturation describes the strength of a color.

HIGH SATURATION LOW SATURATION

As we slowly add gray to the pure purple hue in the first square we slowly see the saturation decreasing. The saturation or
strength of the hue is becoming less vibrant or dull.
The power of Color mixing
Primary and Secondary colors can be very restricting and it is why further color mixing is
needed to put together a wider, more versatile color palette. Take for instance the bright
color palette using just primary and secondary colors for the logo here (to the left) for a
financial institution. It’s great for grabbing your eyes, but horrible for establishing the right
mood and tone for the company!

We can take the pure blue hue here (below) and mix it with
either gray, black or white to get a full range of complex
colors. This bodes well for a softer more professional look
needed for the company’s industry. White, black and gray
are all neutral colors, so when mixed with a powerful strong
hue they achieve a nice balance of color.
When we start to mix simple hues with more complex hues
like orange-red, maroon or lilac, along with a neutral, we
start to get overwhelmed with the amount of possible color
choices for our projects.

The palette featured here is very harmonious because all three colors in the
palette are derived from the same primary blue hue.
Color Harmonies
How do we start to create and mix colors together to make effective color palettes? There are millions of color choices to
make and knowing methods, and finding a starting point, helps in paring our selections down. Color harmonies are an
array of different color techniques. There are six main color harmonies commonly used in design. Although there are
many others, these six are the most helpful.

ANALOGOUS COMPLEMENTARY SPLIT

COMPLEMENTARY
These colors are close to each other Complementary colors exists on
on the color wheel. There is little opposite sides of the color wheel. They Split-complementary colors takes the
contrast between the colors, giving have the most contrast of any two high contrast complementary colors and
them a softer look. One of the most colors, giving them a dramatic look. lessens the dramatic contrast by splitting
versatile color harmonies outside of the difference on the opposing side.
monochromatic.

TRIADIC TETRADIC MONOCHROMATIC

These colors are evenly spaced out A bit harder to use, tetradic forms a These colors are just variations of one
along the color wheel in a triangle rectangle or square around the wheel single hue. These can be created by
pattern. You may have noticed that the to form a color palette that has no one adding white, gray or black to the base
three primary colors are triadic colors, dominant color. These are great for hue to create a wide variety of different
as well as the three secondary colors. creating big pops of color that exist shades and tints. This one is the easiest
throughout your whole palette. color harmonies to work with.
Color palette selection
example
Let’s say we need to develop a color palette for a new company. Let’s say PURE HUE
we settle on the color blue.
We look toward analogous colors to find nice, closely related pairings to
the color blue and we find a deep purple a blue-green color. ADDING WHITE

Using pure hues can make creating designs from those pure hues
difficult because they all have the same saturation and strength. We ADDING BLACK
can add white, gray or black to any of our analogous colors to gain a
wider workable color palette.
We have established some great cooler colors using a
analogous color scheme. But, what if we wanted to
add a punch of color to our palette?
We can take our analogous colors and find corresponding
complement colors for each one. This creates a dynamic pop as it has
higher contrast.
We can even find various shades, tints and tones of our colors to
PURE HUE
expand our complement color set.
This yields a great set of analogous colors but also complement colors
in that set. This is a great example of how understanding different
PURE HUE
color harmonies can give you a huge head start in pairing colors
together.
Having such a huge color palette like this when creating design work can be daunting and unnecessary. We need to pare
down our palette to select individual colors that have a purpose.

Make sure to test out your color palette on practical projects. You will
discover changes, tweaks and new swatches that need to be added to
maximize the harmony between your selected primary and secondary
color choices.

Try unlimited for

the first 15 days
NEED for FREE
MORE
DATA?
Excludes previous customers that were on premium plan
Contrast is King
Having the right amount of contrast between your colors is essential for effective
design.
The highest contrast available to you is white on black (or black on white). Text is HIgh
the most legible when it is black on a white background. Our eye establishes the
white as the background and the black text as the foreground. It is easily seen Contrast
and read.
The low contrast example makes the text look less obvious and more subtle. This
make readability an issue, but can also make for great subtle messages when
you don’t want your text to be the first thing that stands out.

Contrast can help sell.

In some cases, contrast can increase the
effectiveness of an ad, such as a social media ad
(see right). The ad on the right will produce more NIKE NIKE
AIR MAX AIR MAX
interest and clicks because of the higher contrast FAST
SPEED
FAST
SPEED

colors used for the promotion, the most important

part of the ad. JUST JUST
DO DO
POWER
IT. POWER
IT.
PERFORMANCE PERFORMANCE
Weight
Weight is just as important as contrast. You will notice that, even though
the black circle is only half the size of the lighter circle, it dominates the
space because it has a higher weight. This weight comes from the high
contrast it has against the white background.

This means that high contrast colors can help you decide which object is
heavier, therefore gaining the most attention in a design.
LIGHT HEAVY
Let’s change the colors. Now we have a higher contrast white color against
the darker beiges. This high contrast suddenly makes the larger circle more
dominant and heavier, while the smaller circle is barely noticeable.

LIGHT HEAVY

HEAVY LIGHT
Psychology of Color
Common Uses:
Social Media
Food & Beverage
Teen Brands
Education

disruptive
friendly
Common Uses:
Common Uses:
Social Media adventurous happiness
Food & Beverage Children & Youth
Fast Food enthusiasm Non- profit
Entertainment Cleaning Products
News Media bold
fresh youthful
outspoken power alarming warmth anxiety
strength energetic
spontaneous
confident abrasive
overwelming
anger
direct
dramatic fresh
love fertility
romance envy
Common Uses:
Common Uses:
Cleaning products
Youth Focused- & Services
Brands vibrance growth Organic Products
Feminine Brands Investing-
Beauty Industry
Companies
natural

compassion success
romantic
frugal
organic
charming
rebellious renewal
maternal peaceful
passion
comfort self-expression cleanliness
dignified experimental
sophistication
open
Common Uses: sincere productive Common Uses:
Technology
Healthcare
Technology
stability clarity Start-ups
adaptable subtle Social Services
Hospitality sadness Service Industry
Non-profit dedicated Bio-Tech
trust
non-threatening
Common Uses:
rational Banks
Technology independent
Healthcare
Social Media
Industrial
Transportation