The Psychology of Color in Web Design: Part 2

In Part 1 of this two-part series, you learned the meaning behind specific colors. In this second installment, I will discuss the psychology of color and gender, color palette tools, color combinations you should avoid, and how to use color to increase conversions.

Use the Right Color

The psychology of color and gender

Beyond the basic psychology of color, studies show that gender affects people’s color preferences as well. When planning the color palette for your website, keep in mind the following:

Color by Gender

  • Women like: blue, purple, green, and red
  • Women don’t like: orange, brown, grey, and yellow
  • Men like: blue, green, black, and red
  • Men don’t like: brown, orange, yellow, and purple

When it comes to tints (the mixture of a color with white) and shades (the mixture of a color with black), men prefer shades and women prefer tints. Men also tend to prefer bright colors while women more often prefer soft colors.

 

Three steps to higher conversions with color

Now that you have a basic understanding of the psychology of color, it’s time to choose the best colors for your website.

 

1. Determine your purpose

Take a moment to consider the purpose of your website. Why do people come to your site? For information or advice? To purchase goods or services? To be entertained? Who visits your site? Men or women? Adolescents or adults? What’s your niche?

2. Choose relevant colors

Use color psychology to choose one or two colors that are relevant to the purpose of your website and to your visitors. Too many colors can quickly look cluttered and messy so limit yourself to a maximum of two for this step.

Here’s a few examples:

  • Does your website sell luxury goods to men? Choose colors like black, grey, white, or blue. Avoid colors purple, orange, pink, and yellow.
  • Does your website provide health and fitness information to men and women? Green, yellow, or orange may be a good place to start.


3. Add an accent color that converts

Now you need to choose a color that will stand out and get people’s attention. You’ll use this color sparingly and only on the most important things like call to action, buy now, or newsletter signup buttons.

For example, check out how Gillette uses orange as their accent color:

The orange grabs people’s attentions and encourages them to click the button. It also compliments the main color, blue, in their design.

 

Color palette tools

Need some more help choosing color combinations for your website design? Melaine Karlik from KarlikDesign.com has a great step by step guide for choosing the best color combinations. In the video, she suggests using Adobe Kuler for help choosing a color theme.

Some other great color tools:

  • Color Calculator – pick a base color, choose a color harmony, and then tweak as needed.
  • ColorSchemer Touch – free iOS app to explore, create, and share color palettes.
  • ColorSchemer ColorPix – free web app that lets you grab any color from the web for use elsewhere.
  • COLOURlovers – community to create and share color palettes, and discuss color trends.

 

Five color combinations you should never use in web design

When choosing a color palette for your website, it’s also important to keep in mind a few combinations that do not work well on the web.

Don't use yellow and green together1. Yellow and green
Although the combination of these vibrant colors does grab people’s attention, it is also super obnoxious and often unreadable. They are also too close in hue to use side-by-side or layered together.

 

Don't use green and red together in web design2. Green and red
They’re okay for Christmas decorations, but not web design. They clash and make text hard to read. The sharp contrast causes text and images to look like they are vibrating, which is tiring on the eyes.

 

Don't use purple and green together in web design3. Purple and green
Barney! Shocking enough to get people’s attention, but like the combination of red and green, this is difficult to read and hard on the eyes.

 

Don't use red text on a black background4. Red on black
This is fine for vampire movies and Halloween but should otherwise be avoided. Red text on a black background is hard to read. Generally speaking, avoid all colored text on black backgrounds.

 

Don't use blue and red together in web design5. Blue and red
These are perfect for the American flag, but not okay for web design. When used together (both vibrate), they make text nearly impossible to read.

 

Conclusion

Website design often overlooks the importance of color in branding and site performance. Using the psychology of color and the tools and tips above, you can now choose colors that are relevant to your site’s purpose and audience. You can also increase conversions by selecting an appropriate accent color that will attract people’s attention to all the right spots.

Which websites do you think use the power of color most effectively? Please share them in the comments section below.

 

Follow Me

Dawn Bowman

Managing Editor at KillerStartups
Dawn is an American artist and journalist currently living in SE Asia. She is the Managing Editor at KillerStartups, an online publication which focuses on tech startups, website development, and entrepreneurship. Dawn is passionate about travel and committed to the location independent lifestyle. Follow her on Twitter @DawnEBowman.
Follow Me
The Seven Best Free Travel Apps
The Psychology of Color in Web Design: Part 1

19 Comments

  1. The pros and cons of color in web design is quite interesting. I found it very useful. Thank you.

    Reply
    • Thanks for the feedback, Emma. :)

      Reply
      • This is really fascinating, You’re a very skilled blogger.

        I’ve joined your feed and look ahead to seeking extra of your wonderful post.
        Additionally, I have shared your web site in my social networks

        my web page … cybex adjustable bench; Mikki,

        Reply
      • After looking over a few of the articles on your website,
        I really like your technique of writing a blog. I book marked it to my bookmark website list and will be checking back soon. Please visit my
        website too and tell me how you feel.

        My weblog – best Adjustable dumbbells reviews

        Reply
        • Thanks so much for the feedback!

          Reply
      • Can you tell us more about this? I’d love to find out some additional
        information.

        Also visit my web-site: Minn kota endura c2 30
        (youtube.com)

        Reply
    • Have you found that specific colors have improved your conversion rates and interaction?

      Reply
    • Have you been able to do so effectively on your site?

      Reply
    • Thanks! Do you have any insights to add?

      Reply
  2. Wow it’s really awesome article,can you please give me the more information about this one?

    Reply
  3. Thankyou so much for sharing link.it’s really helpful to me.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>