Color Psychology Book Alterspark 25 42347951

COLOR
PSYCHOLOGY
FOR UX, DESIGN AND MARKETING
Published 20 April 2019.

2nd Edition 14 Jan 2020.
www.alterspark.com | team@alterspark.com
TABLE OF CONTENTS
1. Introduction 1
2. Color theory 2
1.1 The color spectrum 2
1.2 How humans perceive light 3
1.3 Cultural color categories 5
1.4 Rods, cones, and color perception 5
1.5 What's a color wheel 6
1.6 Color models and primary colors 8
1.7 Some key color terms 11
3. Applying science 14

4. Color schemes 15
1.8 Calm combinations 16
1.9 Stressed combinations 17
5. Meaning of color 20

1.10 Culture and color perception 20
1.11 Learned associations 21
1.12 Applying emotional associations 22
1.13 Applying cognitive associations 23
6. Colors and emotions 23

1.14 Two approaches to emotion 24
1.15 Three emotional dimensions 24
Arousal 24
Pleasure 25
Control 25
1.16 Four motivational quadrants 26
Optimistic: High-arousal, pleasurable emotions 27
Pessimistic: Low-arousal, painful emotions 28
Insecure: High-arousal, painful emotions 29
Secure: low-arousal, pleasurable emotions 30
1.17 Emotional transitions with a splash of color 30
1.18 Using color for emotional design 32
7. Visual hierarchy 34
www.alterspark.com | Page ii
1.19 Controlling user attention 34
1.20 Visual hierarchy 35
1.21 Guiding users with strong signals 35
1.22 Color palettes with salient hierarchies 36
8. UI color psychology map 38

1.23 How the UI Map works 39
1.24 Calibrating a color hierarchy 40
1.25 How we build color systems 40
1.26 Accessible colors 41
9. Author's final words 41

10. Acknowledgements 42
11. Creative Commons licence 42
12. Bibliography 43
www.alterspark.com | Page iii

YOUR FEEDBACK ON THIS BOOK
Dear Reader,
This is my first full publication written to help psychology-inspired designers and marketers, use color
to achieve deeper impacts.
This book is a work in progress, so if you spot any rough parts, or have any feedback on how I can
improve it, let me know.
While writing, I felt like I had found my author's' voice! If you have any thoughts on my editorial tone, I’d
be very grateful to hear your thoughts.
We have further chapters in mind, so let me know if any of these subjects sound interesting:
 Accessible design principles
 AAA and AA contrast rations and color strategies
 Synthesizing credible color association research
 Sharing color palettes and Bootstrap SCSS instructions
 More associative memory system content
And if there is any part that you would like to see more or less of, let me know.
I look forward to hearing from you.
Enjoy.
Brian
brian@alterspark.com
P.S. If you want to connect on social media, just google me and link up.
www.alterspark.com | Page 2
FORWARD
Before we get into the content, I wanted to explain what went into this book and our scientific
approach.
The team and I put together this visual guide to help our students better understand some of the
technical issues that underpin color psychology. However, the subject is more complicated than it
needs to be, because of inconsistent jargon, poor visual learning aids, inconsistent scientific findings,
and an Internet full of ridiculous claims about the magic impacts of color on emotion.
These are some of the challenges that me and the team wanted to overcome:
Simplifying the terminology

If you’ve ever taken a crack at understand the basics of color perception and found yourself
overwhelmed by seemingly simple concepts, there may be a good explanation for that. The technical
literature is ridiculously inconstant. For example, you might find multiple terms used to express the
exact same concept. So once you start to grasp a particular concept, you might read another
reference, the language shifts, and suddenly you feel like you’re just not getting it.
In this book, we’ve listed the most commonly used terms to help you follow the shifting jargon.
Building consistent scientific color models

As a teacher, I struggled to teach color psychology for the simple reason that I was unable to find a
single source of images that consistently explained the key concepts. During the process, I realized
that many of the textbooks and online sources reuse color theory images from different sources, which
is why you’ll frequently see that the scales change, color direction changes, hue examples, and more.
It’s hard to learn a new subject when the thing you’re studying changes from lesson to lesson, diagram
to diagram.
With this guide, we’ve built an entire color system from the ground up that consistently explains the
concepts, and shows you how the concepts relate through a unified set of consistent images.
Replacing universal color claims with population-level trends

Perhaps my student’s biggest challenge with this subject is getting past the mountain of misleading
online content that makes claims such as red triggers anger because it’s the color of blood. Blue is
calming because it’s the color of water. The problem is that most of these claims come from people
who are drawing on nothing more than their gut instinct. And to make matters worse, scientists
sometimes come to similar conclusions based on empirical studies. So this pretty much creates a
messy situation, where it’s difficult to contrast witchcraft from evidence.
To help you avoid the nonsense, and make informed decisions, I’ll explain some of the core concepts
in color psychology that are relevant to color preference in specific populations, covering culture,
learned associations, and more.
Replacing dogmatic design with expert judgement

Many of the online color guides make baseless claims about universal color impacts, and then offer
dogmatic prescriptions about how to use the color. Red is passion, so use it to create energy. Red is
danger so don’t use it. Red always draws higher clicks, so make all your buttons red. Unfortunately, the
world is not so simple, and it’s a bit risky to follow dogma from people who invent pseudoscientific
claims.
To help you develop your own opinions, I’ll go over the science and then share my personal design
philosophy and experience with different applications. This book builds toward my ultimate tools, the UI
color psychology map, which I use to help my students understand how to apply color strategically and
to balance between multiple competing factors.
Clarifying unclear science

One of the biggest challenges in learning color psychology is that scientific sources typically report
impacts based on color qualities such as nanometers of light, hue, chroma, saturation, and tint. It's
hard to interpret the findings without seeing the results. Color is a visual thing, and it’s easier to
understand the principles when you look at charts with the actual color qualities, rather than read that
650 nanometers is a wonderful section of visible light for boosting arousal.
To help you understand some of the key scientific findings, we’ve translated a few studies from
technical color metrics into simple charts on the color spectrum.
1. Introduction
When it comes to the strategic use of color in interactive design, wouldn’t it be great if more of your
strategies were more evidence-inspired, rather than HiPPO-imposed (outranked by the Highest Paid
Person's Opinion), or ZEBRA-bullied (intimidated by someone with Zero Evidence But Really Arrogant).
Wouldn’t it be nice if you could select colors that make your technology more intuitive, evoke the right
emotional tone, and simplify your visual communications?
These would be great things, but from my experience, there are several barriers that stop digital media
pros from using color strategically.
Perhaps the first barrier is figuring out how to tell the difference between hard-science and witchcraft.
There are mountains of baseless infographics and blogs making claims such as “red means anger”,
“green symbolizes envy”, and so on. However, at the same time, credible scientists produce papers that
say similar things. So, who’s telling the truth?
Perhaps the second largest barrier is too much information that is highly technical, and extremely
detailed about how color perceptions works. These sources tend to get hyper-focused on details such as
the anatomy of the eye, or the physics of light refraction. The normally stop there, and don’t look at
applications.
The third, and possibly the worst barrier is the lack of consistency in color theory. The terms shift from
context to context, and so do the primary colors, and color wheels. You think you understand it in one
setting, then the terms shift, the color wheel shifts, now the primary colors are different, what the heck.
In an attempt to overcome some of these barriers, in this book, I’ll explain the key concepts in light and
color perception, go over psychological explanations for cognitive and emotional associations to color,
and then get into strategic applications for interactive design, UX and marketing.
We hope you find it helpful.
2. Color theory
Let's start out by covering the basic concepts from physics and biology. The physical sciences part
explains how we define and measure light, while the biological part explains how our eyes convert light
into signals that our brain interprets as color.
1.1 The color spectrum

I’m sure that at one point in your life, you asked the question, “Where do rainbows come from?” Well, you
see, rainbows appear when visible light is broken apart by water droplets that bend sunlight and split it
into different wavelengths. This process is called refraction, which describes when light passes through a
medium such as water, and then bends, breaks apart, and slows down.
The same thing happens in a glass prism, as shown in Figure 1 When visible white light passes through
a prism, it bends and breaks into a haze of light that splits into all sorts of wavelengths, which our eyes
perceive as all colors in the visible light spectrum.
Figure 1. Visible light breaks into different wavelengths as it bends in a glass prism
In other words, the rainbow you see in the sky, or emerging from a Floydian glass prism (Waters,
Gilmour, et al., 1973), is the full spectrum of visible color that we humans can see. It's what we call the
color spectrum, or the visible light spectrum. You may have noticed that rainbows don’t have colors such
as pink, brown, grey, and a few others. I’ll explain that oddity later.
The visible light spectrum that we see is part of a larger continuum of electromagnetic energy. Figure 2
puts this into perspective by showing you the part that humans can see from 400-700 nanometers, which
is what we call visible light. Infrared is just beyond red, and ultraviolet is just below purple.
If we go way beyond the visible light spectrum, we use different names to describe electromagnetic
energy as follows: gamma rays, x-rays, ultraviolet light, visible light that we can see, followed by infrared,
microwave, radio waves and higher.
Gamma rays | X-rays | Ultraviolet | Visible light | Infrared | Microwave | Radio
Figure 2. Light waves from low to high
1.2 How humans perceive light

Now let’s look at the way light gets converted to colors. When visible light hits something, some of the
light gets absorbed, but some of it reflects off. When we look at something, what we see is the light that
bounces off of it.
When light enters our eyes, photosensitive cells called cones and rods interpret the light and send
signals to our brain. The rod cells interpret light and darkness (black and white), while the cone cells
interpret three different wavelengths which our brain interprets as color.
Our eyes have around 120 million rods, which are light-sensitive cells in the retina. Rods are highly
sensitive to brightness, and react to differences in brightness, from dark to light. If you’ve ever struggled
to find your pants in a darkened bedroom, you’ll find yourself adjusting to the lack of light, fumbling away,
making a mess tripping over yourself. What’s happening in this situation is your rods are distinguishing
between light and darkness, only giving you enough black and white vision to get things done, well sort
of.
When it comes to color, our eyes also possess 6-7 million cones, the color sensitive cells. Cones are
responsible for high resolution color perception, but they’re not as sensitive to brightness, which is why
it’s so difficult to see color in the dark. There are three types of cones. They are short-wavelength (blue
cells), middle-wavelength (green cells), and long-wavelength (red cells).
For simplicity, I’ll refer to the different cones by their color name, rather than wavelength sensitivity. But
don’t get confused by this, as the irony is the red cones have nothing to do with the color red. They
respond to wavelengths that our brain interprets as red. There’s nothing red about the red cones. It’s all
in the brain.
Figure 3 shows where the red, green and blue sensitive cones interpret different wavelengths as color. As
different wavelengths stimulate our color-sensitive cones in different proportions, our brain interprets
those signals as color.
Color does not exist outside of our brain—it’s just an interpretation of electromagnetic energy. What’s
interesting is that depending on what animal you happen to be, you’ll perceive color (wavelengths)
differently.
If you happen to be a dog, with only two cones, you’ll see fewer color distinctions on the spectrum.
However, if you happen to be a bird with four cones, there’s a good chance you’ll be able to see
ultraviolet light too. But if you’re lucky enough to be a mantis scrimp, researchers believe you heave so
many cones that you see the world as some sort of ultra-trippy color-extravaganza. There are big
scientific debates on how trippy, or how underwhelming, the mantis shrimp’s vision is.
Figure 3. Red, green and blue cones and the perception of visible light
1.3 Cultural color categories
I don’t want to be the one to break it to you. But… technically your parents lied to you about the colors of
the rainbow. And technically, the rainbow song is a bit of a scam too.
The issue here is that red is not “red” per se, as an absolute universal truth. Rather, the word “red” is just
a vocal utterance that your culture uses to describe an arbitrary cut-off point on the color spectrum.
So instead of “red, and orange, and yellow and green…”, the rainbow song could have just as easily
gone “670, and 605, and 575 and 535…these are the wavelengths of the rainbow”.
Figure 4 shows the color words that people typically use in English, when referring to different
wavelengths. In my culture, we use the word “red” to describe 635-700 nanometers on the visible light
spectrum. However, researchers show that people from other cultures, who speak different languages,
can refer to different ranges wavelengths when referring to a similar color word.
Figure 4. Cultural words for color based on arbitrary wavelength ranges
The point here is that color words are arbitrary, and there is nothing objective about our color words.
Clearly, it’s time to upgrade the age-old philosophical question, “do you see red like I see red?”, to a
cultural version of “do they see red like we see red?” The scientific answer to this question is “No.”
Cultures see colors according to their linguistic norms, and this impacts how they perceive the color. I’ll
get back to this later.
1.4 Rods, cones, and color perception

Now let’s look at how the cones in our eyes send signals to our brain, that interprets those inputs as
color. When you look at an object, the combination of color sensitive cones that are stimulated creates
the message that our brain interprets as color.
I created a simple shorthand to exemplify the concept, with cone color referenced as (B, R, G) and -/+ to
signify if the cone gets stimulated or not.
Imagine that you’re looking at a computer screen. Light at different wavelengths reflects into your eyes
and your cones respond to the different wavelengths.
If an image on screen stimulates your green and red sensitive cones but [B-, G+, R+] = Yellow
doesn’t stimulate your blue cones, your brain will interpret that
combination of signals as yellow.
Stimulate the blue and green cones only, and you experience cyan. [B+, G+, R-] = Cyan
Stimulate all the cones at once, and you experience white. [B+, G+, R+] = White
Turn off the light so no cones get stimulated, and you experience black. [B-, G-, R-] = Black
1.5 What's a color wheel

If you’ve ever wondered what the color wheel is and where it comes from, here it is in simple terms.
A color wheel is a light spectrum, spun in a circle, closing back in on itself. It’s what you get when you
connect one end of the color spectrum to the other. It’s also what you get when you build up a color
system from its primary colors. However, you won't find pink, brown and a few other colors in color
wheels.
The color wheel in Figure 5 shows the color spectrum in our system, starting with Violet and moving to
Red at the top of the spectrum. You’ll find the cool colors on the right, and warm colors on the left.
There’s one odd color you’ll see in the color wheel, which we called Red-violet, otherwise knowns as
magenta, made famous for its role as “M” in CMYK. Red-violet doesn’t exactly exist on the spectrum per
se, as it’s a combination of wavelengths at opposite ends of the visible light spectrum.
Red-violet is a non-spectral color, because you can’t directly see it on the spectrum. Other non-spectral
colors include black, white, grey and colors that are made by blending spectral colors with non-spectral
colors such as pink and brown, plus metallic effects are non-spectral.
Since red-violet combines light in the upper and lower ends of the spectrum, it’s not possible to place it
on a linear map of color wavelengths, since it’s both low and high at the same time. Since red-violet is a
bit like red in some studies of color and emotion, I’ve placed it on the top of the color spectrum in some of
our visualizations.
One extremely important final point. I’ve never seen Schrödinger's cat, but as we know from quantum
mechanics Schrödinger's cat is both alive and dead at the same time. Given existential dualism, a priori,
it stands to reason, therefore, that Schrödinger's cat is red-violet too.
Figure 5. Color wheel
1.6 Color models and primary colors
Why is the sky blue? Why is grass green? To be honest, the answer is going to be boring. So instead, I
can tell you that blue and green are primary colours. Primary colors are colors that can be combined to
build all other colors in the color spectrum.
What’s a common source of confusion, is that there are different primary colors, for different color
models, and depending on whether you use pigments or light, the colors will combine in different ways.
Let’s put this into the bigger picture by looking at how different color models work. In Figure 6, you’ll find
the three most common color models: RGB (red, green, blue), CMYK (cyan, magenta, yellow, black) and
RYB (red, yellow, blue). For practical purposes, I’ll ignore the K in CMYK, because it’s used in print to
ensure that black is black. But for this discussion, we can call it simply CMY.
RGB Light CMYK Print pigment RYB Paint pigment

Additive Subtractive Subtractive
Figure 6. Primary colors from three color models
Additive and subtractive

There are two ways to combine colors. First, by merging colored light, and second, by merging colored
pigments. Among the color models in Figure 6, the one additive model builds colors by adding light, while
the two subtractive models build colors by subtracting light.
Building color by combining light is called additive because you’re adding colored lights together. As you
add more and more colored lights, the overall color gets whiter and whiter. Add red and blue, and what
you get is violet, but it's a washed-out lighter violet. Add green to the mix, and now you've hit white
because you've now covered all visible light waves.
Subtractive color combinations work the opposite way, by removing light. However, this concept is a bit
complex and philosophical, so I'll take you through some examples before explaining it.
When we see a green leaf, what we're seeing is the green light that reflected off the leaf. Or you could
say we're seeing the green light that was not absorbed by the leaf. In other words, the leaf is absorbing
red and blue light, so only green light bounces off of it. Or put another way, the green leaf is subtracting
red and blue from the visible light, which means there's only green light left to reflect off of it.
So when we look at the tree and see all those leaves, what's happening is those leaves are subtracting
all visible light, except green.
EPISTEMOLOGICAL RAGE
I need to get something off my chest, that’s always bothered me. I don’t think it’s right to say something
has a certain color, when in fact, it reflects that color.
Think about it. A green leaf technically appears green because it rejects green light, which bounces off
of it. So technically, the green leaf isn’t even green. Perhaps it's just me, but I don’t understand how we
can justifiably ascribe color to anything that doesn’t even absorb that color’s electromagnetic energy.
What the heck?
Shouldn't absorption of the relevant wavelengths be a prerequisite for qualifying something as

possessing a color? If people say I'm green, but I don't absorb green light, how can I claim to be
green? That's ridiculous.
The only reasonable solution here is to fix human communication by adding the prefix "non" to all
colors, so green shalt henceforth be called non-green, red shalt be non-red, and hot-pink-with-a-
splash-of-ruby shalt be uttered non-hot-pink-with-a-splash-of-ruby.
Problem solved. That's enough philosophy, now back to science.
Let’s return to our discussion on subtractive colors, with an example of mixing paints using the RYB color
model. As you add more colored pigments, you suck up more and more light. The more colors you add,
the darker your colors get. This is because each color absorbs more and more light, leaving less light to
bounce off the paint.
Add the primary color red, and now you’re sucking up all the light except for red (because technically red
paint is NOT red, it’s just absorbing all other wavelengths except red). Next, add blue paint, and now
you’re sucking up every wavelength except red and blue. But now, it’s time to add yellow, and now we’re
sucking up every color except red, blue and yellow, which means we’re now absorbing all the visible light,
so our paint is now black.
Building other colors from primary colors

To illustrate how primary colors are used to derive all other colors, I’ll use RYB as an example. In Figure
7, on the left, you’ll see the three RYB primary colors red, yellow, blue.
In the middle, you'll see the secondary colors that are derived by combining the primary colors red and
blue to get magenta; blue and yellow to get green; and so on. On the right you’ll see the tertiary colors
that we derived by combining primary with secondary colors.
As the focus of this book is on digital psychology, I’ll stick to RGB which is better aligned with the way
vision works, and is more appropriate to applications on digital interfaces, which combine additive colors
via lights shone into our users’ eyes.
RYB Primary colors RYB Secondary colors RYB Tertiary colors

Derived from the primary colors Derived by mixing primary
and secondary colors
Figure 7. RYB primary, secondary, and tertiary colors
1.7 Some key color terms
Three of the key technical terms that help us understand the link between color and emotion are hue,
brightness, and saturation. In this section, I’ll describe them, and then show you how they are all related.
Hue
Hue is the term most people use to describe different colors, such as red, orange, purple and so on. Hue
is synonymous with wavelength most of the time, except for the non-spectral colors like pink and brown.
Brightness
One of the key factors in color psychology is the level of brightness in a color. You will also see
brightness referred to as ‘value’. It represents the quality of a color from dark to light, or when it comes to
pigments, how much black or white is in a color.
The three main terms used to describe brightness are shade, saturation, and tint, which are defined as
follows:
Shade
The shade describes how dark a color appears, as it moves from its vivid color towards black. As
a color becomes more shaded, it’s synonymous to having the lights slowly dimmed, till you can
only see black.
Saturation
Saturation describes how a color transitions from its most vivid appearance towards a grey
appearance. A highly saturated color is a vivid, pure hue. As we desaturate the color, it becomes
less saturated and starts to appear gray and washed out. Watch the jargon, as saturation is also
referred to as chroma and tone.
Tint
As the vivid color moves towards white, we have tint. It’s the opposite of shade.
To put shade, saturation and tint into a bigger picture perspective, Figure 8 shows you how each of these
terms relate to each other.
On the left we have the single, pure hue, blue. On the right, we have pure brightness from black to white.
On top, the shade of blue moves towards black, the saturation moves towards middle grey, and the tint
moves towards white.
Figure 8. Mega map with hue, shade, saturation, tint and brightness
3. Applying science
Miyamoto Musashi, is without question, my favourite samurai warrior. He advised that if you want to win a
sword fight, every movement of your sword must cut your opponent.
Whether it’s the art of war or the art of interaction design, every design move you make must advance
your project goals. If you're a UX designer, every navigational UI element must help users to complete
tasks. If you’re a behavioral scientist, every iota of content you author must nudge your audience.
In whatever you do, there’s a good chance that your success will depend on producing more for less,
which means maximizing efficiency in everything you do.
Color is one of those areas where your palette must achieve as much as possible, with as little as
possible.
The right color palette will strike your audience’s emotions and cognition in one fell swoop. The right color
palette will help you guide user attention, signal how they should use your system, boost their
comprehension, evoke the right emotions and build positive associations with your brand.
Real-world design
It’s good to adopt a warrior mentality when it comes to color, because implementation is often more
painful than it needs to be.
Most of us will be applying color strategies under ridiculous constraints, where we’ll need solid technical
knowledge of how color works, so we can find solutions that balance multiple competing demands.
Here are standard color-based design challenges you may face:
● Your company’s HiPPO thinks you must RED-IFY everything because your brand is red.
● Your ZEBRA colleague heard red CTA's convert, so you're a fool for not redifying.
● You have an official color palette that violates accessibility standards, and possibly laws.
● You need to provide AA contrast ratios, possibly AAA, but your brand colors are nowhere
close.
● Your colleagues disregard usability test results in favor of their own preference.
● In your latest user test, snooty teens made disgust faces and snickered at your new design
mocks. And you don't know why.
Yes, sometimes you’ll build projects from scratch, where you can develop ideal color schemes. But in
other cases, you’ll be applying damage control strategies, where it’s more about making things less bad.
The challenge is not so much how to develop the best color palette in ideal circumstances, but more
often, how to strategically use color with multiple competing demands. It’s about doing your best under
the circumstances.
In the rest of this book, I'll try to keep it real, but discussing strategies that make sense under real-world
conditions, rather than ideal situations.
Translating science to practice

Finally, Miyamoto Musashi's famous Book of Five Rings ends with a metaphysical chapter, that I
interpreted as advice on how to cultivate a warrior's mindset. Basically, learn as much as possible, then
before you enter battle, clear your mind, focus and let your instincts takeover.
Science never takes you all the way to your goals. Instead, it fast-tracks you at every step, giving you
deep insight, and when you're not sure what to do, its theories help you make better decisions under
uncertainty. It helps you move fast.
When you're not sure the best approach, science also offers research methods that will give you deep
insight into your users and digital products. Rather than cold-hearted analysis, research-based insight is
the ultimate source of empathetic, user-centered design. When people don't know what to do, I normally
recommend talking to their audience. Research is the ultimate conversation.
In rest of this book, I’ll share my science-inspired design philosophies and tactical hacks. It’s important
that you know when I’m speaking as a scientist rather than a practitioner. For this reason, I’ll let you know
when I'm shifting between the two.
4. Color schemes
To some degree, “the arts” are fields where the key measure of success is creating something that is
pleasing to people’s senses. For instance, musicians combine sounds to please our ears; master chefs
combine foods to please our taste; while artists combine shape and color to satisfy our eyes.
Of course, the arts can go beyond pleasing the senses, such as provoking thought, entertaining,
propagating ideologies, evoking sensory dissonance or overload the senses.
Though most of the arts focus on sensual harmony, some focus on overloading the senses. There's
interesting recent research on neurodiversity, which explains why some people prefer harmonious versus
overloading stimuli.
This also explains an older personality system by Eysenck on the biological basis of personality. If you're
more introverted, chances are that you prefer aesthetic harmony, because certain senses are easily
overloaded. However, if you're more extroverted you're likely to enjoy dissonant arts more, as your
senses are under stimulated, and you to seek extreme sensual stimulation to feel normal.
In this section, I’ll discuss using color for harmony and dissonance.
1.8 Calm combinations

The research on aesthetically pleasing colors deals more with related colors, such as contrasting colors
or similar colors. So a good starting point for establishing pleasurable color combinations is the color
wheel, which is typically used for this exact purpose.
However, before we get into color combinations, I wanted to raise the question of using primary colors as
an aesthetic foundation. As far as I know, apart from Kandinski’s philosophy, there is no aesthetic
advantage to sticking to primary colors. Moreover, since different color models have different primary
colors, it’s not always clear what’s a primary color anyways.
My philosophy of color is to find a palette that makes sense for your perspective, and which works for a
given situation. The color combinations in the color wheel can then help you identify the proper contrasts,
and related family of concepts. Normally, you'll need an experienced designer to help calibrate the final
selection, as all colors need to fit together with a uniform set of qualities.
Figure 9 shows color combinations based on the color wheel which you can use to guide your colors
palette selection, aiming for pleasing colors, that work together, aid contrast, and generally feel
comfortable on the eyes.
There are so many books, blogs, and palette generators, that there is no point in me covering how to
combine colors. Instead, let's leave it here by thinking about color palette generators as ways of
producing harmonious, but not necessarily functional color combinations.
Complementary Analogous Split complementary
Complementary colors are opposites. Analogous colors combine three Split complementary colors combine
adjacent colors. the complement’s analogous colors.
Triadic Tetradic rectangle Tetradic square

Triadic colors are derived from three Tetradic colors combine four colors, Tetradic square colors combine four
evenly distributed colors. with two groups of complementary evenly divided colors, with two groups
colors. of complementary colors.
Figure 9. Color combinations
1.9 Stressed combinations

While some color combinations feel easy on the eyes, others feel strained. Perhaps the best-known way
to strain users’ eyes with color is an effect called chromostereopsis, shown in Figure 10. This is the
wobbly optical illusion that people experience when they look at two colors that are far apart on the color
spectrum.
If you’ve ever spent too much time designing a Christmas art, you might have noticed that colors like red
and green can produce intense chromostereopsis. Red and green appear close together on the color
wheel, and according to color theory, they should be nice complementary colors. But if you look at them
on the color spectrum, in Figure 12, you’ll see that they’re quite far apart.
Chromostereopsis emerges when one color reaches the eye slightly faster than the other, due to different
wavelengths. This creates an optical illusion where one color appears closer than the other. However,
from tests at AlterSpark, people report seeing either color closer or further.
Figure 10. Chromostereopsis
There are also examples in art history of classical painters using chromostereopsis to create depth
perspective. In Figure 11, Rena created the same effect, to make the tree appear in the foreground. See
which color appears closest or furthest to you.
I’m not into creative dogma, such as “thou shalt not do X”. I disagree with those who preach that
chromostereopsis needs to be hunted down and destroyed. Instead, I advocate understanding it and
deciding to use it or not depending on whether it will advance or undermine your design goals.
Figure 11. Creating a depth illusion with chromostereopsis
When I want to achieve a pleasing design effect, I try to eliminate anything that even feels like
chromostereopsis. However, I have used in intentionally in the past to attract attention, as a parody of
lousy design, and as a technique to create an edgy feel—but I’ve had disagreements with others who
prefer to avoid it at all costs.
Figure 12. Chromostereopsis one the color spectrum
As I see it, if it helps you achieve a goal use it; if it undermines that goal, avoid it; end of story.
But more importantly, next time you’re wacked with an intense dose of wavy-dissonance, rather than
passing off the eye strain as it's “just bothering me”, by understanding this effect, you’ll probably realize
that it's “just bothering all of humanity”.
5. Meaning of color
Humans are pathological classifiers. Categories shape how we perceive the world. We think in
categories. Categories trigger our emotional reactions. The more we learn in life, the more we create new
categories that transform our world view.
So how did we reach the point where certain colors come with categories? Why do some people claim
that green means envy, or red means passion? The whole debate on the meaning of colors is actually a
debate on cognitive associations to color, or in other words, what's the first category that comes to mind
when you look at any color?
In this section, I’m going to discuss how different cultures conceptualize color, and then get into the
leading theories on color meanings.
1.10 Culture and color perception

People who speak different languages often refer to different wavelengths when they describe similar
colors. In the English language, we use the word “red” to describe 650-700 nanometers on the visible
light spectrum. However, another culture may refer to "red" with 625-700 nanometers. From our
perspective, we native English speakers might call red, “red”. But the second culture may call red-orange,
“red”.
We do the same thing with language too. While learning German, I couldn’t understand why my German-
speaking friends were always telling me that my pronunciation was so awful. The worst of it came down
to my mispronunciation the umlaut (ü), a nasally-sounding u-sound. In English there are different sounds
for the letters “u” and “ü” (ooh and ewh), but they have the same meaning. However, when German
speakers hear these two sounds, they interpret them with two distinct meanings. Essentially, this made
my German suck, without me knowing why. A great teacher finally realized I couldn’t tell the difference,
explained it to me, and then I was able to upgrade my German from terrible to bad.
Color categories work in a similar manner. Different cultures make different color distinctions. Depending
on where a culture defines color wavelength ranges, this affects speakers' memory, ability to learn, and
ability to contrast different colors. What this means is that the more you use colors that are central to a
culture’s color words, the easier it will be for these people to process and remember your colors.
This provides an explanation for the underlying differences in color palettes that vary from culture to
culture. It also explains why you should be culturally sensitive when doing any international or culturally
focused design. Just like my bad German, you don’t want to mis-pronounce your color palette with an
entire culture.
Though I’ve never seen this in practice, one theoretical implication is that you should be able to make
things more memorable by developing color palettes that are central to a culture’s color conventions. If
you want things to be less memorable, you can use colors near the boundary of their culture’s cut-off
points.
1.11 Learned associations

In this section, I'll explain how groups develop emotional and cognitive associations to colors.
Imagine a society where on TV, the baddies wear green uniforms; and the good guys wear red uniforms.
After 15 years of green baddies and red-shirted goodies, the culture may start to develop an emotional
co-association between green-bad and red-good.
However, we form stronger memories from events that have stronger emotional valence. In other words,
we remember the best parts and the worst parts of life more than the routine parts.
So if a criminal gang rolled into town, and they happen to be wearing green, then the color green may
become co-associated with an intense dislike. But if it's a brutal green-shirted militia that besieges our
city during a civil war, raping, torturing, and victimizing citizens, then green can burn into some citizen's
long-term memory as an extreme anxiety trigger.
We call the process of associating anything with a reward or punishment, reinforcement learning. We can
associate any color with a reward or punishment, causing color to evoke positive or negative emotions. In
other words, a color associated with punishments will eventually evoke a threat response, while a color
associated with rewards will start to evoke an opportunity response.
This becomes interesting when things like colors, shapes or sounds become associated with our
emotional motivators. Abstractions and symbols can become associated with core drivers of human
behavior, such as high or low-status, in-group or out-group trust, love or hate, pleasure or pain, and so
on. As people learn to make these associations during their life, they become primed to experience the
unconscious impacts of design.
Another way of explaining how color shapes emotion, is through an associative memory network. Here's
how it works. When you look at a photo with lots of green, those green colors trigger millions of memory
circuits with related concepts, emotions, and sensory experiences. While your brain works to classify the
image, it activates emotional responses based on past associations, while working to come up with the
best classification of the experience. The net effect is some level of emotion is triggered by each
experience. Thought the effect is small, it is still felt.
Think this sounds crazy? Hers’s how you can experience this. Go online and search for some videos of
people climbing on a skyscraper and hanging off the ledge, with their feet dangling below. See if you can
turn off your body’s reaction to the video, the fear of falling. I know that many readers can’t shut off this
emotional response, as it’s strong. Color associations are normally far less intense, but it’s there.
Many researchers use associative memory networks to explain the unconscious impact of color
associations. However, beyond color, memory networks are also used to explain co-associations of
shape, size, and other visual triggers, which explains the emotional impact of fonts, logo symbols, and
more. This is partially used in branding psychology.
The critical point here is that there can be individual, group, and cultural co-associations with color. All
those claims about universal color meanings should always be taken with a massive dose of skepticism.
If there is any merit to the research, it's likely to only apply to a certain population, over a certain period of
time.
Later, I'll show you charts of the closest thing to universal color-emotion associations, but these are broad
emotions. For specific emotions, you have to test these associations with your target audience or end
users.
1.12 Applying emotional associations

How do we use color to evoke the right emotional tone in any communication? Let’s start with a
theoretical example of using color to target status-oriented emotions.
Imagine a culture where the color purple is associated with higher status, and the color grey is associated
with people of lower status. Next, rub some of that high-status purple on your logo, and voilà—you have
a logo with high-status connotations. Rub some of that low-status grey on the attack ads of your political
opponent, and Bob’s-your-uncle—you’ve created a slanderous campaign.
When it comes to branding psychology, creative people often seek colors, shapes, and symbols that have
emotional co-associations which can achieve the intended impact. You can use the idea of associative
memory networks to guide your color selection by using colors that strike the right emotional tone, level
of trust, in-group feel, and so on.
For most of humanity, color co-associations change over time. This explains why colors come into, and
go out of fashion. Want to be cool? Rub some of that in-group color palette on you, and you’ve instantly
made yourself look like a card-carrying member of the tribe.
When it comes to color and trends, here’s my design philosophy: I’ve always suspected that ultra-trendy
colors are valuable when targeting sub-segments, but the value quickly fades with time. In other words,
ultra-trendy colors quickly become ultra-trashy, as the trend-setters play cat-and-mouse with the trend-
followers.
If you have the money and staff stay on top of color trends, I say go for it. However, if you want your
designs to have a longer shelf life, opt for more neutral colors and whites.
1.13 Applying cognitive associations
Another type of association is cognitive association, which is concerned with the intellectual
understanding of a color. In other words, does the color help users to understand something?
When it comes to navigational systems, I use color to train my users on how to use my interface. I want
them to make associations like color-A produces outcome-A, and color-B conveys information-B. I want
them to know that color-X indicates the most important task, while color-Y is less important.
Earlier, I said that I didn’t know of any universal color associations to emotion. However, there is one
global association to cognition. Thanks to the Vienna Convention on Road Signs and Signals, most of
humanity use the same traffic sign colors. Across the planet, most of humanity knows that red means
stop, orange/amber means get ready to stop, and green means go.
If your color options allow you to build on these associations, I advocate using them for the simple reason
that you’re not going to have to spend much time teaching your users their meaning. It’s easier to build
on pre-existing associations than to establish new ones.
On the flipside, be wary of ambiguous color associations, or mixed color metaphors. One of my students
told me about a toilet in their workplace with two red buttons. One red button locked the door and the
other red button sounded the emergency alarm. How do you think that worked out?
As a toilet user who doesn't know what to do, if you press the button, you'll risk pressing the alarm and
having the security guards find you on the potty. But if you don't press a button to lock the door, some
stranger may walk in and find you on the potty. Either way, someone’s finding you on the potty. How's that
for a stress-inducing design pattern?
The problem here is that red had two separate meanings, from two separate systems. In security, red is
often used for alarms, while many door locks use a traffic-light metaphor of stop or lock. But together,
they’re literally mixed color metaphors with different cognitive associations, which makes that the toilet
from hell.
6. Colors and emotions

When it comes to emotional design, there’s a lot of talk about happiness-evoking tech. This is a nice idea
in theory, but if your goal is to shape your users' behaviors, you'll need to target a broad emotional
spectrum, including negative emotions.
In this section, I’m going to discuss some introductory topics in emotional design, and then show you how
color can contribute to our technology’s emotional canvas.
1.14 Two approaches to emotion

There are two scientific schools of thought on emotion. The first is the “basic emotions” school. Its
followers argue there are six or more basic emotions that are universal across cultures. This idea comes
from Darwin and it goes something like this. When someone experiences happiness, the happiness
neural circuit fires, causing a change in facial expression as the emotion is expressed.
The second academic approach is the “dimensional emotions” school. Its followers argue that emotions
are constructed through complex neurological processes that can be characterized by three dimensions:
arousal, pleasure and control. Neuroscientists argue this approach is closer to what they’re observing
inside the brain. This is the approach that I use, but I also draw on basic emotions approach here and
there.
1.15 Three emotional dimensions

Let me start by clarifying the difference between an emotion and a feeling. An emotion is a complex set of
physiological changes in response to a perceived threat or opportunity. They’re automatic and mostly
unconscious, which is why we’re never fully aware of all the changes we’re experiencing. A feeling is our
awareness of that emotion.
For example, if your friend gives you tickets to see your favorite band, and you jump with joy. You’ll be
aware that you feel good, but you may not be aware that your heart rate has increased, and your
dopamine is pumping. Similarly, if you were just humiliated in public, you may know that you feel crappy,
but may not be aware that your sympathetic nervous system has activated, your blood pressure
increased, and so on.
In the dimensional approach, each emotion boosts or lowers these three dimensions: (1) arousal, (2)
pleasure, and (3) control. I think of them as the loudest signals that we feel.
Here’s a description of each:
Arousal
Arousal is the level of physical and cognitive energy experienced. When someone’s arousal is cranked-
up, they’ll feel energized, focused, and experience a strong sense of cognitive and physical energy.
When turned down, they’ll feel more lethargic and unfocused. Physiologically, we talk about nervous
system activation for arousal, and in strong emotions, activation of the stress response.
In interactive design, there are many ways to boost users' arousal. Typically, these are called stress
inducers, pressure tactics, or most lay people use tactical terms such as urgency. Stress induction
techniques target nervous system activation to get people more focused. Any promise of reward in the
form of value props or benefits, can trigger dopamine which activates their curiosity and approach
behavior.
Sex ain’t a bad arouser, which is why sexual attraction is often used in advertising. Just add a hot hunk or
babe, excite the audience, lure them in, and co-associate your product or service. It's a worm on a hook.
Also, anytime users sense a legitimate threat or opportunity, their arousal will also increase.
Pleasure
The pleasure dimension describes how pleasurable or painful emotions feel. This is also called valence,
or emotional valence. You can divide most emotion into two categories: those that feel good and those
that feel bad. There are also complex emotions that evoke both good and bad feelings at once, like
nostalgia.
Most emotions either punish or reward us in different ways. The emotional punishment from social
rejection physically hurts which is why you can use aspirin to reduce the pain of rejection, but why you
can’t take aspirin to numb your humiliation.
For interactive design applications, most of the time we focus on positive emotions. Trying to get people
curious, engaged, and ultimately satisfied with what we have to offer.
Quite often designers target negative emotions, such as loss-aversion or pressure tactics that play on
threat avoidance feelings.
Highly engaging technologies normally target a wide range of emotions, both positive and negative, that
punishes and rewards the users in multiple ways.
Control
Control describes how much power someone feels that they hold in any situation and whether they feel
dominant or submissive in any given social hierarchy.
When people possess more power or control, they generally feel calmer and more confident. With less
power and control, people can’t fully predict the outcome of a situation, which can lead them to feel
higher levels of stress.
When people feel confident, they’re more motivated to get things done. However, if they don’t feel
confident, they won't even bother. In the behavioral sciences, self-efficacy is a central concept in behavior
change. Self-efficacy is trust in oneself or confidence that someone has the knowledge and ability
required to be successful at something.
The opposite of self-confidence or self-efficacy is helplessness, a state where one feels as if there is
nothing they can do to make things better. Learned helplessness is when people learn that they are
unable to get results, and stop trying. In the extreme, it’s when people give up all hope.
I believe the control emotions are the most powerful drivers of human behavior, partially because these
are the emotions many people completely deny. How long does it take someone to admit their most
painful feelings of shame and humiliation? A week, a year, a decade, a lifetime, or does it go with them to
the grave?
Or what about the other emotional extreme--pride? There's good scientific evidence that people prefer
pleasant lies to painful truths, with strong evidence we humans are suckers for flattery. By flattery, I mean
complementary lies intended to make someone feel important, appealing to their social hierarchy
emotions. Research shows that people enjoy using software more when it flatters their ego, with a dose
of feel-good lies.
Pride and shame, empowerment and disempowerment, control and helplessness—these are the control
emotions.
1.16 Four motivational quadrants

Now I’ll show you how I combine the three emotional domains into four motivational quadrants, that I use
as the basis for emotional design strategies. Figure 13 shows a simplification of the Cugelman emotion
map.
There’s a lot of research behind this map which will take several chapters to explain. So to go fast, here
are the key things you need to know about it:
● The four quadrants in my emotion map incorporate the three primary emotions, plus the stress
response
● I use this model for both motivational and learning applications. Typically, people confuse these
two distinct applications. In this book, I’ll primarily discuss motivation.
● Later when I show you how color relates to the three dominant emotions, I’ll take the discussion
back to the quadrants.
Figure 13. Simplified Cugelman emotion map
Optimistic: High-arousal, pleasurable emotions

This quadrant of highly-arousing and pleasurable emotions is where we feel control, motivation and
pleasure. They include feelings like curiosity, excitement, pride, optimism and engagement. When these
emotions go too far, surpassing the bounds of healthy emotions, people lose their judgement in a hyper-
positive state called mania.
In interactive design, these high-energy positive emotions are where most designers and marketers
target. Common psychological page elements include value props, benefit statements, offers, free
giveaways, and all that sort of clickbait. This is the quadrant where we hook people with our sexy
headlines or fire-up curiosity in the first five seconds of our cat videos.
Nobody mastered the dopamine inducing hook like Buzzfeed, with their gutter-grade trashy headlines
that nobody can resist. Yes, I want to see what Britney Spears looks like today. Yes. I want you to guess
my age by taking a French fry quiz. Yes, I want to know the 10 worst smells that would make me want to
puke right now. And yes, I really do want to see how badly those child celebrities have turned out!
We use the high-arousal pleasurable emotions to motivate users through anticipation of reward, primarily
through dopamine release, and light nervous system activation.
Pessimistic: Low-arousal, painful emotions
The quadrant with low-arousal, negative emotions and a lack of control is where people experience
feelings of helplessness, shame, humiliation, pessimism, and lethargy. When these emotions go outside
the healthy range, people feel depressed and if things get worse, they might experience complete
helplessness and eventually give up.
In the extreme, these are the worst emotions that people experience. When fight or flight doesn’t save us
from a threat, this is where the freeze state emerges, but if freezing doesn’t work either, this is where our
body prepares for the worst, where trauma burns lifelong torture into our memory. At the extreme, these
are the emotions that interrogation and torture specialists target.
Clearly, you need to treat these emotions with extreme care. Inexperienced professionals who lack
emotional intelligence often trigger these emotions by accident. Typical rookie mistakes in this quadrant
include accidentally shaming users with thoughtless gamification, facilitating online platforms that are
easily infiltrated by cyberbullies who intentionally humiliate other members.
Typical developer mistakes come from thoughtless interactive design, mindless error control, and un-
quality assurance, that leads to platforms which are impossible to use, errors that are impossible to solve,
and tasks that are impossible to complete.
There are antisocial personalities that intentionally target these emotions. The less intelligent narcissistic
sociopaths target these emotions as the sport of trolling, where they do what it takes to humiliate others.
But for the smart narcissistic sociopaths, I’ve always suspect they target emotions using deception
strategies, known as dark patterns.
You’ll find dark patterns across the web, often used to trick people into buying things they don’t need, or
trapping them into unsatisfying long-term consumer relationships. You’ll know your dealing with a
sociopathic company when you try to leave. Just as exiting an abusive relationship is the instigator for
domestic violence, exiting a sociopath’s company is the point when you’ll learn what the word
manipulation really means.
This is also where shame-based selling happens. Want our “10 Secrets Hacks” ebook? Select either:
“Yes, I’m smart”, or “No, I’m an idiot”. My philosophy here is that if you feel moral disgust, an ethical line
is probably being crossed. For me, exploitation of these emotions is normally where I feel it.
Positive emotional design techniques in this quadrant include techniques like promising people hope for a
better future, but only if you help them achieve it. You may promise to help someone get better
technology, better services, better strategies, or anything of service. It also includes combining loss-
aversion with incentives, such as when you make people feel discontent with what they have, while
working to excite them about what they want.
A similar loss-aversion and incentive strategy is often used in health behavior change apps. One strategy
in motivational interviewing is the application of “clinical guilt”, where the app contrasts someone’s actual
behavior against their ideal self. It’s a carrot and stick tactic that makes people feel pressured to avoid
shame, and move towards a desired future.
There is also pride-based selling, where you promise to raise someone’s social standing, which is the
ultimate motivator. Standard practice includes promising people they’ll be somebody someday, that they’ll
make it, and I’m sure the value prop of bubbie-guilt-trip.com is you too can be a mensch.
These are the strongest motivators, and our AlterSpark research suggests that when you deliver on your
promise, that this is what causes your users to feel grateful and loyal. However, when companies do not
deliver the promised results because they’re dishonest, these motivators go by the name of “raising false
hope”, “bait and switch”, or “deception”. When the source lacks competence, it’s not considered
manipulation, rather incompetence.
Given that these are the most painful emotions people feel, your ethics will determine whether you’re
able to manage these emotions in a way that leads users to feel livelong loyalty, moral disgust, or meh.
Insecure: High-arousal, painful emotions

This is where people react to any threat of losing control, and experience emotions such as urgency,
suspicion, vigilance, fear, stress, and anxiety. For our social dominance emotions, this is where contempt
and moral outrage exist. For our social emotions, this is where jealousy, envy, and aggression also exist.
When these emotions go beyond the normal healthy range, people enter states of chronic anxiety leading
to immune system breakdown, and in children, this leads to lifelong damage.
As these emotions range from low levels of pressure to critical urgency, most of the time we feel them in
the form of healthy stress. By healthy stress, I mean the type of stress that activates our nervous system,
raising our arousal, which boosts our energy and focus.
It’s difficult to motivate users or consumers without some level of pressure to add some extra urgency to
the behavior. In interactive design, we play on these emotions most of the time, but sparingly and with a
measured application. Just a pinch of pressure is normally enough. Not too much; not too little. And never
more than we require.
People describe these strategies as pressure tactics, and their primary drive comes form the emotions
that underpin loss aversion. As a researcher, many people have told me they are ok with stress induction
to motivate them, so long as it's legitimate. However, when you use these techniques on someone and
they discover that your technique was not honest, such as using fake deadline, then they can be more
resentful than a non-pressure-tactic lie.
Secure: low-arousal, pleasurable emotions
The low-arousal positive emotions are where people let their guard down, within a context where they
feel secure, grateful, trusting and generally content. This is where our target audiences or users trust us
so much, that they feel secure and trusting interacting with our organization, and shift into a long-term
trusting relationship which is known as loyalty.
This is the constellation of emotions where people experience rest and recover states, which is why
researchers have developed post-surgery recovery apps that try to get patients to experience gratitude,
and emotion that can boost someone’s immune system.
These are the emotions where we want our customers to reside, as these are the emotions tied to loyalty,
and complacency. This is where you form long-term relationships with the people who matter to your
organization.
Many companies and organizations suffer when too many people end up here, in relationships that are
not profitable. Think of old customers who required ongoing service for products or services that they no
longer pay for. They trust you, but they haven’t made an investment in your company in years, or if you
run a freemium SaaS product, you may find the long-term trusting relationship is now quite what you
bargained for.
It’s not uncommon for organizations to forcibly evict users from these emotional states, through two
primary strategies. The first is intentional discontenting users, by showing them how what they have is
not as good as what they could have, while layering on the incentives to make a purchase. The second
strategy is to annoy the users by layering on minor stressors, in the hopes of creating a combined stress
reduction and incentive movement. But ultimately, you need to return back to this quadrant at the end.
In most cases, we want to hold people in these emotional states, where they feel comfortable, satisfied
and loyal.
1.17 Emotional transitions with a splash of color

I use the quadrants of the Simplified Cugelman Emotion Map, as one of my key tools for building
outcome-driven emotional design strategies.
Sometimes you'll build digital products that intentionally move people through different emotional states.
At other times, you'll develop strategies to boost positive experiences. While on another occasion, it will
be more about damage control to neutralize harmful emotions.
For instance, when a crappy app stresses its user to the point of helplessness, they're taking their user
on an agonizing journey from insecure and stressed emotions to pessimistic and helpless emotions.
Think of all the billion-dollar tech companies run by insensitive fools, who with all their resources, can't
even bother to build a stable interface, and torment their users daily with interactive incompetence. I
won't name any names here.
If you work for a company like this, your work in emotional design may be more about neutralizing bad
emotions, rather than building delightful experiences.
We only have so much power in many design situations, and so our emotional design strategies need to
be played depending on the specific cards we've been dealt in each gig.
Now let's look at the positive side. We can intentionally design to move users from optimistic and
rewarding emotions to secure and calm emotions. All you have to do is over-deliver to the point where
users feel gratified, and you'll start fostering loyalty.
When you do this, you'll build an irrational emotional connection to your app's brand, the thing that users
trust, the ghost in your machine.
In my teaching, I cover all sorts of emotional transition strategies. However, once we have an emotional
design plan, it's time to start building.
It's at this point that we get creative, come up with different ideas, and then eventually start working on
the details.
When we hyper-target emotions, the words matter, the pictures matter, the overall experience matters.
Color is one dimension we use to accent certain parts while painting a broad emotional canvas that
permeates the entire user experience, in a fuzzy way.
Depending on the emotional transition you're working towards, the next section has research that you
can draw from, to inspire your emotional color palette.
1.18 Using color for emotional design
Now that we’ve taken a high level look at the three emotional domains, let’s look at the links between
color and emotion.
There are several studies that show a similar pattern, on the way that hue relates to the three emotional
domains. We translated one of these studies to a visual color map (Figure 14), based on the data in Suk
and Irtel (2008).
To make the trends easier to interpret, we converted the wavelengths to colors so that you can see the
trends directly. Pleasure and control peak in the cool colors, but drop in the hot colors. Conversely,
arousal dips in the cool colors but peaks in the hot range, especially into red.
Figure 14. Hue in wavelength (perceived by cones)
Figure 15 shows the achromatic scale from black to white, with the three emotional domains. Overall, the
positive, optimistic, and relaxed emotions lie closer to white and light grey, while the most depressing
color is in the grey zone with higher arousal and stress-like emotions closer to black.
Figure 15. Achromatic (white to black perceived by rods)
When it comes to applications, I’ll discuss salience strategies later on. But for now, I'll discuss how you
can use this study to strengthen your emotional design strategies.
Stressed
Typically, I reserve red and the warm colors for stress inducers such as deadlines, major errors, or
anytime you must arrest users’ attention. Similarly, you can use high-contrast black, which has the double
advantage of being a highly arousing attention-grabbing design element that's also safe for most visually
impaired persons.
If instead of inducing stressed colors, you want to neutralize it with calming colors, then refer to the color
associations described under 'relaxed', the opposite emotions in the Cugelman emotion map.
Optimistic
Green is the most optimistic color, with decent pleasure, arousal and control connotations. On the
achromatic scale, as we enter light grey and white, we hit the highest ratings for these optimistic
emotions, which may be why there are so many designers who opt for basic white and grey structures.
In commercial settings, where optimistic emotions are typically combined with a pinch of stress induction,
it’s common to add a touch of hot stress arousing color for an extra bit of pressure. Just don’t overuse
these colors.
Relaxed
Cool blue is the least arousing, with the most pleasing and comforting emotions, so it could be a good
choice for empowerment-focused design or co-associating your brand with competence. This is also a
good color zone when your goal is to foster a sense of security and comfort.
These colors are not as attention-grabbing as others, so they’re not a great choice for critical messaging.
On the achromatic scale, these are your standard light greys.
Pessimistic
I’ve always wondered why people say things like “It’s so grey and depressing”. On the achromatic scale,
the most depressing point with low emotions is middle grey. When it comes to colors, there isn't any clear
pessimistic emotion zone, so grey is our most depressing color that is technically not a color.
Sometimes I use these colors when I use advertising to raise awareness without raising attention. Who
would want to make ads that nobody notices or clicks on? Someone who wants to warm up a market,
foster familiarity, and not pay for clicks because your goal is to warm-up a population, and build trust. I’ll
stick to these low arousal ads as a pre-engagement strategy, then pick up the color palette when it's time
to move in. Yes I know that the ad platforms will punish you for using low performing ads, so it's a trade-
off.
7. Visual hierarchy
One of the critical applications of color in behavioral design is using it to control where people look. If
people don’t notice your navigational system, your technology won’t be usable. If people don’t see your
persuasive words, they won’t persuade. And if your technology is both unusable and unpersuasive, you
have a disaster on your hands.
When it comes to public communications, if you’re marketing to people who don’t see your ads, then
those ads won't get people clicking. If you’re running a public relations campaign to people who don’t
notice your brand, your reputation will not grow. No matter what you’re doing, if people don’t notice what
you need them to notice it, things aren’t going to work out too well.
1.19 Controlling user attention

In behavioral design, one of the fundamental skills you need to master is the art of controlling where your
users look. In most design work, we control user attention by increasing and decreasing the salience of
visual design elements.
What is salience you ask? Salience describes how noticeable something is. The term “salience” is often
used by neuroscientists and psychologists to explain what makes things stand out. In other words, the
term is used to describe the neurological and psychological factors that shape human awareness,
perception, and focus, which are prerequisites for getting into users’ short-term memory, with the ultimate
goal of planting your message in their long-term memory.
How do we control the salience of interactive design elements? The simplest way is to use the h-tag
system such as h1, h2, which blends a semantic hierarchy with a visual hierarchy. But in most cases,
you’ll establish visual hierarchy by modifying the size, contrast, placement, whitespace, and color of
different page elements. A lot of designers use Gestalt psychology and pre attentive processing
strategies to establish their visual hierarchy.
Since this is a color psychology book, I’m only going to discuss color’s role in visual hierarchy.
1.20 Visual hierarchy

Let’s face it, interactive designers can find themselves stuck between crazy demands and irrational
people. You know designers, the monkeys in the middle of all those ridiculous demands, such as move
that up there, no move it down, now make it green, no pink, no purple, no red. Make that redder, reddder,
reddddder? More cowbell, I WANT MORE COWBELL.
The way we balance between these competing demands is by prioritizing our business priorities, which
makes it easier to design our technology. Put another way, if you can’t define your outcome goals clearly,
it’s impossible to prioritize your page-level design, because you won’t have any basis for establishing
what’s important.
The way we prioritize sitewide navigational structures and page-level content is through a combination of
design and editorial rules, that we apply in a structured way, so as to control the salience of every user
interface element. Structures like the H-tags are built-in visual hierarchy systems, and important for
accessibility, because they’re also structures that machines use to interpret conceptual hierarchies.
In implementation, the work often comes down to making several small tweaks and revisions to the
structure and content. It often goes like this, “make that stand out more, but not too much.” “Turn that
down a notch.” “Ensure nobody misses those pressure tactics.” And so on...
1.21 Guiding users with strong signals

A good graphic designer can turn down, or pump-up the volume of different page elements, while a
master can make subtle micro adjustments that give the whole design a smooth feel. It can take months
or years to fine-tune an ultra smooth flowing digital process or optimize an extremely high converting
landing page.
When the visual hierarchy is fine-tuned and optimized, your technology will feel effortless. It's a bit like
dancing with the Salsa King, who signals what move comes next. Take it to the left. Take it to the right.
Shake your butt, spin around. With the Salsa King, you’ll know just how to shake-it—no effort required.
In salsa they call it signaling, in UX they call it a signifier, but whatever term you use, it's all about
communicating the next step to you user. Get it right, and your technology will feel effortless, and your
users will normally see what matters. Get it wrong, and nobody will be writing their name in your dance
card.
In interactive design, it comes down to ensuring each user knows where they are in processes, knows
what to do next, and easily comprehends the information that is most important to their journey.
In behavior change, it also comes down to ensuring that your audience is guided through the right
content or tools required to make an impact.
1.22 Color palettes with salient hierarchies

To develop a color palette that supports many design goals, you’ll need to know which colors attract the
eye more than others. This will help you develop a color palette that’s not just aesthetic and brand-
sensitive, but one that is also functional.
Since color plays a strong role in design, people often ask which color is most salient. Is it red? Is it
green? What’s the magic color?
Before I tell you the magic color, I WANT TO MAKE ONE THING CRYSTAL CLEAR. Sorry for yelling, but
this is important. The visual hierarchy of any color palette is easily manipulated by modifying the
saturation, shade and tint of each hue, so you can structure any combination of hues with any visual
hierarchy.
However, when it comes to the relative performance of colors when matched against all others, we
summarized Camgoz, N. (2000) which shows those colors that perform best against all others.
Rena and I extracted the data from this study, extrapolated missing values, and translated the research
into the color chart in Figure 16. Note, I estimated a few missing colors by
averaging the values from neighbouring colors with similar wavelengths.
I use this chart to inform my decisions on accent colors. When it comes to fine tuning the priority of page-
level elements, I use it to inspire my placement of adjacent objects, when trying to create priority among
UI elements.
When it comes to branding colors, you'll need to invest time to find appropriate cognitive and emotional
color associations. However, when it comes to winning brand attention, this chart can help you pick
colors that will draw more attention to your logo, rather than your competitors. When your logo is placed
in a long list of industry logos, it’s important to ask the egomaniac’s question, “Which color will draw the
most attention to our brand?” I like to find the most egomaniac color that fits with the other color criteria.
When I produce branded marketing content for 3rd party platforms, normally I examine the dominant
colors, and work to find a color that will dominate over all other colors. This chart will help you outshine
your competitors, but if you overdo it, you can easily find yourself going down the Las Vegas strip design
gutter. So use it tastefully.
Figure 16. Visual salience of colors
Figure 17. Arousal level by color averaged
8. UI color psychology map

In this section, I’ll take you through my UI Color Psychology Map, in Figure 18. It’s my number one tool
for building color palettes with a clear visual hierarchy. The example in Figure 18 is what we use in
AlterSpark when we have no design constraints. It’s just an example.
You can use the UI Color Psychology Map when designing or upgrading color systems, especially when
you’re under pressure to balance many competing demands across your brand, existing design
standards, accessibility requirements, emotional goals, and behavioral design objectives.
It's also a great tool to help you identify problems impacting visually impaired persons, so that you can
develop more accessible design strategies.
Figure 18. UI Color Psychology Map
1.23 How the UI Map works

The UI Color Psychology Map has two parts, greys at the bottom and colors at the top. Both follow the
same ballpark pattern, moving from the least to the most arousing as we move up. We know from studies
that the arousal level jumps around quite a bit, so think of this as a bigger picture map with many details
you need to keep in mind.
In the greys, when you build on whites with dark contrast, you'll be in the zone of positive comfortable
emotions, with a strong ability to draw users’ eye.
The top color chart follows the wavelength, up from 400-700 nanometers. It doesn’t include non-spectral
colors, so there are no browns, pinks, or red-violets. But add them if they make sense for what you’re
doing.
There are just a few parts of the color spectrum that are best for grabbing attention. The cool blue zone is
a good space for positive feelings with decent salience, and a comforting general-purpose feel. Blue-
green (turquoise) is a great color for drawing attention plus it comes with comforting associations.
The hot colors are better for grabbing attention and raising salience. Since reds have negative emotional
and cognitive associations, I tend to use them for high-priority attention-grabbing when there’s something
mission critical, like a threat or obstacle. I also use them for pressure motivators.
1.24 Calibrating a color hierarchy

I use the color map like a literal hierarchy. Cranking up the salience means moving closer to top red,
while turning down the salience means moving towards bottom cool colors, and then down to the grey
zone.
Since the colors don’t follow a perfect linear progression from low to high arousal, we normally force the
colors into a visual hierarchy. In other words, we tweak the shade, saturation, etc.. till red dominates all
other colors, green outranks blue, and all accent colors draw more attention than the greys.
The advantage of my default traffic-signal-inspired color palette, is that it’s extremely easy for people to
learn. The disadvantage is that it’s overused, not the most accessible choice, and if this doesn't fit your
brand, you'll need to develop another system.
1.25 How we build color systems

At AlterSpark, I normally build color systems with Rena, our Creative and UX Director, who happens to be
my sister. We also work with her dog Pinky, our junior designer.
In most cases we prefer to start with a white background, add grayscale structures, and then add accent
colors on top. For the greyscale palette, I prefer to build on a black, white and grey structure, with a good
aesthetic feel.
Next, I’ll work on finding ballpark accent colors that have distinct contrasts, appropriate emotional
associations, and symbolic meanings. I use the UI Color Psychology Map to think through some of the
competing design goals and challenges.
Once we rough-out the color system, Rena uses AA and AAA contrast ratio tools to calibrate the palette,
while testing its performance under various design conditions. Her visual sense is so sharp, that she
quickly makes all the right trade-offs on technical and aesthetic considerations, leading to a unique color
system that is intuitive for users and which performs well under difficult design contexts.
I know this may sound ridiculous, but during the process I normally squint my eyes to test contrast ratios
and accent colors. If I can't see the primary CTA on the squint, it's more color tweaking till we pass the
squint test.
It’s a lot of work. But if it’s done well, you’ll have a robust color system that will serve you for years to
come.
1.26 Accessible colors

You may have noticed that my default traffic-light inspired color palette is a problem for some color-blind
people. We have a dilemma, as the worldwide use of traffic-light colors makes it an attractive choice for
boosting cognition, but an insensitive choice for some colors-blind users.
The UI Color Psychology Map will help you spot where your palette is least accessible. I've marked the
most prevalent color-blindness zone covering red-green that affects 7-10 % of men, and many forms of
color blindness are in this area, so it's a bit of a danger-zone.
Once you know where your problems exist, you'll be able to do something about it. My philosophy is to
treat this color-blindness zone with sensitivity, by reducing the number of colors, and ascribing fewer
cognitive associations to there colors. For example, if some users miss your systematic color meanings,
plan-b is to communicate the same information to them with contrast ratios, font size and iconography.
If you want to build in the danger zone, you'll at least know where your problem exists, so you can find
workarounds to boost your accessibility, like modifying contrast ratios, adding symbols, etc…
At the end of the day, you need to test your design against multiple criteria, with accessibility being one of
the top priorities.
9. Author's final words

I hope you found this book helpful. This is an early draft, so if you have any feedback or
recommendations, let me know. And if you take creative inspiration from these ideas, let me know too.
10. Acknowledgements
I’d like to thank so many of my students, who kept pushing me for more and more color psychology
content. Rena Cugelman developed all the graphics, carried out supplemental research on accessible
design, and did a wonderful job coming up with ways to translate the scientific figures into intuitive color
charts.
Jesse Ship helped strike the right editorial tone, and give this book a great editorial swank. Tryston Hoyes
did an amazing job developing painful chromostereopsis images, under my guidance, which went
something like this, “Tryston, I wanted my eyes to burn”.
Since putting it out, several people contributed feedback on typos, errors, etc… which has been a
tremendous help. Thanks everyone.
11. Creative Commons licence

We’re sharing this publication under a creative commons licence. You can use our materials and build
upon the work for non-profit or commercial purposes, provided you cite the original publication and
include a link back to AlterSpark (https://www.alterspark.com/color-psychology).
Here’s the official Creative Commons license:
Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)
You are free to:

● Share — copy and redistribute the material in any medium or format
● Adapt — remix, transform, and build upon the material
● for any purpose, even commercially.
Under the following terms:

● Attribution — You must give appropriate credit, provide a link to the license, and indicate if
changes were made. You may do so in any reasonable manner, but not in any way that suggests
the licensor endorses you or your use.
● ShareAlike — If you remix, transform, or build upon the material, you must distribute your
contributions under the same license as the original.
Licence details:
https://creativecommons.org/licenses/by-sa/4.0/
HOW TO CITE THIS PUBLICATION:
Cugelman, B. Cugeman, R. et al. (2020) Color Psychology. AlterSpark. https://www.alterspark.com/color-
psychology
12. Bibliography
 Camgoz, N. (2000). Effects of hue, saturation, and brightness on attention and preference
(Doctoral thesis), BÄLKENT UNIVERSITY.
 Henderson, P. W., Giese, J. L., & Cote, J. A. (2004). Impression management using typeface
design. Journal of Marketing, 68(4), 60–72.
 Kay, P., & Regier, T. (2007). Color naming universals: The case of Berinmo. Cognition, 102(2),
289-298. (SEE COLOR CATORIES)
 Labrecque, L. I., & Milne, G. R. (2012). Exciting red and competent blue: the importance of color
in marketing. Journal of the Academy of Marketing Science, 40(5), 711–727.
 Suk, H.J., & Irtel, H. (2010). Emotional response to color across media. 35(1), 64–77.
 Valdez, P., & Mehrabian, A. (1994). Effects of color on emotions. Journal of Experimental
Psychology: General, 123(4), 394.

Color Psychology Book Alterspark 25 42347951

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Color Psychology Book Alterspark 25 42347951

Uploaded by

Copyright:

Available Formats

COLOR

Published 20 April 2019.

3. Applying science 14

5. Meaning of color 20

6. Colors and emotions 23

7. Visual hierarchy 34

8. UI color psychology map 38

9. Author's final words 41

www.alterspark.com | Page iii

I look forward to hearing from you.

Simplifying the terminology

Building consistent scientific color models

Replacing universal color claims with population-level trends

Replacing dogmatic design with expert judgement

Clarifying unclear science

We hope you find it helpful.

1.1 The color spectrum

Gamma rays | X-rays | Ultraviolet | Visible light | Infrared | Microwave | Radio

Figure 2. Light waves from low to high

1.2 How humans perceive light

Figure 4. Cultural words for color based on arbitrary wavelength ranges

1.4 Rods, cones, and color perception

1.5 What's a color wheel

Figure 5. Color wheel

RGB Light CMYK Print pigment RYB Paint pigment

Figure 6. Primary colors from three color models

Additive and subtractive

Shouldn't absorption of the relevant wavelengths be a prerequisite for qualifying something as

Problem solved. That's enough philosophy, now back to science.

Building other colors from primary colors

RYB Primary colors RYB Secondary colors RYB Tertiary colors

Figure 7. RYB primary, secondary, and tertiary colors

Here are standard color-based design challenges you may face:

Translating science to practice

1.8 Calm combinations

Triadic Tetradic rectangle Tetradic square

Figure 9. Color combinations

1.9 Stressed combinations

Figure 10. Chromostereopsis

Figure 12. Chromostereopsis one the color spectrum

1.10 Culture and color perception

1.11 Learned associations

1.12 Applying emotional associations

6. Colors and emotions

1.14 Two approaches to emotion

1.15 Three emotional dimensions

Here’s a description of each:

1.16 Four motivational quadrants

Optimistic: High-arousal, pleasurable emotions

Insecure: High-arousal, painful emotions

1.17 Emotional transitions with a splash of color

Figure 14. Hue in wavelength (perceived by cones)

1.19 Controlling user attention

1.20 Visual hierarchy

1.21 Guiding users with strong signals

1.22 Color palettes with salient hierarchies

Figure 16. Visual salience of colors

8. UI color psychology map

1.23 How the UI Map works

1.24 Calibrating a color hierarchy

1.25 How we build color systems

1.26 Accessible colors

9. Author's final words

11. Creative Commons licence