Kissmetrics Blog

A blog about analytics, marketing and testing

Built to optimize growth. Track, analyze and engage to get more customers.

The Art of Color Coordination

Colors affect us in countless ways—mentally and physically, consciously and subconsciously. Psychologists have suggested that color impression can account for 60% of the acceptance or rejection of a product or service.

Good color choices should never be neglected in web design. A bad color combination can have the same negative effect as poor copy and slow load times. In this infographic, we will briefly discuss color coordination and how you can use this to your advantage when designing your site. Special thanks to @speckyboy, @smashingmag and @onextrapixel.

Click on the infographic below to view a larger image:

The Art of Color Coordination

View an enlarged version of this Infographic »

Click here to download a .pdf version of this infographic.

Want to display this infographic on your site?

Simply copy and paste the code below into the html of your website to display the infographic presented above:

Website Color Scheme Examples

Complementary Colors –

Complementary Color Website Example

Analogous Colors –

Analogous Color Website Example

Split-Complementary Colors –

Final Touch Split Complementary Color Website Example

Triadic Colors –

Triadic Color Website Example

Tetradic Colors –

florida flourish

Square Colors –

Square Color Website Example Panera

  1. Benjamin Kerensa Oct 13, 2011 at 1:21 pm

    Yet another excellent post by KissMetrics Bloggers ;)

  2. Thanks Benjamin! We appreciate that :)

  3. Great tool from Adobe that will help you pick your colors:

  4. Great tips for website colors. I am going to feature this blog in my blog in this Friday’s Favorite Blogs Friday. You can get there by clicking on my name. Thanks, Kissmetrics, for your awesomeness!

  5. Nice infographics!
    Super like and shared it.
    thanks for sharing.

  6. Sharon Kurlansky Oct 19, 2011 at 11:28 am

    Illustrators love color! Thanks for the links to the color tools. Your infographics rock.

  7. Of course it is an art and is why only some pages look very beautiful and others ordinary. Colors appeal or don;t so you have to know the science of it.

  8. Fantastic! Really useful post of something that gets our attention more then anything else.

  9. meilleures mutuelles Apr 10, 2013 at 12:57 am

    Un énorme merci pour ces informations. Vous avez une très belle plume, bravo ! Bravo !


Please use your real name and a corresponding social media profile when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →