How Color Saturation Affects User Efficiency

by on 10/11/10 at 11:47 pm

Have you ever decided to pass on a product because you didn’t like its colors? Colors affect the way we see products, but they can also affect the way we see websites.

Colors and other visual elements are the first impressions users get on a website. If your site uses the right colors and makes a good impression, the chances are that users will end up investing time and energy into your content. You may have a great content, but if you don’t use colors that fit your site, it’s hard for users to give your content a second thought.

The key to choosing the right colors for your website is to understand color saturation and how it affects users. Saturation is basically the amount of gray in a color. The more saturated a color is the less gray it has. The less saturated a color is the more gray it has.

Saturated colors are exciting and dynamic. They attract a lot of attention and slow users down in their task. Saturated colors work well for buttons, links, alerts and system messages because in these situations you want to grab the user’s attention. Use saturated colors sparingly, and only when you want users to pay attention to something specific. Not using saturated colors correctly is probably the most common mistake designers make with colors.

Desaturated colors, however, help ease task performance and efficiency. Because of this, they are best used on menus, headers, panels and other backgrounds, where attracting attention is not necessary. The difference between different desaturated colors is the tone they convey. Desaturated bright colors generally convey a friendly and professional tone. Desaturated dark colors generally convey a more serious and professional tone. The right colors for you will depend on your content and how you want users to perceive your site.

A safe color to use with other colors is gray. Gray is a neutral color that won’t compete with saturated or desaturated colors. There are different shades of gray that can complement the colors of your site. If your site uses cool colors, then a gray mixed with a tiny amount of your main cool color would complement your colors best. If your site uses warm colors, then a gray mixed with a tiny amount of your main warm color would complement your colors best.

The colors you choose for your site can affect the way users feel about you and the content you offer. Don’t start off on the wrong foot by using the wrong colors for your site. Make a good first impression with your users by using saturated and desaturated colors correctly.

15 Responses to “How Color Saturation Affects User Efficiency”

  1. Steve

    Oct 12th, 2010

    Thanks! I’m color blind and always concerned about how others perceive the color choices I make. It’s great to have some concrete information like that to help me make more informed decisions.

    • Andrew de Andrade

      Oct 27th, 2010

      Since you are colorblind, you may benefit from this Google Chrome extension:

      Chrome Daltonize!

      In fact, it’s even useful for designers who are not colorblind as it can also simulate the three different kinds of colorblindness and permit “assisted empathy”

      I’m still looking for a plugin that simulates poor vision found among older users.

  2. Rinat

    Oct 13th, 2010

    This is such an informative post! Thank you very much! I’ve always been interested in all tiny effects that color has on user. This post gives another insight — great!

  3. Dali

    Oct 13th, 2010

    Hi, thank you for the post! I was wondering if you could provide some information as to what kind of user testing was done to come up with these points? I am interested in image/color perception and would like to replicate a test with experienced and naive users. Thanks in advance!

  4. Matt Gregg

    Oct 19th, 2010

    Wondering the same as Dali. I initially read this and it all seems plausible, but then I wondered what evidence exists for these claims. Some references would be nice. Also wondering if these statement are true across cultures as well. Any experiences that point to this?

  5. Russell Bishop

    Oct 19th, 2010

    I was only the other day discussing this with a colleague of mine with regards to a design decision we were making. Essentially we were managing user focus between 2 page elements, but found a great compromise in the end!

  6. Carol

    Nov 17th, 2010

    Excellent article! Thanks for making the concept of color saturation (and its effects on website color choices) so clear.

  7. Yael K. Miller

    Dec 2nd, 2010

    What about a book author’s website where the aim is not to sell the book but for fans to connect to the author? What if the aim is for the website to be a place for users spend a significant time at? In this case, should the background be a Sat­u­rated color?

    Also, do you have recommendations for color tools that allow you to specifically manipulate saturation levels?

    • anthony

      Dec 4th, 2010

      No, because using a saturated color for a background won’t make users stay on the author’s site longer, it’ll make them leave. Saturated colors can irritate our eyes if looked at too long.

      Do you remember how websites looked during the 90′s? One of reasons they looked so awful was because many of them used saturated colors for backgrounds.

      Reserve saturated colors for buttons, where the area is much smaller and more contained. It’ll make your button look stronger.

      Check out this tool that makes adjusting color saturation easy:
      http://www.colorjack.com/studio/

  8. Emil Hunefalk

    Dec 2nd, 2010

    I was looking for something like this a couple of days ago, and this post explains the psychology of color saturation simpler and quicker than any of the websites I found at that time. Thanks for the good tips

  9. The Papa Post

    Dec 2nd, 2010

    Small things make Big differences. Yes, those shades of gray can make the difference that I found in my a/b testing.

  10. Spunky Backpack

    Dec 24th, 2010

    Very helpful article – thanks

  11. This is an awesome tutorial. Some web designers choose colors at random and don’t think about the effect those colors (even different hues) will have on their visitors. Great article!!

  12. Marcin Treder

    Nov 14th, 2011

    Hi there! It is very interesting, though would be nice to get to know source of that information. Any book, or article you could share? Cheers!

Leave a Comment