When you choose a color palette for your website, you likely intend to accomplish a few specific things. The colors you use can impact the mood of those visiting your site, reinforce your messaging and branding or entice visitors to click on a call-to-action (CTA) button.

 

The psychology of colors is quite complicated and multifaceted, but in a nutshell, it’s best to use complementary colors whenever possible. Complementary colors are opposite one another on the color wheel — red and green, for example. Using these opposing colors creates a harmony for your page, so it isn’t jarring for the site visitor. Complementary colors contrast with one another, so it’s vital to use a careful balance and to avoid putting text and background together as complementary.

 

There are several benefits to using complementary colors.

 

1.Stand Out From Your Competition

---

Using complementary colors is bold and not for the faint of heart. Use the wrong shade, and the colors simply won’t work together. However, when you choose colors in a palette that meshes well, you will create a finely tuned visual tension that will make the consumer sit up and take notice.

 

Opposite color combinations include:

 

• Blue and orange
• Red and green
• Yellow and purple

 

One thing that will ensure the colors don’t compete too much is choosing different saturation points for each. For example, don’t go for a combination that is a 50 percent saturation yellow and 50 percent saturation purple. Instead, choose a deeper purple, such as 80 percent saturation, with a lower-saturation yellow, such as 25 percent.

 

 

One example of a site that uses complementary colors to create a unique look is the Los Angeles Lakers’ NBA site. Notice how the page uses a deep purple with a bright yellow — the saturation differs between the two colors. This creates an overall look that’s eye-catching, but not jarring.

 

2. Make CTAs Stand Out

---

One benefit of using complementary colors is that the opposing color naturally draws the viewer’s eye. So, if you want to really make a CTA pop and capture the reader’s attention, you should use the opposite color on the color wheel for the CTA.

 

 

For example, National Fulfillment Services uses a fade from blue to green for the background in their heading. They then put the CTA within a box in the complementary color orange. This makes the CTA stand out and draws your eye. You immediately want to do what it’s telling you to do and click on the “learn more” button.

 

3. To Highlight Important Information

---

Using a complementary color to your main color can help you highlight information that otherwise might face into the background. Because the complementary color will contrast more sharply with everything else, it will draw the reader’s eye. For example, let’s say your overall color scheme is composed of blues and grays. You can use a pop of orange to draw the user’s eye to a headline, around an information box or as the navigation menu.

 

 

One example of a site that uses complementary colors to highlight important information is United Airlines. Most of their page is in blues or neutrals. Then, they have a pop of a complementary orangey-yellow color to highlight their MileagePlus program. This drives people to either log in or join. It is a sort of CTA, but a bit bigger than your traditional CTA.

 

You might also think they would use this to get people to book a flight, but the obvious goal for conversions here is to get site visitors to sign up so United Airlines can capture people’s email addresses and contact information. United can then continue to market to those qualified leads and let them know about special offers, with the goal of driving future bookings. United likely needs the positive marketing here to counteract recent issues they’ve dealt with regarding their overall image.

 

4. Take It to the Next Level

---

Another variation is to use a split-complementary color scheme. In addition to the base color, a split-complementary color scheme uses the two colors adjacent to its complement. For example, if you’ve chosen green as your primary color, its opposite on the color wheel is red. In a split-complementary color scheme, you’d also use orange or yellow-orange as an accent color.

 

The benefit of using split-complementary colors is you create a very eye-catching site that has multiple layers and a professionally designed look.

 

One key is to use your base color as your main color, and the two adjacent complementary colors only to highlight certain aspects of your site. Otherwise, the split-complementary look can become overwhelming and look like some bottles of paint threw up on your website.

 

 

Big Top uses complementary colors for a gorgeous design. Note that the main color is purple, and orange and blue are the complementary colors. It is eye-catching and memorable.

 

A complementary color scheme takes a bit of thought about what your base color will be, and which colors and shades of those colors will best complement that base. It’s a balancing act among colors that requires a bit of bravery and thinking outside the box.

 

However, the results can be stunning and encourage people to take the actions you most want them to, such as clicking on a CTA and converting into subscribers.

Check Out These Great Resources to help with your Marketing:

Try Commun.it to easily track brand awareness, discover new leads, share quality content, schedule posts and download progress reports.

Social Searcher is an amazing way to grow an online brand in leaps and bounds it simply takes creativity, passion and consistency to keep things moving in the right direction.

Iconosquare is the number one platform for Instagram & Facebook analytics and social media management.

SocialPilot is the Most Cost-Effective Marketing Tool. Powerful Publishing. Insightful Analytics. Seamless Collaboration.

Bluehost is a leading web hosting solutions company. Bluehost has continually innovated new ways to deliver on our mission: to empower people to fully harness the web. They provide comprehensive tools to millions of users throughout the world so anyone, novice or pro, can get on the web and thrive with our web hosting packages.

SEMrush is an all-in-one tool suite for improving online visibility and discovering marketing insights. Our tools and reports are able to help marketers that work in the following services: SEO, PPC, SMM, Keyword Research, Competitive Research, PR, Content Marketing, Marketing Insights, Campaign Management.

HubSpot offers a complete CRM platform with all the tools and integrations you need to grow better — whether you want to increase leads, accelerate sales, streamline customer service, or build a powerful website.

To check grammar and spelling to style and tone, Grammarly helps you eliminate errors and find the perfect words to express yourself.

Autor

Lexie Lu es diseñadora y escritora. Le encanta investigar las tendencias en el sector del diseño web y gráfico. Escribe semanalmente en Design Roast y puedes seguirla en Twitter en @lexieludesigner.