Using Color to Brand Your Website
Tags: design, beginners, webdev
Published: 2020-02-03 12:21:52

<p>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?</p> 

<p>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.</p> 

<h2>Why does color matter?</h2>

<p>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.</p> 

<p>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 <a href="https://www.businessinsider.com/facts-about-coca-cola-2011-6?op=1&r=US&IR=T#around-the-world-the-average-person-consumes-a-coke-product-every-four-days-10">recognize Coke’s red-and-white logo</a>. If a picture is worth a thousand words, a good logo is worth a million more.</p>
<h2>Choosing a dominant color</h2>
<p>The first step to successful branding is figuring out what your website’s <b>dominant color</b> 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 <a href="https://www.psychologytoday.com/us/blog/habits-not-hacks/201408/color-psychology-how-colors-influence-the-mind">colors deeply impact our perceptions</a> of a brand’s personality. 

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

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

<p>To help you choose, I’ve broken down the effects of other popular colors below:

<ul>

<li><b>Red</b> sets off strong emotional reactions and creates a sense of urgency and excitement.</li>
<li><b>Purple</b> represents wealth and wisdom. People also associate purple with success, and it’s often used in beauty and anti-aging products.</li> 
<li><b>Blue</b> evokes trust and security. It’s also the number one preferred color by both men and women.</li>
<li><b>Gray</b> is popular in the technology and automotive industries, because it represents simplicity, precision and logic.</li> 
<li><b>Black</b> calls to mind elegance and sophistication, and it is often used to market luxury brands.</li> 
<li><b>Yellow</b> 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.</li>

</ul>  
<h2>Finding your complementary colors</h2> 
<p>If red is Coke’s dominant color, then white is its <b>complementary color</b> – 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:

<center><img src="https://dev-to-uploads.s3.amazonaws.com/i/j5dv4gsqnilp9xmfr647.PNG" alt="Coke advertisement"></img></center>

<p>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.</p> 

<p>You can use more than one complementary color if you like. Some websites do this beautifully. On its homepage, sparkling water brand <a href="https://www.drinkseriously.com/">Seriously Unsweetened</a> takes a few liberties with yellow and pink that really pay off:</p>

<center><img src="https://dev-to-uploads.s3.amazonaws.com/i/plgy7rk1e118xhjezyjo.PNG" alt="Unsweetened homepage"></img></center>

<p>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 <a href="https://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/">color scheme</a> is making sure your dominant and complementary colors actually <b>match</b>. In other words, the goal is a cohesive color palette in which all of the elements work for each other.</p> 

<p>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?</p>

<p>To make this process as easy as possible, you can use a <b>color matching tool</b> like <a href="https://color.adobe.com/create">Adobe Color CC</a> 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.</p> 
<h2>How to use complementary colors on your site</h2>
<p>We’ve seen how complementary colors work in a 2D Coke ad. But how do they function on an actual website?</p>

<p>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!</p>

<p>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).</p> 
<h2>The wrap-up</h2>
<p>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!</p>