The Psychology of Color in Web Design

Web design needs to do several things at once. It must look good. It must make sure the navigation of the website is clear. It must hold an internet user’s attention for as long as possible. And it must gently lead the user down the conversion funnel, quietly urging the user to do whatever action the site owners have as the goal of the site.

Because web design needs to have an influence over people’s behaviour, more and more designers have been looking to the psychology of color to help them create websites. They can play on cultural references to suggest trust, urgency or mystery to the target audience.

Read on to find out which colors are associated with which feelings. Please note, cultural differences can also have a big impact on these details.

Red

Red is a stimulating, exciting color. It is associated with passion, power and sometimes anger. It can be used for warnings or to show danger, but it can also suggest strength, determination and boldness.

Warmer reds, like brick or maroon, and strong and comforting – good for sites that want to suggest the lasting qualities of a brick wall. Brighter reds, like true red or tomato, are great for youthful websites that want to suggest energy and eagerness to leap before they look.

The Psychology of Color in Web Design

Pink

Pink is associated very strongly with youthful femininity. It is playful and brings to mind bubble gum and innocence.


It is ideal for websites that hearken back to olden days or that target a particularly feminine audience.

The Psychology of Color in Web Design

Orange

Orange is a more balanced and less overwhelming colour than red. Vibrant, energetic, friendly and inviting, it is ideal for designs that need movement and energy.

Websites that want to showcase their creativity often choose orange because it is unique and exciting, but it still has the comfort of a warm color.

The Psychology of Color in Web Design

Yellow

Yellow is often considered the most energising color. From the earliest ages, people learn to associate yellow with the sun, so it becomes associated with warmth and happiness. That makes bright yellow perfect for sites designed for children, as it grabs their attention.

More subtle shades of yellow have more complex associations. Darker shades can suggest antiquity, suggesting yellowed parchment. Because of that, it can also be associated with wisdom and curiosity. It therefore is great for sites that want to demonstrate a sense of authority and intelligence.

The Psychology of Color in Web Design

Green

Green is strongly associated with plant leaves and subsequently has lots of positive associations. It can give users feelings of calm, rejuvenation, affluence and optimism.

Darker shades are more linked to money, so sites that want to suggest affluence, growth and stability often use those shades. Lighter shades are more associated with spring and growth, so websites that want to reflect relaxation, freshness and honesty often use lighter shades.

Green is also directly associated with the environmental movement, so sites that aim to broadcast ethical standards often use green.

The Psychology of Color in Web Design

Blue

Blue calls to mind dependability, trustworthiness and security. It is also calming and has an element of spirituality about it.

Most corporate and business websites use dark blues to call to mind their experience, success and reliability. Light blues are best for friendly, open websites, like social media sites.

Purple

Purple has long been associated with nobility, so it is no surprise that dark shades of purple imply wealth and luxury. Lighter shades suggest fields of lavender and are associated with spring and romance.

Websites that look mysterious yet elegant use dark purples. Those sites that opt for lighter shades will speak to people looking for romantic items or ideas.

Black, White, and Gray

Black, white and grey are usually background colors, allowing brighter colors to make the real impact. Still, they call to mind their own associations.

Black suggests power, modernity and sophistication, while white suggests cleanliness, simplicity and innocence. These competing associations play off of each other as nicely as the colors themselves do, making black and white designs especially strong.

Grey is a neutral color. When used well, it is associated with tradition, sombreness and calmness. When used badly, however, it can cause a design to lack energy.

All of these colors are best for websites that want to call to mind tradition and seriousness, like news sites.

Browns

Browns, which include creams and tans, are often used for textured backgrounds. Backgrounds that mimic paper, fabric or stone are usually brown, and as such, browns give a site a sense of wholesomeness and cosiness.

Creams are calm, elegant and pure, making them a great background color for a website that wants to imply a sense of tradition. Tans are conservative and bring to mind piety. They can be dull, but they can also be reassuring, which makes them ideal for a site that doesn’t want to be too bold or outrageous. Dark brown feels wholesome and reliable, like a loaf of bread. It is associated with warmth and comfort. Sites that want to demonstrate experience and reassurance often use brown.

The Psychology of Color in Web Design

Conclusion

Colors can create a very specific mood or impression on a website. If a site’s color gives the wrong impression, it can result in high bounce rates, as the site will suggest inexperience, unprofessionalism or even untrustworthiness. If the impression is the right one, it lets users know that the site is trustworthy and that it ‘gets’ its niche. Little wonder, then, that the psychology of color will remain a major concern for web designers.

About the Author:

This is a guest post contributed by Neeru from Print Express. Neeru works in marketing and design. She likes sharing her knowledge of web and graphic design.

Series on Color Inspiration:

You may also be interested in our showcase series on color in web design:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

8 Responses

Comments are now closed on this post.

  • Alex Braker, July 24, 2012

    I think in the web design, the colors play crucial role and all the colors have their own importance in the web design. The colors can change the mood of the users from the website and according to me in the web design, the orange, blue and yellow color are mostly used. If you use proper color according to your theme, you can decrease the bounce rate of your website.

  • Very nice this post..I appreciate so much these explanations. I think is important who every designer should knows these elementary rules..So useful..Thanks for sharing

  • RIchard Trethewey, July 26, 2012

    Yes, thank-you for writing this informative article. You put words to what most of us feel instinctively, but find hard to articulate or utilize in practice. My buzzwords are simple and elegant, and you hit it on the head. Concise and eloquent. I know I’m going to refer to this page frequently from now on. Truly, thanks a lot.

  • Neo Mudaly, July 26, 2012

    Some may disagree, but I think color is just as important as Typography. Color definitely sets the tone for content. Even before you engage with a site’s content, color helps create the context for experience. Thanks for putting color into perspective.

  • PS, July 26, 2012

    Nice article.

    There seems to be an unfortunately large number of amateur sites using red and black these days.

    I’ve even seen an insurance website in red and black!

    Now if red evokes “danger” and black (the color of the Hollywood villain) evokes “mystery”, “malevolence” or “untrustworthyness”, how is this helping users along the conversion channel? For Financial Services? LOL.

  • Jim, August 3, 2012

    Great list, thanks for the reminder!

  • BrianSwann, August 4, 2012

    Creating a good layout for your website design is the first step in capturing the attention of the online market. That includes color of the site that sets the tone of a reader. Most of readers who visited sites that does have unpleasant color leave the site without reading the content or did not even care to see what the site is all about.

  • rickymartin, August 29, 2012

    I was really happy to arrive this site. Thanks for sharing.

Close