Even experienced designers occasionally struggle with this: Selecting colors and making them work together harmoniously is tricky business. It's an art in and of itself. Let's bring some clarity to this topic.
Why should anyone pay you thousands of dollars to design their website?
If you said, “because I can solve their biggest problem with web design,” you’re right on track.
Solving problems is how you become valuable, and color is one of the most powerful tools you have as a web designer.
This article will focus on how you can use the psychology of color to become a valuable web designer in 4 steps:
🤑 FREE Color Psychology eBook - Download Now! 👉 https://bit.ly/3M4CAVT 🤑
Using the “right” colors can help your clients win on the internet. And when your clients win, you win. But how do you choose the “right” colors?
First, keep in mind that in psychology color theory, each color has three properties: its hue, or the name of the color; its saturation, or the richness of the color; and its brightness.
Each of these properties have psychological effects on us, so it’s important to create color variations by manipulating them.
Fortunately, many design prototyping tools like Figma easily lets us remix these properties using the HSB color system, a color system that’s more intuitive to humans than the RGB color system made for computers.
Next, you’ll have to understand the goals of your client and the context of their site:
Asking these questions to your client is the first step towards solving their problems with color and web design.
Now, to select colors that convey the appropriate message, you’ll have to learn about the psychology of color meanings.
There’s an important distinction between color symbolism and color psychology.
Color symbolism is the conscious or subconscious associations we learned about each color because of our culture, religion, and life experiences.
For example, blue is the world’s favorite color because many positive things in the world, like beautiful blue skies and bodies of water, are blue.
Because culture influences our color associations, you should keep in mind color symbolism around the world to ensure you send the message that you’re trying to send.
In Western culture, red is more frequently associated with bad experiences—fire alarms, red pen marks in grading, blood—than positive ones. But in China, red is an auspicious color that brings happiness and long life.
All the 11 basic hues—red, yellow, orange, green, blue, purple, pink, gray, white, and black—have different meanings depending on the surrounding context.
That’s why you’ll see that each color can hold a variety of different meanings in the chart below—these are the common color meanings in western culture curated by researcher Nick Kolenda, author of The Psychology of Color.
Take all the color meanings with a grain of salt because these findings were based on hues only. The same hue with different saturation and brightness can evoke different feelings.
Color Psychology, on the other hand, is the unconscious feelings it invokes in us.
Purple—the main color of Flux Academy—for example, is associated with quality, but psychologically it sparks our creativity.
Here’s the takeaway: color is too dependent to have a specific association all the time—it always needs context.
Fortunately, the beauty of web design is you can create the context for your color scheme through strategic use of layout, typography, and imagery. Without a solid grasp of these other design fundamentals, it’s difficult to send the right message with color alone.
If you want to master these design fundamentals, use them in a strategic way, and present your work in a way that exceeds your client’s expectations, consider checking out our 10k website process that has helped over 3,000 designers like you become the valuable designers they were meant to be.
All of your future clients will have one thing in common: they want a website that will help make their dreams come true.
With the rise of online businesses during the pandemic, more clients are expecting designers to create websites that help them with conversions—because a pretty website alone won’t help them achieve their dreams.
“Building the website is part of building the funnel. The more you can help out building the funnel, the more value you bring to your customer” - Ran Segall, founder of Flux Academy:
In order to understand how color psychology can help with conversions, we first have to learn a bit about how funnels work.
A simple marketing model to understand the funnel is AIDA, an acronym which stands for Attention, Interest, Desire, Action.
Color plays a key role in attracting our attention, building our interest and desire, and even encouraging us to take action.
When people visit a new website, they become aware that this site exists and colors are the first thing they see.
And after a few seconds, most of them have already decided if they want to stay or leave the site—in fact, some studies say web designers have less than 50 milliseconds to make a good first impression.
If these people decide to stay on the site longer than a few seconds, then within 90 seconds, they will have already formed a subconscious judgement about the site or product, and up to 90% of that judgement is based on color.
After site visitors are hooked on the site, they start reading the heading and subheading to learn a bit more.
But if the contrast between the typography color and the background color isn’t meeting accessibility standards, then we lose some customers in the funnel.
When designing websites, it’s important to keep in mind the contrast of our colors. You can use online tools to check if your background and foreground colors have a sufficient contrast ratio to be accessible for all.
We should also never communicate using only colors because nearly 5% of the world and 8% of men are color blind. When designing websites that accommodate colorblindness, we can also use tools like the Adobe Color Wheel to make sure our color schemes are color blind safe.
Customers will start scrolling and exploring the site messaging if the headline piqued their interest.
During this stage, the colors are supporting the messaging of the site or brand. That’s why we covered the psychological meaning of colors. As designers, we should be able to describe to our clients what messages our colors are sending.
A 2019 study on mobile advertising showed the two pictures below and found that analogous color schemes leave a more favorable impression on viewers than complementary color schemes—but the viewers were more likely to recall the ad with complementary color schemes.
This study relates to the desire stage because sometimes site visitors will leave the site. But if our color schemes are pleasant and memorable, they may be more likely to remember and revisit the site.
Analogous colors, or hues that are next to each other on the color wheel, seem to leave more favorable impressions because they create natural harmony—we often see it in nature, like the green, yellow, and orange fall leaves on a tree.
Complementary colors, hues on opposite ends of the color wheel, have high contrast, which makes them more visible and easier to remember.
Site visitors are more likely to click call-to-action buttons that pop.
Nearly 10 years ago, Hubspot published an article titled “The Button Color A/B Test: Red Beats Green.”
Although green is associated with “go” and red is associated with “stop,” red got 21% more clicks.
This is likely because red was the complementary color to the green logo, so it stood out more.
Tools like Crazy Egg can help us perform A/B tests like this so we can find the best color for our CTA buttons.
Besides making our CTA’s pop, we can also use color to encourage action by exciting or relaxing site visitors.
In psychology color theory, the warm colors near the red, orange, and yellow side of the color wheel can increase our arousal.
When we’re excited, we start thinking using shortcuts (heuristic processing) and make quick decisions.
In web design, warm colors could be appropriate if what your client is offering is simple.
On the other hand, if your client is offering something more complex, using the cool colors near the blue, green, and purple side of the color wheel could be more appropriate.
Cooler colors decrease our arousal, which makes us think more thoroughly (systematic processing).
Ruby Love, a leading brand that sells period underwear, is an interesting example of why context matters.
Typically, we associate blood and red with pain, but they transformed their red into something that is sensual, empowerful, and joyful.
After we see the eye-caching red, we see the woman in the hero image, who is wearing the underwear with joy and excitement.
Next, they capture our interest by quickly telling us what they offer with their red headline, “Period Underwear.”
As we keep scrolling, we see the same red and copy that reads “have the time of your month.” The red color supports their overall brand messaging. Now they’ve built desire.
They’ve successfully used red to communicate that their product can transform a painful experience into an exciting one—perhaps that’s why they kept the “Shop Ruby” button red, rather than use a green button that would stand out more. Ultimately, an A/B test can find out which button is better for their audience.
Personally, the amount of red on this site strains my eyes, but also I’m not their target audience. Women tend to favor warmer colors like red, while men tend to favor cooler colors like blue.
Understanding how Ruby Love used color and context to solve the problem of making periods exciting is how you’ll become a valuable web designer.
Understanding the psychology found in the color wheel isn’t enough if we don’t know how to speak to our clients about our value.
A year ago, Ran Segall shared on Instagram how he was on a sales call with the CEO of a new start up that wanted to hire him to design low value deliverables like business cards.
Ran quickly turned the conversation around by asking a simple question:
“As the CEO, what’s your biggest challenge for the next year?”
The CEO replied, “I need to hire 30 people in one year.”
The story ends with both Ran and the CEO winning. Ran proposed he can design a strategic website that will be crucial to meeting the CEO’s hiring goals because every prospective employee would be visiting the website to decide if they want to apply to work there—so the CEO changed his mind and realized he did need a high value, strategic website design.
The secret technique that Ran used to turn the conversation around is called asking powerful questions.
The concept of powerful questions comes from the coaching and education world. And it turns out, asking a powerful question is actually not that simple. Asking a short, open-ended question is not enough.
To truly be powerful, these questions have to be asked with no hidden agenda and with the intention of helping the receiver of the question.
“No hidden agenda” means the answer to the question should not help you, but help the receiver.
As a silly example, if you ask your client, “what is your favorite color,” that is not a powerful question because the client already knows what their favorite color is and the answer is only helping you.
Like Ran’s question, a powerful question should help the client achieve greater clarity, should challenge their assumptions, and help the client get closer to what they really want.
If this type of stuff interests you, I recommend checking out Ran’s free Intro to Web Design Freelancing Youtube course, which covers how to get your first client.
We also offer the 6 Figure Freelance Designer course, which covers sales calls and negotiations, but it also teaches things like finding a niche, developing a marketing strategy, client outreach, finances, and scaling your freelance business.
Want to boost your efficiency while working with colors? Check out these collection of tools on Ran’s instagram.
