50 Shades of “Hey!”

Call to Action – Part I

Every website you visit will have at least one button, somewhere, that invites you to click it. Whether it says BUY NOW, LEARN MORE, or just CLICK HERE, it is a Call to Action. Sometimes these buttons stand out, and sometimes they get lost in the crowd. Obviously, you want your Call to Action to stand out. Here are some pointers on how to visually help your Call to Action catch the viewer’s eye using color.

Not all Call to Actions are buttons. Sometimes it is just text and sometimes it is an image. But no matter what kind of graphic you are using, you want it to do two things, visually: Stand out, and blend in. That might seem like a contradiction, but let me explain. And then I’ll give you a couple of visual examples.

A short lesson on color theory

Making something stand out doesn’t necessarily mean it has to be in glaring colors that completely clash with the colors and design of your website. Knowing a little bit about color theory can help you use colors that will stand out, but still fit in with the overall theme of your website. One method of creating a stand-out Call to Action is to use what are called ‘complementary colors’. There are many complementary color combinations that can be used with great effect on your site.

Take a look at the color wheel. The colors opposite each other on the color wheel are ‘complementary colors’. So, put simply, if your website’s color theme is green, you would use a red color for your call to action; if it is blue, then you would use an orange color. This is not a carved in stone ‘Rule’, just one of many ways to help your Call to Action stand out, while still working with the main theme of your website.


Here is an excellent example of using complementary colors for a Call to Action – Akamai. The predominant color of their site is a light blue, and they have used a simple orange button for their call to action. It stands out, but it doesn’t clash. You can see that they have used complementary colors in their logo, and built the site with those colors in mind. This works.

Akamai call to action

More killer color combos

There are other color combinations that work very well to help draw the viewer’s eye to an area of your site that you want them to check out. Black can be a great backdrop for a Call to Action button – use white, pink, red, yellow, or neon colors, to really have it jump off the page. Hoi Moon Marketing uses a dark background to great effect. Notice that there are only 3 red elements on the page – the logo, the flower, and the Call to Action. Nice.

Hoi Moon Marketing

You can also use a white background and put a darker color like red, orange or blue. It all depends on the effect you want – black and pink is a much more dramatic color combo than white with blue.

Sometimes you have to break the rules

Of course, there are circumstances where clashing colors might be just what you want. An abstract artist, a punk band, or a graphic designer might employ clashing colors on their site if it fits in with their overall theme. Neon colors, and color combos like purple and green might be just the ticket.

In conclusion

There are many ways you can enhance your site using the proper color schemes. And when you are adding elements such as a Call to Action, it is usually in your best interest to use a color that both works with your site’s color scheme, and stands out enough to catch the eye.

Take a cruise through some sites and see what others are doing with their Call to Action graphics. You will be able to tell the sites that have taken the time to create a Call to Action that works well with their site – and the sites that created a big, bright bold Call to Action button, and just plunked it down willy-nilly, with no thought to how well it goes with their site. You want your call to action to reach out to the viewer and invite them in, not necessarily jump out and punch them in the nose. And using the right colors is just one of the ways you can do this.

This is Part I of a series of articles on creating a Call to Action for your website that is attractive and effective. In these articles, I will discuss the visual aspect as well as choosing the right words, using the right graphics, and proper placement. Join us every Friday for a new installment.

Comments are closed.

Raleigh Is Our Home

Chase Web Solutions Logo
3650 Rogers Road #263, Wake Forest, NC 27609

(919) 435-4960 Schedule Appointment

Chase Web Design Payment

Chase Web Newsletter

  • Stay Updated with our Monthly Newsletters containing training, industry topics, and Specials.

Stay In Touch

  • FACEBOOK is where we discuss topics and just dialogue with our friends. Become A Fan!
  • GOOGLE+ is where we keep you updated on industry news and SEO tips. Let’s Circle Up!

© 2013 Chase Web Solutions, LLC - 3650 Rogers Road #263, Wake Forest, NC 27587