14 Examples of The Persuasive Power of Color in Web Design

by Stephanie Hamilton

Last updated on February 22nd, 2018

To see the impact color has on the overall user experience of a website, one need only strip away a hue to see how the visual flow is affected.

While color creates the mood and feel of the site by directing user attention to certain elements, there are many ways to approach the use of color. Hue, value, and saturation are all three integrated dimensions of color that, when used properly, can enhance the site’s message just as well, if not better, than using flashy colors.

In this article we’ll delve deeper into color psychology as it relates to web design, and view examples of sites that used color persuasively in their branding efforts.

A quick intro to color

For a primer on color, one should refer to the color wheel, as it presents a logically arranged sequence of pure hues. I’m sure you’re familiar with the primaries – red, yellow, and blue; and secondaries: green, orange, and purple – which are formed by mixing the primaries.

Tertiary colors are comprised of the middle colors like yellow-green and blue-green. They are created by mixing a primary color and a secondary color. We often refer to the color wheel as it can be used to create harmonious color schemes, leading to an effective visual experience.

The Power of Color

The two most popular advertising color choices in America, blue and red, are frequently used on websites globally. Blue connotes trustworthiness, loyalty, and sincerity, and is most often a business favorite due to these attributes.

But blue isn’t for everyone and the best method of determining the right color (or colors) for your brand or website is to first consider the target group you’re trying to reach.

Colors have different meanings to various age groups, cultures, and nationalities. They have the power to reach beyond just connotations and hold the viewer’s attention, communicate what the business is about, and make a sale.

When you think of the impact color has on a particular audience it’s easy to see why companies exert a lot of time and effort in choosing the right one.

5 website elements affected by color

1) Text Links

App Zapper

A common solution for drawing attention to monochromatic links is to give them a faint background to lift them off the page. This technique is shown in the navigation for AppZapper.

Font Explorer

The active link on the navigation for Font Explorer is styled differently than the rest, giving the user a quick glimpse at where they are on the website.

2) Navigation


Bronto uses saturated colors to bring attention to its navigation. This balance works well with the rest of the site, which is more subdued yet takes up more screen real estate.

3) Buttons


Postbox uses red and blue on its call- to-action buttons. These highly saturated and large buttons do a great job of drawing attention to the intended action the user should take – to download or buy the software. Compare how the less-saturated button just below and to the right would fare if those buttons switched colors.

Life Resto

The complimentary color of blue is used on the call-to-action button on Live Resto to set it apart on the layout and add emphasis.

4) Headings


The minimal, clean website for Billings makes use of vibrant blue headings for emphasis.

5) List Items

A small orange

A Small Orange makes use of its brand colors in the list of recent news posts. The color doesn’t overwhelm, as it’s used sparingly with a white background to ease its vibrancy.

Color can affect readability

Versions App

If the text on your site is meant for scanning instead of reading, it’s okay to have gray text on a black background. On the website for VersionsApp, the monotony is broken up through highlighting and the use of splashes of color throughout the text.


Sometimes the best solution is to have dark text on a white background. Readability is hardly a problem with this method. When necessary, you can incorporate color into quotes or bullet points as shown above for Crazy Egg.

Color can affect accessibility

We should also think of color in terms of accessibility for color-blind users. After all, these color deficiencies affect about 8% of males and 0.5% of females.

The great thing about designing for this niche is good design judgment is really all it takes. For instance don’t use colors with similar brightness values as the base of your website. This causes the text to vibrate and can lead to watery eyes.

Also, if you’re going to use a change in background color to designate a hover state, make sure it has enough contrast and is different in its relative brightness.

It’s also a good idea to add another design element such as a stroke to a button when this hover is activated, providing further contrast.


The call-to-action buttons on the website for Notify feature a contrasting outer glow stroke when the user hovers over them. Such small details add contrast to the button.

Going Monochromatic

We’re past the era of web design where we have to use as many flashy colors as possible to grab the user’s attention. Thankfully, we’ve developed insight into how we can convey a message using shades of one color.

The use of monochromatic color in layouts is a common practice for designers who want to portray a balanced interface while focusing on the overall UX instead of merely coloring things up.

As you’ll see by the following examples, it’s possible to create an engaging and informed layout by simply using one color.

the invoice machine

The Invoice Machine uses a grayscale for the design of its invoicing software’s website. Blue, the common color for links, is used as a border around the buttons, emphasizing their importance in relation to the rest of the site. This makes the buttons stand out without resulting in a bubbly, 3-D look.

davroc interiors

Davroc Interiors creates a soothing visual experience on its website. Hover over the photographs to reveal full-color images that add a layer of interest to the minimal website. Blue, the universal link color, is used in areas throughout the site to enhance the user experience.


Metelab also uses a monochromatic color scheme on its website. Notice the use of saturation on the top-right button. Saturated colors are effective on buttons, links, alerts and system messages because they grab the user’s attention. It’s important to use these colors sparingly, as too many can slow the user down.

When used correctly, saturation can be exciting and dynamic.

Gray is a common color used in web design these days because it doesn’t compete with saturated and desaturated colors.

the grid system

The absence of color on The Grid System site is a great opportunity to make use of white space and bold typography when necessary. Such elements help create hierarchy by grouping elements together according to importance.

There may be millions of colors out there, and as a designer my goal is to choose those that speak to my client’s business and mission.

While some companies adopt color as a tool to enhance dynamism, others are put off by it when used sporadically. Through the examples I’ve shown in this article, I hope to strike a balance between these extremes – one where color can be used in all its vibrancy but still be elegant, and alternative approaches to the use of color, such as the monochromatic color scheme.

Have you noticed a color trend that is not addressed in this article? Let me know in the comments!

Image courtesy of Viktor Hertz



Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. fatemeh says:
    April 19, 2016 at 5:35 pm

    I’m confused too. title and text dont match

  2. benji anderson says:
    August 27, 2014 at 3:38 pm

    Good read and way further along than the old school easy SEOLinkvine approach. Wasn’t able to follow the link for Post Box, but it looks like a perfect solution for me. again thanks

    • Neil Patel says:
      August 28, 2014 at 4:18 pm

      Benji, glad we could help. Looking forward to hearing more from you!

    • Neil Patel says:
      August 29, 2014 at 11:18 am

      Benji, glad we could help. Looking forward to hearing much more from you 🙂

  3. Gregory says:
    February 6, 2012 at 1:37 pm

    Thank you for psnitog this! I have always needed to learn about color theory, and this was a great place to start.

  4. Gav says:
    November 5, 2011 at 5:17 am

    I’m confused. RGB is Red Green Blue, but these are the primairy colors aren’t they?

    • Marg says:
      March 23, 2012 at 4:59 pm

      No they are not the primary colors. RGB is the digital color profile used when light is used to create color as with your computer screen.

  5. Pj Schott says:
    October 10, 2011 at 10:22 am


  6. Sherice Jacob says:
    October 5, 2011 at 12:38 pm

    Another great tool is the gallery over at colorschemer.com – lots of inspiration from many different users.

    • Russ Henneberry says:
      October 5, 2011 at 3:07 pm

      Super cool Sherice. Thanks for the heads up.

  7. Wasim Ismail says:
    October 5, 2011 at 6:40 am

    Stephanie, getting the right combination of colours, is very important, as you have highlighted here, if you notice in all of them, the key is to keep it simple, Not to over complicate the site with funky colours, and to instead focus on user experience and conversions.
    Thanks for the article.

    • Russ Henneberry says:
      October 5, 2011 at 9:42 am

      @Wasim Ismail — Thanks for the comment Wasim.

      One of the tools I use when designing is kuler.adobe.com — it allows you to view color combinations and save combinations of colors that you have created. Super powerful tool from the folks over at Adobe.

Show Me My Heatmap

I love sites with - combine that with and it gives such a great set of data to inform /

Andrew Martin


What makes people leave your website?