Psychology Of Color & How To Use It In Your Customer Self-Service Design

9 min read

Humans are highly visual beings. Beautiful design can improve virtually every human experience by providing clarity, simplicity, and organization. Our brains are wired to process visual information fast. These experiences grab our attention, keep us engaged, and help us take action.

Color is a fundamental aspect of any design. It can affect our mood, emotions, and how we feel about any given product, service, or experience.

In this article we want to explore how color can be used in self-service content to help trigger effective emotions, ease your customer’s journey, and channel your brand.

What is Color Psychology?

Color psychology is the science of how color affects human behavior. It is a branch of behavioral psychology that looks into how people’s everyday actions are influenced by the way they perceive different hues, values, and chromas of colors.

It is used quite often in the business and marketing world when deciding on brand colors that will invoke the right emotions and actions in an audience. Sometimes choosing the right, or wrong, colors can make a large impact on a person’s impression of the company. For example, many fast-food chains often choose red and yellow as primary logo colors, because they have been proven to invoke hunger.

Neil Patel found that 85% of customers say their primary reason for choosing a certain product or service is color and 90% of purchasing decisions as a whole are influenced by different visual factors.

Color Categorizations

So, let’s cover some of the nitty-gritty first. The primary colors—red, yellow, and blue—cannot be formed from mixing other colors. Secondary colors are formed by mixing primary colors—red and yellow make orange, red and blue make purple, yellow and blue make green. Tertiary colors are different mixes of primary and secondary colors.

Color wheel

Hue is the name of the actual color, value is how bright or dark that color is (shades are darker, tints are lighter), and chroma is how saturated or vivid that color is. The brightness and vividness of color often have more effect upon a person than the color itself.

Blue, green, and purple are cool colors which have been proven to decrease arousal and provide relaxation. Yellow, orange, and red are warm colors which increase arousal and excitement levels. Colors can also be categorized by their functionality and their gender.

Color wheel warm and cool

Colors can be combined in a multitude of ways: Monochromatic color schemes use one hue, or color, with different variations in value and chroma. Analogous uses hues that are close to each other on the color wheel, like blue and purple. Triadic chooses three hues from across the color wheel that form a triangle (like primary or secondary). Complementary schemes are opposing colors, like green and red, that provide high levels of contrast.

Color chart schemes

Common Color & Emotion Associations

A lot goes into how a color provokes an emotion onto a person. The value or chroma of a color can have a large impact on how it is perceived. Many people also react to colors differently depending on their gender, heritage, culture, and emotional experiences. It is hard to say that one color always provides certain feelings to any given person, but when you measure the amount of arousal different colors evoke with the common experiences people have with certain colors, you can find commonalities:

  • Blue: Blue provokes trust, security, calmness, peace, and honesty. It is often used by banks.
  • Green: Is associated with wealth. It is the easiest color for the eyes to process. It’s often used to represent health and wellbeing.
  • Yellow: Is optimistic, youthful, and fun. It provokes light, intellectual, logical, and creative emotions.
  • Orange: Stimulates creativity and productivity. Creates a call for attention.
  • Red: Is known to represent energy, urgency, vitality, and stamina.
  • Pink: Is seen as romantic and feminine. It’s often aimed at girls or women.
  • Purple: Is often used to soothe and calm. It invokes intuition and imagination.
  • Black: Can be seen as a color of sophistication and exclusivity (think black vcard access), but also mourning, death, and fear.
  • Grey & Brown: Are neutral colors evoking feelings of loneliness, sadness, and boredom.

color emotion brand guide self-service
Credit: The Logo Company

In a survey, people were asked to choose the color they associated with particular words.

  • Trust: Most chose the color blue (34%), followed by white (21%) and green (11%).
  • Security: Blue was the number one choice (28%), followed by black (16%) and green (12%).
  • Speed: Red was favored by the majority (76%).
  • Reliability: Blue was the top choice (43%), followed by black (24%).
  • High Tech: Black came in as the top choice (26%) and blue and gray came in second (both 23%).
  • High Quality: Black was the frontrunner (43%), with blue as its runner up (20%).
  • Cheapness: Orange was first (26%), followed by yellow (22%) and brown (13%).
  • Courage: Most chose purple (29%), then red (28%), and finally blue (22%).
  • Fear/Terror: Red came in first (41%) followed by black (38%).
  • Fun: Orange was the top choice (28%), followed closely by yellow (26%) and then purple (17%).

To summarize this:

Green is one of the more positive reflecting colors. It is one of the most commonly found colors in nature creating a sense of life, growth, and creation. Not to mention that it is universally used to mean “go.” This color best reflects the nature of expansion, positivity, and liveliness. It both builds trust with a brand and indicates a safe choice.

Blue is a dependable color. It portrays reliability and consistency. It makes users feel welcomed and comfortable. Blue is by far the most favored color. It creates trust, indicates reliability, and signifies a safe choice.

Red is seen as powerful and dynamic, working best as a complement to green. The contrast it brings to other colors gives us a strong presence and allows it to stand out. It represents urgency and calls for immediate action.

Yellow & Orange portray happiness, joy, confidence, and inspiration. Orange brings in the passion and power of red with the cheerful and light nature of yellow. These two colors work together well to inspire and motivate. Those colors are great to bring a bit of playfulness.

Use Color To Trigger Effective Emotions In Your Self-Service Content

So what does color psychology have to do with self-service? You can use careful color choices to leverage effective emotional reactions in your self-service content. To do this, you first need to look into your audience. Targeting who your audience is, what they want, what they are looking for in your products and services, why they need help, and the different places they need access to your help content is how you discover the best way to serve them. Understanding the emotional state of your audience and the desired mood you want them to achieve from their interactions with your self-help will help you choose the best-suited colors for different actions.

Imagine that choosing a color is like choosing your tone of voice. It should be custom-tailored to the unique situation that it’s being displayed on in order to best represent your company.

When deciding on your colors, you should think about whether you want to increase arousal and excitement (warm colors) or bring relaxation and decrease arousal and tension (cool colors). Keep in mind different areas you want to increase contrast and make something stand out, or decrease noticeable visibility. Think about what you want a certain action or article to be associated with by its color (gender, common emotional associations, common found universal colors like the blue sky, etc.).

How Does Color Ease Your Customer’s Self-Service Journey?

The way you design your experiences has a great impact on how well your customers are able to interact with them. You should make tactical choices when choosing what colors will lead your customers to take specific actions.

After making educated decisions on which colors will best achieve your goals, try leveraging them to help users take specific actions, such as warnings, tips, search buttons, cart icons, calls-to-action, etc. Choosing the appropriate colors should ease your customers’ journey through your self-service content, providing clarity and convenience.

Channel Your Brand Through Your Self-Service Content With Your Color Choice

Creating a consistent brand is admittedly not easy. Color plays a huge role in your consistent brand identity. Whatever color you choose for your brand will be displayed across all of your different platforms and areas of content, including your self-help experiences. So, it is crucial to choose the right color for your brand—not just to succeed in delivering the right message—but to succeed in providing a consistent message in the service you provide to your customers.

So how do you do this? Neil Patel found that “color increases brand recognition by 80%.” This means that when you pick a color, you need to stick with it—across all your assets, your website, social media channels, your self-service programs, and your knowledge base content. You want this to be something your audience sees and instantly recognizes as your company.

This doesn’t mean you should be choosing one color and using it everywhere. But, whatever color scheme you decide on should be carried everywhere. And you can use this to your advantage. Maybe you’ve decided to stick with blues and greens. You can leverage that color difference in your self-help by differentiating it. For example, make your homepage mostly blue varieties, while making all of your help content different green varieties. This helps ease your user into understanding that they are on the right path to self-help.

For reference on deciding what color will portray your brand best, “Dimensions Of Brand Personality” created this model for choosing a color to reflect your aesthetics.

Examples

This color theory may sound great and all, but it is quite abstract. Is spending time and money on choosing the perfect color for different places really worth the effort? Is changing the value or hue of a Help button on your website actually going to increase self-service resolutions? Let’s look into some real-life examples of color psychology in action.

1. Slack

Slack’s primary color palette consists of seven colors, so there are quite a few to choose from.

slack colors self-service

For their help center, they went with blue and green. They begin with the hero image, a gradient of those two colors. Green is also used to denote steps users need to take, unordered lists which are represented by check-lists, and outlines notes. Blue is used to draw attention to other relevant content used in tips. Yellow is used for warnings or attention.

slack color guide self-service

2. Shopify’s Use Of Complementing Colors

Shopify has nine primary brand colors. They also use lighter and darker tones of these colors throughout their website.

shopify colors

Shopify does an excellent job of leveraging the contrast in complementary colors. As you can see below, their homepage is mostly a toned down, pale shade of green, with only a few spots of black and white for text. Otherwise, it is entirely green, matching the hue of their logo.

shopify home colors self-service

Now, as you can see below, their help center’s primary color is indigo. They do this for three reasons. First, green and indigo complement each other well because they are opposite on the color wheel. Second, since these are such opposing colors, they could easily clash (think Barney), but Shopify successfully matched their toned down and pale value and chroma, so they can blend together well. Lastly, choosing indigo was a good decision, not just for the contrast it provides, but for the emotion it provokes to those seeking help. Indigo is often used to soothe and calm, while green brings more energy and urgency. So, it was a smart decision to make the help center a more relaxing color than their main home page, because they serve two different purposes.

Shopify help center colors self-service

As you can see below, within their help-center, they continue to utilize color choice in multiple strategic ways:

  • The tip section is blue and draws in attention to something important that, without special styling and color choice, would get lost and scanned over.
  • The video is in the green brand color, drawing immediate attention and prompting users to want to view it.
  • The feedback buttons use green for yes and red for no. This helps visually aid you in understanding whether or not you had a positive or negative experience.
  • The topic outline highlights where you are at, improving find-ability and making it clear to you which section of help or document you are in. This also improves usability by providing a sense of progression as you move from topic to topic.

shopify guide colors self-service

3. Asana

Asana’s brand colors are vibrant and fun, designed to inject energy and call users to take action progressing work forward.

asana colors

Asana’s help center is quite colorful too. They use purple to draw attention to call-outs and steps. Blue is used for links and green for tips. They correspond screenshots to parallel numbers with their relative tasks by using a matching purple to help lead your eyes. This also helps provide context and improve task completion.

Asana help colors self-service

4. Apple’s Strategic Lack Of Color

With all this talk of color, it’s almost shocking to see that one of the most successful companies in the world, Apple, actually lacks color in their brand and logo. There’s some back story to this as well. From 1977-1998 the apple logo was actually colored with rainbow stripes, to represent the first color monitor on a computer. Eventually, as many other companies adopted the color monitors, it was modernized to be a pale blue, and then the gray-silver color we now know it to be. Today, Apple’s main colors are silver, gray, black, and white. This is to shoot for the metallic, modern, innovative, and iconic look that Apple represents as a brand. Not many companies can choose such a neutral color and still be recognized for it, but Apple does it notably well.

Apple logo colors

In their help center, Apple uses minimal colors as well. Notably, they use a blue for different calls-to-action such as “Change topic” and “Change product” as well as links to content. They also use green to draw user’s attention to the best contact choice:

Apple support colors self-service

Takeaways and Recommendations

Color may not be something we actively think about every day, but it is something that affects our actions, emotions, and decisions constantly. Choosing the right colors for your self-service content is key to maintaining brand consistency and aiding customers in their journey with your company. Something like color choice is such an effective and powerful tool for your company to place importance on while being fast and affordable to implement.

A few recommendations:

  • Reflect your brand through the self-help.
  • Be careful using colors that create too much excitement. Even if red is one of your primary brand colors, we recommend using it sparsely. Instead, let your customers know that you’ve got their back by using shades of blue and green.
  • Choose main text colors that are easy to read.
  • Give content structure by using outlines and headings making different sections stand out.
  • Draw the reader’s attention to things they should not miss: tips, notes, warnings, etc. Use appropriate colors for each and stay consistent.
  • Guide users through clearly identified and easy to follow steps with the colors you choose.
  • Make it easy to access relevant content by adding links to it within the content that are easy to identify with blue underlines.


To learn more about how to improve your self-service program, read about increasing adoption, shaping your customer preferences, and ensuring successful self-service. Investing in self-service can provide a huge amount of benefits to your company and customers, but it is not a one-and-done deal. It is a process of growth, and therefore, you must work to ensure it is reaching its full potential.

Victoria
I love to write with one goal in mind - to help you build amazing customer experiences. Our content is tailored to help you understand your customers, design great products and deliver world-class customer self-service. I share my knowledge and experience through my articles, videos, podcasts, templates, and more - so you can take your customer experience to the next level.‍

Want to learn more about what we offer?

Explore the stages of our product tour and the self-service solutions we provide to see how our diverse applications can work for you.

Explore more blog posts!

That's not all! Our blog has tons to offer. Explore more posts below to keep learning!

no code customer experience

No Code Digital Customer Self-Service Platforms - The Benefits

Customer Self-Service

As the world increasingly moves online, businesses are looking for ways to improve their customer experience (CX). Building digital customer experiences does not have to be complicated or time-consuming. With the right tools and approach, you can create amazing customer experiences without a single line of code. In this blog post, we'll discuss different approaches to creating managing, and optimizing the customer experience.

continue reading →
customer self-service portal

Customer Self Service Portals: Benefits and Must-have Features

Customer Self-Service

Customer self-service portals provide an efficient way for customers to access content, perform convenient transactions and resolve common issues on their own, without having to call or email customer support. But not all self-service portals are created equal. In order to be effective, they need to have certain key features. Read on to find out what top features you should be looking for when building your customer portal.

continue reading →
knowledge base content planning

How To Select the Best Knowledge Management System for You

Knowledge Management

There is a lot to consider when evaluating and selecting the best system for your needs. In this blog, we will cover where to search for solutions and what to include on your shopping checklist.

continue reading →
building customer knowledge

Building Customer Knowledge

Knowledge Management

Customer knowledge is rooted in self-service and is fundamental for any successful business. It strengthens product success, which ultimately, creates a successful customer experience as a whole. And this is so crucial today.

continue reading →
customer centric culture

Develop customer-centric vision and culture

Customer Experience

Are you looking for ways to create a customer-centric vision and culture in your business? If so, we're here to help. In this post, we'll outline four steps you can take to create a customer-centric culture in your business. Let's get started!

continue reading →