When it comes to web design, don’t underestimate the power of color.
Colors have a strong impact on the design solutions we produce and the experiences our users take away. As you may already know, colors help to create an atmosphere. They can radically alter our mood, our perception of value, and even influence the choices that we make. For this reason, understanding color psychology is crucial for the success of your website and its content.
Are you considering how your design and color palette influences your audience? A poor color choice can negatively change the impact of your message. Get it wrong and your messages may be avoided entirely. There’s no absolute right color choice you should make, as the way we interpret colors and their meanings is dependent on a host of factors. However, here are a few tips and considerations to help you with your selection:
Research has found that color appropriateness in relation to the product is much more important than the individual color itself. For example, someone in the market for a motorcycle would probably shy away from brands that use pink or glittery color schemes.
Choose colors that connect with your customers’ perceptions of your brand’s personality. Certain colors do align with more specific traits and it’s important that the ones you choose support the personality you want to portray, but colors aren’t exclusive to single traits. For example, green can allude to the ruggedness and environment (Timberland’s G.R.E.E.N standard) or to money (Mint.com).
Emotions people associate with color can change depending on their individual, cultural or religious backgrounds. Here are some typical associations western cultures make with color:
- Black: sophistication and power
- White: cleanliness, sophistication, virtue
- Red: courage, power, strength; can also stimulate appetite
- Blue: calmness, peace, trust, safety
- Yellow: optimism, happiness
- Green: balance, sustainability growth
- Purple: royalty, spiritual awareness, luxury
- Orange: friendliness, comfort, and food
- Pink: tranquility, femininity, sexuality
Contrast matters. People often assume that difference in color is what creates contrast, but that isn’t true. Two colors can be completely different but have no contrast because their tone is the same. An easy way to test your color contrast is to convert it to grayscale. Generally, high contrast is the best choice for important content. Dark on light or light on dark may not be very exciting, but it is legible to your users. Keep in mind, however, that if everything is in high contrast, nothing will stand out.
People like simplicity. Each color adds or takes away from your content. Too many colors make for a confusing message. Choose 2 or 3 colors to make your content easier to interpret and understand. The color wheel is a great tool for helping you make this choice.
There are a few different types of geometric relationships on the color wheel that make up what is known as “color harmony.”
- Complementary: colors opposite to each other on the color wheel
- Analogous: colors that sit next to each other. These are “related” colors that create pleasing and relaxed visuals when used together. They don’t stand out from one another, but can create subtle and beautiful content. You may need to add a complementary color to make a particular item stand out.
- Triad: a color combination made of three colors that are evenly spaced around the color wheel
- Split-complementary: Choose one color as your base, and combine with two complementary colors adjacent to its opposite
- Rectangle: a color combination made up of four colors in complementary pairs
- Square: similar to a rectangle palette, but the two sets of complementary pairs are colors evenly spaced around the circle
Caution: Color Blindness
Individuals with color blindness have a hard time distinguishing between certain colors. Red and green are two complementary colors that pose a common problem to people who are colorblind. Remember to use colors with high contrast and try to never use color as the sole information source to avoid any issues.
More resources:
Here are some tools you can use to help you choose a color palette for your site:
- colr.org – lets you upload an image and see the range of colors within that image
- colorblender – generates a set of five colors that will work well together
- Adobe Colour CC – lets you try out and create different color schemes
- Check my colours – lets you determine if you’re using the right color combinations in your web design
Want more? Sign up to get our newsletter delivered to your inbox the first Thursday of every month. Receive links to the latest web-related news and blog articles, best practices, and thought-leadership commentary.