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
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:
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
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
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.
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
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
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.
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.
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.