Color Theory (Or The Reputation Of Colors)

The application of color theory to website design.

🖼️ David Erickson/Midjourney - Explosion of paint, colors of Burnt Orange and Air Superiority Blue

Color psychology is the study of how colors can influence human behavior and emotions. In the context of website design, colors can evoke specific feelings, perceptions, and reactions in visitors. 

According to Zillow Group, which conducts research on colors in the real estate market, high performance colors include light blue (one of the world’s most popular colors), taupe or grey (homes with neutral colors sell faster), and black (perceived as luxury or high value).

Low performance colors include brown (homes with brown-colored walls sell for $2,310 less than expected), dark or bright red (associated with blood or pain), cream yellow (yellow is only liked by 5% of people). 

In this article about color psychology, we’ll address:

• Color Theory

  • The Color Spectrum

  • The Color Wheel

  • Color Harmony

  • Color Context

• Applying Color Theory To Website Design

But First, My Ugly-As-Sin First Website

Before we get into it, though, I want to tell you a story but only if you promise not to tell anyone, okay? 

My first website was absolutely hideous.

I was learning to code HTML and so focused on applying that knowledge that I spent scant attention to how the site actually looked. 

I learned how to apply color to fonts and to the background of pages and did just that liberally. I remember showing it to someone–bursting with pride at having conquered the HTML code and the fruits of my labor–and got an umm, okay response from the person to whom I was showing it. 

It was absolutely garish; huge, bright red blocks of backgrounds and white copy. I cringe even thinking about it. Fortunately, this was before the Wayback Machine started archiving websites, so don’t bother looking for it.

I should’ve spent some time considering color theory along with my laser-focus on writing code. Needless to say, I quickly learned to pay attention to color when designing websites. 

For years, a colleague of mine would give me his opinion on the look of websites I designed and because I respected him, I took his feedback seriously. 

One day, after probably a decade of opine-ing on my site designs, he told me he was color blind. Would’ve been nice to know a decade ago.

My initial reaction was, why am I asking you for your opinion?!?

But his feedback was actually invaluable because of the very fact that he was color blind. I didn’t realize it at the time, but I was creating accessible website designs from the start. 

Significance Of Primary, Secondary & Monochromatic Colors

Let’s take a quick look at the psychological significance of colors in Western culture.

Red 

• Psychological Effects: Energy, excitement, passion, urgency.

• Use in Web Design: Often used for call-to-action buttons, sales, or to draw attention to critical elements. 

Blue

• Psychological Effects: Trust, calmness, professionalism, stability.

• Use in Web Design: Commonly used in corporate websites, especially in the banking and finance sectors, to evoke trust and reliability.

Yellow

• Psychological Effects: Happiness, optimism, caution.

• Use in Web Design: Can be used sparingly to grab attention, like for a sale banner or warning notifications.

Green

• Psychological Effects: Nature, growth, calmness, health, prosperity.

• Use in Web Design: Widely seen on eco-friendly, organic, or health-related sites. Also used to indicate positive actions, like successful uploads or approvals.

Purple

• Psychological Effects: Luxury, mystery, creativity, spirituality.

• Use in Web Design: Often seen on creative portfolios or luxury product websites.

Orange: 

• Psychological Effects: Enthusiasm, excitement, warmth, caution.

• Use in Web Design: Commonly used for CTAs, as it's less aggressive than red but still attention-grabbing.

Black 

• Psychological Effects: Luxury, sophistication, formality.

• Use in Web Design: Common in luxury brands, photography websites, or minimalist designs to convey sophistication.

White

• Psychological Effects: Purity, simplicity, cleanliness.

• Use in Web Design: Used for negative space, backgrounds, and to create a clean, uncluttered look.

Grey

• Psychological Effects: Neutrality, balance, formality.

• Use in Web Design: Often used for typography, backgrounds, or to mute and balance other colors.

Understanding color psychology is important, but a few additional points are worth noting: