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:

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:

<b>++ Click Image to Enlarge ++</b><br /><a href="http://blog.kissmetrics.com/art-of-color-coordination/" ><img src="http://blog.kissmetrics.com/wp-content/uploads/2011/10/color-coordination-sm.jpg" alt="The Art of Color Coordination"></a><br />Source: <a href="http://blog.kissmetrics.com/art-of-color-coordination/" >The Art of Color Coordination</a>

Website Color Scheme Examples

Complementary Colors – Naturestable.com

Analogous Colors – Simplebits.com

Split-Complementary Colors – Finaltouchapp.com

Triadic Colors – 365daysofastronomy.org

Tetradic Colors – Floridaflourish.com

Square Colors – Panerabread.com