How Color Saturation Affects User Efficiency

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

Have you ever passed on a product because you didn’t like its color? Color affects the way we feel about products, but it can also affect the way we feel about websites.

Color combinations form the first impression users get when they visit your site. If your site uses colors that are easy on the eyes, they’ll invest time into exploring your content. If you don’t, they won’t give your content a second thought.

Saturated vs. Desaturated Colors

The key to choosing the right color combinations for your site is color saturation. Saturation is 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 to the eyes. They attract a lot of attention and slow users down in their task. This is why they work best for buttons, links, alerts and notifications.

Use saturated colors only when you want users to pay attention to something specific. Using too many saturated colors is one of the most common mistakes designers.

Desaturated colors help ease task performance and efficiency because they soothe the eyes. It’s best to use them on headers, menus, and other background elements.

There’s a difference between desaturated colors in the tone they convey. Desaturated bright colors convey a friendly and professional tone. Desaturated dark colors convey a more serious and professional tone. The right color combination for your site will depend on your content and how you want users to perceive you.

Saturated Gray

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, a gray mixed with a tint of a cool color would complement it. If your site uses warm colors, a gray mixed with a tint of a warm color would complement it. To add tint to your gray, increase the color saturation.

The color combinations you choose can affect the way users feel about your site. Don’t turn users off by using off-putting colors. Make the right impression by using color saturation on your site the right way.


UX DESIGN TOOLS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATE

Elegant Themes

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

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

  13. Hilary Little

    May 16th, 2014

    Interesting article! Is this an opinion piece, or was there any research done and data collected?

    Cheers,
    Hilary

Leave a Comment