LANDING PAGE DOMINATION
THE
COLOR
PSYCHOLOGY
GUIDE
FOR LANDING PAGES
BY ROHAN SAPRA A.K.A LANDING PAGE NINJA
ra
an Sap
Roh
More Than Just a Marketer!
EXCLUSIVE BONUS FOR VIP MEMBERS
COPYRIGHT 2021
[Link]
WELCOME!
What if I told You that the color scheme &
aesthetics of your landing page is one of the
biggest contributors to your overall conversions.
In this Quick PDF Guide, I have shared all my tried
& tested color schemes.
I have invested a lot of my own money on trying
different colour combinations for CTA buttons,
background images, text colour, colour highlight
and what not!
What you may not have realised is that this color
psychology is used by all the big brands. Every
single one of them.
Marketing is all about understanding human
behaviour. If you get that right, you will never fail!
ra
an Sap
Roh
More Than Just a Marketer!
COPYRIGHT 2021
6 MIND-BOGGLING FACTS
YOU NEED TO KNOW
COPYRIGHT 2021
6 MIND-BOGGLING FACTS
YOU NEED TO KNOW
FACT #1:
77% OF THE WORLD'S FLAGS CONTAIN THE
COLOR RED!
FACT #2:
2/3 OF CONSUMERS WILL "NOT" BUY A
LARGE APPLIANCE IF IT DOES NOT COME IN
THEIR PREFERRED COLOR!
FACT #3:
HUMAN COLOR PREFERENCE BEGINS AT 12
WEEKS OF AGE!
FACT #4:
THERE ARE ONLY 3 PRIMARY COLORS:
RED, YELLOW & BLUE!
FACT #5:
STUDIES HAVE SHOWN THAT 90% OF THE
SNAP JUDGEMENTS ARE INFLUENCED BY
COLOR ALONE!
FACT #6:
FIRST COLOR THAT WE DISTINGUISH
AFTER BIRTH IS COLOR RED. HOWEVER,
COLOR BLUE IS THE MOST FAV ONE!
COPYRIGHT 2021
THE EMOTIONAL TRIGGERS
THROUGH COLORS
COPYRIGHT 2021
THE EMOTIONAL TRIGGERS
THROUGH COLORS
When was the last time you made a
logical purchase? Think about it!
Get this - People buy out of emotion.
Even I do!
To pick the right color combinations
for your landing page, you should be
well aware about the emotional
triggers that colors can cause.
Let's have a look at what emotions
can the most commonly used colors
possibly trigger...
COPYRIGHT 2021
RED ORANGE
EXCITEMENT CONFIDENCE
STRENGTH SUCCESS
LOVE BRAVERY
ENERGY SOCIAL
POWER CREATIVITY
AMBITION ADVENTURE
EXCITING VISIONARY
ALERT FUN
ROMANCE FRIENDLY
URGENCY AMBITION
PASSION CHEERFUL
DANGER WARM
PINK PURPLE
COMPASSION ROYALTY
SINCERITY LUXURY
SWEET AMBITION
LOVE SPIRITUAL
PLAYFULNESS MYSTERY
FEMINITY IMAGINATION
WARMTH INSPIRING
KINDNESS UPLIFTS
ROMANCE ENCOURAGE
CALM FANTASY
COMFORT WISDOM
INNOCENT CREATIVITY
COPYRIGHT 2021
YELLOW GREEN
CREATIVITY NATURE
HAPPINESS HEALING
WARMTH FRESHNESS
CHEER QUALITY
OPTIMISM GET-GOING
POSITIVITY GROWTH
INTELLECT MONEY
INSPIRING FRESHNESS
JOY SAFETY
ENERGY RELAXATION
SELF-ESTEEM TRUST
FRIENDLY HOPE
BROWN BLACK
DEPENDABLE FORMALITY
RUGGED SECURITY
SIMPLICITY DRAMATIC
COMFORT EXCLUSIVE
SUPPORT LUXURY
STABILITY PRESTIGIOUS
NATURAL BOLD
HONESTY POWER
NEUTRAL MYSTERY
LONGEVITY ELEGANCE
OUTDOORS SECRET
EARTHY GRIEF
COPYRIGHT 2021
BLUE WHITE
LOYALTY PEACE
TRUST CLEAN
COMPETENCE SIMPLICITY
INTELLECT HONESTY
SINCERE INNOCENCE
SPIRITUAL LIGHT
IDEALISTIC HOPE
INTEGRITY FRESHNESS
CALMNESS PURE
AFFECTION LUXURY
STRENGTH CLARITY
SUCCESS SPACIOUS
COPYRIGHT 2021
THE EMOTIONAL TRIGGERS
THROUGH COLORS
While there is more in-depth study
on a particular emotion that a color
may trigger, for now, this is more
than enough for you to understand
on how to pick your color scheme or
color theme of your landing page.
Let's now dive into the specifics of
different color combinations that's
proven to work, in context to text,
logo, CTA and background images
for your LP.
COPYRIGHT 2021
PROVEN COLOR COMBINATIONS
FOR LANDING PAGES
WITH HEX CODES
COPYRIGHT 2021
PROVEN COLOR COMBINATIONS
FOR LANDING PAGES
The best way to begin is to pick a color
combination or scheme and then
tweak as you progress.
I know this process can really become
overwhelming for some and is why I
created this PDF guide to help you
follow a proven process.
Here's how to start:
Start by picking up 3 primary color for
your LP. One for Background Image,
One For Text and One for CTA (Call To
action).
COPYRIGHT 2021
PROVEN COLOR COMBINATIONS
FOR LANDING PAGES
BACKGROUND IMAGE:
The idea of having a LP is to make your
product and content stand out.
After trying various combinations specifically
for background images, I can tell out of
experience and data that dark background
images work better, hands down.
TIP - Use the background overlay option of
elementor to add a color overlay on your
background image of your LP (Shared inside
the workshop).
COPYRIGHT 2021
PROVEN COLOR COMBINATIONS
FOR LANDING PAGES
TEXT:
This may surprise you, but after doing
countless reviews and building quite a few
high converting landing pages, I see this to
be a challenge area too.
Here's a solid tip:
Follow a standard rule - Dark background
means white text and light or bright
background means black text.
Now, to add multi-color text in your LP, play
with the color combination of what matches
to your CTA and/or logo.
COPYRIGHT 2021
PROVEN COLOR COMBINATIONS
FOR LANDING PAGES
CALL TO ACTION BUTTON :
This is where you should try and use a bright
color.
Why a bright one?
Because it helps you in making your CTA
button stand out (clearly visible).
Please keep same CTA button color
throughout a specific page of your landing
page.
Whatever color you choose for your CTA,
that's what you can also use for your
secondary text (words you want to highlight)
in case you are using multi-color text in a
single statement/paragraph.
COPYRIGHT 2021
11 COLOR COMBINATIONS
FOR LANDING PAGES WITH HEX CODES
COPYRIGHT 2021
COLOR COMBINATION: 1
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #1D2825
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #FF6100
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #FF6100
SECONDARY COLOR: #FF6100
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 2
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #10141D
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #FBCD11
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #3484D8
SECONDARY COLOR: #FF6100
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 3
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #082838
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #6FE394
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #6FE394
SECONDARY COLOR: #FF6100
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 4
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #2E3132
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #6FE394
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #459FE3
SECONDARY COLOR: #6FE394
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 5
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #0B334A
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #F1A60C
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #F1A60C
SECONDARY COLOR: #6FE394
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 6
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #003179
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #E84D35
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #E84D35
SECONDARY COLOR: NONE
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 7
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #003179
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #E84D35
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #E84D35
SECONDARY COLOR: #ED5434
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 8
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: WHITE
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #FF3069
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #FF3069
SECONDARY COLOR: NONE
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 9
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #512C7B
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #FFD528
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #FFD528
SECONDARY COLOR: NONE
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 10
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #34240D
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #FFD528
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #FFD528
SECONDARY COLOR: NONE
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
COLOR COMBINATION: 11
FOR LANDING PAGES WITH HEX CODES
BACKGROUND IMAGE OR
OVERLAY HEX CODE: #1C2323
The background color you see on this page is
the one with this hex code above.
PRIMARY TEXT: WHITE
SECONDARY TEXT: #23E163
The hex code here is what this color looks like.
CTA (GRADIENT):
PRIMARY COLOR: #23E163
SECONDARY COLOR: NONE
The hex codes here are how these color look
like. When you add a gradient effect to a CTA,
try using this combination shared above.
COPYRIGHT 2021
THE END
THE ONLY DIFFERENCE BETWEEN A
WINNER AND A LOSER IS "CONSISTENCY"
IN IMPLEMENTATION.
ra
an Sap
Roh
More Than Just a Marketer!
EXCLUSIVE BONUS FOR VIP MEMBERS
COPYRIGHT 2021
[Link]