We’ve all heard that color can affect people’s perceptions of a brand. But why is color such a big deal to us, and how can we choose colors wisely?
Colors are important because they bring brands to life in ways that an audience can identify with. Good color choice and branding will make people care about your website, and keep them coming back.
Why does color matter?
A strong brand doesn’t just pique interest; it holds interest and inspires trust. Using carefully considered colors will help your brand achieve these goals, because color speaks to us on a subconscious level.
Take the classic example of Coca-Cola. The most recognizable element of this soft drink’s branding is simply the color red. In fact, 94% of the world’s population can recognize Coke’s red-and-white logo. If a picture is worth a thousand words, a good logo is worth a million more.
Choosing a dominant color
The first step to successful branding is figuring out what your website’s dominant color is going to be – what’s going to be your equivalent to Coca-Cola’s fire engine red? You should first think about the emotions you want to evoke in people visiting your site. Different colors correspond to different emotions, and there’s even some research confirming that colors deeply impact our perceptions of a brand’s personality.
Just look around you to see how businesses use this to their advantage: a lot of financial services companies have blue in their logos – think Bank of America, American Express, and Citi – because it builds a sense of trust.
What do you want to inspire in your site visitors? If it’s a sense of tranquility, health, or nature, choose green – it’s the easiest color for the eye to process, and so has a relaxing effect. If you’re going for energy and friendliness, choose orange – it encourages action and even attracts impulse shoppers.
To help you choose, I’ve broken down the effects of other popular colors below:
- Red sets off strong emotional reactions and creates a sense of urgency and excitement.
- Purple represents wealth and wisdom. People also associate purple with success, and it’s often used in beauty and anti-aging products.
- Blue evokes trust and security. It’s also the number one preferred color by both men and women.
- Gray is popular in the technology and automotive industries, because it represents simplicity, precision and logic.
- Black calls to mind elegance and sophistication, and it is often used to market luxury brands.
- Yellow grabs attention and encourages optimism. But it can also put strain on the eyes, which is why it’s best used as a complementary color rather than a dominant color.
Finding your complementary colors
If red is Coke’s dominant color, then white is its complementary color – it works well with the main color, and emphasizes important information that is central to the brand (you can also call these “accent” or “secondary” colors). Take the Coke ad below:
Red is clearly the dominant color. It lets us know right away that this is an ad for Coke, and it brings out the feelings of warmth and excitement that the brand has cultivated over the years. Meanwhile, the white accents in this ad emphasize key information, like the actual name of the brand and its tagline. That’s what successful complementary colors do – look good, and highlight key information.
You can use more than one complementary color if you like. Some websites do this beautifully. On its homepage, sparkling water brand Seriously Unsweetened takes a few liberties with yellow and pink that really pay off:
This stunning design wouldn’t have worked without the page’s majority-white background to keep it simple – if you do decide to use more than one accent color, be mindful that your design doesn’t become too overwhelming. The key to a beautiful color scheme is making sure your dominant and complementary colors actually match. In other words, the goal is a cohesive color palette in which all of the elements work for each other.
So you’ve chosen your dominant color based on your brand values. Now, how do you choose your complementary colors based on that dominant color?
To make this process as easy as possible, you can use a color matching tool like Adobe Color CC to identify the best options. Tools like this allow you to simply input the color code of your dominant color, and based on that, receive a selection of complementary colors. You can filter the results by different color schemes, from monochromatic to analogous, to tailor the outcome to your brand vision.
How to use complementary colors on your site
We’ve seen how complementary colors work in a 2D Coke ad. But how do they function on an actual website?
Think of all the information that isn’t central to your site, but that still needs to stand out. Navigation bars, quotes, buttons, and subtitles are all potential places for a splash of secondary color. Here’s the trick: all of these elements will work, but only if you don’t use them all at once. Emphasis on everything is emphasis on nothing!
For example, if you’re stuck between highlighting a nice quote from a team member, or your contact information – what should you do? You can’t apply a secondary color to both – that would just drown both out. In this case, I’d prioritize the contact information (essential) over the quote (adds value, but is not essential).
The wrap-up
So, let’s recap. You’ll only need three tools to create an effective website color scheme: a dominant color, some complementary colors, and the know-how to organize them. If you know the kind of emotions you want your website to stir up, then deciding on a dominant color will be easy. Next, a digital tool can help you generate the perfect complementary colors. And finally, you can use your newfound expertise to create the perfect website!
Top comments (6)
Very Interesting. I have chosen green for my blog (because I like it) do you have any insight on how green is perceived by people?
Hey there! Great choice -- green relaxes people and creates a calming effect, probably because it's the easiest color for the eye to process. Your blog must be a pretty peaceful place!
I imagine that also depends on the type of green. I'm not sure I'd associate the lime green of the 1980s monochrome monitors to nature so much as to DOS 😁.
This was a fantastic article. Many Thanks Maura.
I was wondering if there are any blogs/books you recommend to learn more about design, especially for a web developer.
Thanks for the write-up! I've been looking for a way to brand my personal site and this has given me some insight on how I can move forward.
Hey, Kyla! I'm glad this article helped. Happy branding!