14 Examples of The Persuasive Power of Color in Web Design

by 15 10/03/2011

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

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.


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.


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

 


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 here 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 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 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 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

About 

Stephanie Hamilton is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

15 COMMENTS

Wasim Ismail

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.

October 5, 2011 Reply

    Russ Henneberry

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

    October 5, 2011 Reply

Sherice Jacob

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

October 5, 2011 Reply

Pj Schott

Fabulous!!

October 10, 2011 Reply

Gav

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

November 5, 2011 Reply

    Marg

    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.

    March 23, 2012 Reply

Gregory

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

February 6, 2012 Reply

benji anderson

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

August 27, 2014 Reply

    Neil Patel

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

    August 28, 2014 Reply

    Neil Patel

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

    August 29, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>