Beruflich Dokumente
Kultur Dokumente
Infographics
Sign Up Now!
Join Over
45k+
Subscribers
your@emailaddress.com
Subscribe Now
pdfcrowd.com
pdfcrowd.com
sentence statement. But for content marketers, thats what it is. In an ocean of
content marketing, color can help yours stand out.
Color is a cue that gets your audience to see what you want them to see, feel
what you want them to feel, and to do what you want them to do. How you use
color also affects the usabilitywhether they can read it or notof your content.
Color can change your message. Choose poor color choices, and your great
content and your amazing call to action (CTA) are ignored. Even NASA is
concerned about color, enough so that theyve made online tools to help us pick
optimal color combinations!
pdfcrowd.com
pdfcrowd.com
Primary Color
Primary colors are the three colors we need to make all other colors. They are
red, blue, and yellow. These three colors can be used to create the next level of
colors, called the secondary colors.
pdfcrowd.com
pdfcrowd.com
proper new color. But lets keep this simple and stick with red, blue, and
yellow.
Secondary Color
Secondary colors are purple, green, and orange. They are created using the
primary colors. If you look on the color wheel, youll find the secondary colors in
between two primary colors.
red + blue = purple
blue + yellow = green
red + yellow = orange
pdfcrowd.com
Tertiary Color
Tertiary colors are taking secondary colors one step further. They are the twoname colors, such as red-purple, red-orange, yellow-green, etc. They are
created by adding more of one primary color than the other, creating not a true
secondary color but instead, one that is found closer to the primary color.
pdfcrowd.com
pdfcrowd.com
Pure Color
Primary, secondary, and tertiary colors, without the addition of white, black, or a
third color, are pure (or saturated) colors. They are intense, bright, cheery, and
untainted colors. These are the colors of childrens toys, daycare decor, and
summer clothes.
Tints
When white is added to a pure color, you create a tint. Some people refer to
these as pastel colors. They are lighter and paler than a pure color, and not so
intense. Tints range from slightly whiter to almost-white.
open in browser PRO version
pdfcrowd.com
Shades
When black is added to a pure color, you create a shade. These darken and dull
the brightness of pure colors, and range from slightly darker to almost black.
pdfcrowd.com
Tones
When gray (black + white) is added to a pure color, you create a tone. You often
hear people saying that a color needs to be toned down, meaning its too
intense and they want to drop the level of intensity. Adding black and white in
different amounts to a color subdues the intensity quickly.
pdfcrowd.com
Whew! So there we have it: a complete color wheel with primary, secondary,
and tertiary colors, plus their tints, shades, and tones. You can see how it all fits
together on the color wheel below.
pdfcrowd.com
On the left side of the wheel, in the blues and greens, you have cool colors. On
the right side of the wheel, in the yellows and reds, you have warm colors.
Now that you understand color theory and the color wheel, you can start to use
color purposefully in your content marketing.
Back To Top
pdfcrowd.com
Often, people assume a difference in color is what creates contrast, but that is
not true. You might have two colors that are different, but they have no contrast.
Their tone is the same.
pdfcrowd.com
Colors, in their pure form, have inherent differences in how light and dark they
are.
Yellow is bright, for example, while blue is darker. Red and orange have little
contrast with each other, despite being different colors. When different colors
have the same tone (level of gray), they will not have much, either. It isnt
open in browser PRO version
pdfcrowd.com
enough to simply pick two different colors when making decisions about
contrast.
pdfcrowd.com
Back To Top
pdfcrowd.com
Complementary colors are opposite colors. They are opposite of each other on
the color wheel, meaning the one color they lack is that one opposite of them.
They are geographically and color-wise the opposite. They provide a kind of
visual tension because they are so opposed to each other.
Blue is the opposite of orange.
pdfcrowd.com
Opposites attract! When the human eye sees a painting full of different kinds of
greens, any bit of red is going to stand out amazingly well. Why?
open in browser PRO version
pdfcrowd.com
Red is the opposite color of green. When the eye has been looking at a lot of the
same color, it wants to see the opposite. Using complementary colors is the
easiest way to get something to stand out, but you have to use them carefully to
keep your content from being visually jarring. You dont want 50% orange and
50% blue, for example, because neither color wins and it makes eyes hurt.
Lets look at the CoSchedule homepage as an example. What colors do you
see?
Its mainly orange, but our most important button, the Try It Free button, is
blue. Blue is the opposite color of orange. In a sea of orange, your eye is going
to notice blue faster than any other color. We also used low contrast dark
orange on light orange to help make that blue button stand out even more.
pdfcrowd.com
If you want to use three colors instead of just two, using split complementary
color schemes is a way to capitalize on the power of complementary colors but
add a third color to your palette. To use it, youll choose one color as your base
color, and then the two colors adjacent to its opposite.
A split complementary color scheme doesnt have quite the same level of tension
that a complementary color scheme does, but its still visually exciting for your
eye.
A word of caution about accessibility: red and green, two
complementary colors, present a sticky problem. Some people are colorblind and cannot distinguish between certain colors, and red and green are
open in browser PRO version
pdfcrowd.com
blind and cannot distinguish between certain colors, and red and green are
a common problematic combination. Colors with heavy amounts of red and
green in them get bungled up, too. Did you know that Facebook is blue
because Mark Zuckerberg is red-green colorblind? He sees blues the best.
pdfcrowd.com
pdfcrowd.com
are even more soft and subtle than analogous, being a color palette based on
one single color. Monochromatic colors work great when paired with a single
complementary color. On the CoSchedule website, we use monochromatic
orange colors with blue for the content we want noticed.
Most designers, when using complementary colors, pair a rich collection of
monochromatic colors with a single complementary color.
pdfcrowd.com
palettes isnt difficult. All you need is a triangle, rectangle, and a square.
A triangle (triad) is a color combination made of three colors that are evenly
spaced around the color wheel.
A rectangle (tetradic) is a color combination made of four colors that are made
up of two complementary pairs.
A square is similar to a rectangle palette, but the two sets of complementary
pairs are colors evenly spaced around the circle.
These three combinations can be visually noisy if youre not careful. The best
application is to use one color as the dominant color, and the others for
open in browser PRO version
pdfcrowd.com
application is to use one color as the dominant color, and the others for
highlighting content. The triangle combination is particularly vibrant; three is a
stable number and using three colors is visually stabilizing.
Back To Top
pdfcrowd.com
to a large cross-section of people, with each color having negative and positive
emotions associated with it.
pdfcrowd.com
pdfcrowd.com
In a survey, people were asked to choose the color they associated with
particular words.
Trust: Most chose the color blue (34%), followed by white (21%) and
green (11%)
Security: Blue came out on top (28%), followed by black (16%) and green
open in browser PRO version
pdfcrowd.com
(12%)
Speed: Red was overwhelmingly the favorite (76%)
Cheapness: Orange came first (26%), followed by yellow (22%) and
brown (13%)
High Quality: Black was the clear winner (43%), then blue (20%)
High Tech: This was almost evenly split, with black the top choice (26%)
and blue and gray second (both 23%)
Reliability: Blue was the top choice (43%), followed by black (24%)
Courage: Most chose purple (29%), then red (28%), and finally blue
(22%)
Fear/Terror: Red came in first (41%) followed by black (38%)
Fun: Orange was the top choice (28%), followed closely by yellow (26%)
and then purple (17%)
Blue is clearly a color people are positively drawn to, but beyond that, little else
can be said.
Depending upon the context of the rest of your content, black can mean high
quality and trust, or it can mean fear and terror. It cant do it on its own, but
surrounded by your content, a color choice can bump up your intended meaning
a notch.
pdfcrowd.com
pdfcrowd.com
Joe Hallock Eskimos use 17 words for white as applied to different snow
conditions, where in the Northwest United States there are only 4 or 5.
Every culture understands a color differently. It has a role to play in religion,
politics, ceremony, and art. The culture your audience is in affects how they
understand deeper meanings of color. Even the context you use the color in
affects the meaning of color. For example, in India, red means purity, while in the
U.S. it denotes passion and specific holidays.
Back To Top
pdfcrowd.com
pdfcrowd.com
pdfcrowd.com
According to the Institute for Color Research, people make a judgment about
your content in 90 seconds or less. And, up to 90% of that judgment in that brief
amount of time is influenced by the colors they see. Blogger Neil Patel gives
further proof of how colors affect your conversion rate, revealing that 85% of
consumers base buying decisions on color, and that full-color ads in magazines
get recognized 26% more often than plain old black and white ads.
In fact, color helps people recognize your brand by up to 80%. Its important to
choose your color carefully, and stick with it.
pdfcrowd.com
pdfcrowd.com
Graphic from the Buffer blog. Why Facebook Is Blue: The Science Of Colors In Marketing by
Leo Widrich
When it comes to getting people to click a button or sign up, its not a question of
which color is magic and makes it happen all the time. Its a question of passive
and active colors, of high and low contrasts, and of opposites, like our
CoSchedule example where the blue button stood out from the orange.
And its a question of which color tested best for you.
Back To Top
pdfcrowd.com
The color combination of orange and blue is a powerful one. Its fairly safe in
respects to color blindness, and repeatedly gets favorable marks by people as a
combination.
But is it enough to just pick a great combination?
Not at all; you need to know how to use those colors individually. Lets look at
CoSchedule and our Facebook promotions as an example. We created two
designs, one with a blue background, and one with an orange background.
pdfcrowd.com
The promotion with the orange background made people six times more likely to
click than the blue background! It made sense, though. Think about Facebook. It
is a predominantly blue network, and so our orange image stood out more than
our blue image did.
This doesnt mean that orange is the color you must use. It means we tested our
two colors and found that orange worked the best for us. You must do your own
testing. You need to find out if your red button beats your green button (as
Hubspot discovered) on your own. The color of the rest of the page, your
content, and the placement objects will make your results different from what
someone else has discovered.
pdfcrowd.com
audience will respond to your colors in your content and layout without creating
thoughtful A/B tests to determine which color combinations and placements
generate the most leads and traffic in your content.
pdfcrowd.com
4 Lessons From Psychology That Will Help You Grow Your Blog
Content Marketing
16 Comments
Recommend 5
CoSchedule
Share
Viktoriya Zakharova
a month ago
pdfcrowd.com
Reply Share
Christy Harvey
3 months ago
Outstanding! This is the exact information I've been wondering about. Thank you for sharing this complex s
clear, simple way.
Reply Share
Fern
3 months ago
Wow! I really appreciate this well-written and in-depth article on color psychology. Lots of great take aways
Reply Share
Rana Campbell
4 months ago
Reply Share
Nic Hughes
4 months ago
Reply Share
Nathan Ellering
Mod
Hey @Nic Hughes, we really appreciate that! Thanks for reaching out. And if you're interested in e
stuff about psychology and marketing, this recent post may be right up your alley:
http://coschedule.com/blog/how....
Integraphix
Reply Share
4 months ago
Love the easy breakdown of the color choices and color psychology! As a Chicago marketing agency bran
open in browser PRO version
pdfcrowd.com
Penny
Reply Share
5 months ago
Reply Share
Nathan David
5 months ago
Reply Share
Sean
7 months ago
- this isn't correct. It's been known to not be correct since the 19th century. Red and Yellow make an okay
but if you mix purple or green from the above, you will have atrocious, muddy, grey colours. People who m
from these 'primaries' often find themselves having to add purple and green from bottles to keep their colou
Cyan, Magenta, and Yellow are better primaries. You can make Blue from Cyan and Magenta, and Red fro
Magenta and Yellow. That proves these colours to be secondary.
Reply Share
7 months ago
Hi Sean,
open in browser PRO version
pdfcrowd.com
It's definitely true that color mixing varies. Cyan, Magenta, and Yellow are the colors used when talk
light and also in some printing scenarios (if you add in black for CMYK). RGB is familiar to designer
work on the web with monitors, etc. As a painter, I know that the kind of green and the kind of red m
difference. Phthalo blue with cadmium yellow medium, for example, will give you more of a turquois
true green. Alizarin crimson and phthalo green make the perfect black. Ultramarine blue might be th
pigment to use as your mixing blue as long as the paint company didn't dilute it with black or other f
crimson is probably the better choice than a cadmium red, which tends to veer towards orange. An
It really depends on what medium you are using when deciding what to use as your primary. I see i
your other comments on other blogs that talk about color that you mention the blame cheap paints
fillers) have received and don't necessarily agree that that is the case. However, if you've ever take
paint and begun mixing white in with it bit by bit, you can start to see evidence of graying or other fill
was used. So that does have a role to play. It does matter what blue, red, or yellow you use. There
many pigments out there. A cyan or cerulean blue will give you a particular kind of purple, but an ult
will give you another. Understanding that the family of blue, in general, is the primary is the goal. Wh
you choose makes a difference in what kind of secondaries you will end up with.
The idea with this post, though, is not to use it necessarily as a color mixing guide, but as a way to
see more
Dante
Reply Share
9 months ago
Thank you for the 'colorful' insights. ;) I really like how the basics were spelled out kudos! I definitely agre
selecting appropriate and contrasting color combinations for context and audience are an integral part of g
design.
But I will play devil's advocate; as stated in the article, "The psychological impact of color is subjective. We
react the same way to colors." As a designer, I take these color meanings with a grain of salt because of c
subjective nature. IMHO it's far more important HOW colors are used than the color itself.
open in browser PRO version
pdfcrowd.com
So in the FB promo and A/B example, the orange version was attributed with 6x higher click thrus. I'm goin
a hole in that conclusion because it's more likely that the design LAYOUT of the blue version wasn't as stro
orange:
-typography, contrast, spacing: there is a clear hierarchy and contrast of importance of the text and visual
in the orange version, plus the calendar graphic is much smaller and allows for balanced spacing in the lay
the blue version, all the elements and text barely contrast or stand out from each other they're competing
importance, plus the enlarged calendar bunches up all the visual elements creating a busy layout.
Just my humble opinion...
Reply Share
Garrett Moon
Mod
Great thoughts, all of those things certainly play a part. With those two ads, though, everything was
much the same other than the background color. We also saw identical results with pop-up ads, w
banners, and Twitter Ads. Somethings the color just makes the difference.
Reply Share
ExtraCashOnline
9 months ago
Reply Share
Nandini Jammi
10 months ago
Reply Share
Anastasia
open in browser PRO version
a year ago
pdfcrowd.com
Amazing summary. You helped me a lot with these contrast colors. Will test them too!
Subscribe
Reply Share
Privacy
pdfcrowd.com
pdfcrowd.com