Support Sign Up

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 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 together
1. 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 design
2. 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 design
3. 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 background
4. 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 design
5. 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.



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.



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.