The Art of Color Coordination

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.


<div class='visually_embed' data-category='Technology' rel='infographic'>
<img class='visually_embed_infographic' src='http://thumbnails.visually.netdna-cdn.com/the-art-of-color-coordination_502917222b0e9_w587.jpg' rel='http://thumbnails.visually.netdna-cdn.com/the-art-of-color-coordination_502917222b0e9.jpg' alt='The Art of Color Coordination' />
<div class='visually_embed_bar'>
<span class='visually_embed_cycle'><span>by </span><a target='_blank' href='http://www.kissmetrics.com?utm_source=visually_embed'>KISSmetrics</a>. <br/>Explore more <a href='http://visual.ly'>infographics</a> like this one on the web's largest information design community - <a href='http://visual.ly'>Visually</a>.</span>
</div>
<a id='visually_embed_view_more' target='_blank' href='http://visual.ly/art-color-coordination?utm_source=visually_embed'></a>
<link rel='stylesheet' type='text/css' href='http://visual.ly/embeder/style.css' />
<script type='text/javascript' src='http://visual.ly/embeder/embed.js'></script>
</div> THE ART of COLOR COORDINATION COLORS affect us in countless ways-mentally and physically, consciously and subconsciously. in Web Design 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. The COLOR WHEEL The color wheel is a simple tool that's used to discover and coordinate color harmonies-especially in web design. The first circular color diagram was designed by Sir Isaac Newton in 1666. (An example of a 12-point RYB "subtracțive" color wheel is shown to the left.) WARM and COOL COLORS The color circle can be divided into warm and cool colors. As a general rule, designing a website with an excessive combination of warm and cool colors can confuse the viewer. It can often make the site seem busy, dirty, and untrustworthy. "WARM" COLORS "COOL" COLORS Use warm colors in your designs Use cool colors in your designs to reflect passion, happiness, enthusiasm, and energy. to give a sense of calm or professionalism. PRIMARY, SECONDARY and TERTIARY COLORS In the RYB (or subtractive) color model, the primary colors are red, yellow and blue. The three secondary colors (green, orange and purple) are created by mixing two primary colors. Another six tertiary colors are created by mixing primary and secondary colors. The The The PRIMARY COLORS SECONDARY COLORS TERTIARY COLORS Primary colors, according to traditional color theory, cannot be Secondary colors are the combinations of two primary colors. Tertiary colors combinations of one primary and one secondary color. formed by mixing any other color. COLOR HARMONIES and SCHEMES Certain color combinations look very pleasing, while others are painful and abrasive to look at. Why is that? It's more objective than you think: it's based on the color wheel. Color harmonies (or color schemes) consist of two or more colors with a fixed relation on the wheel. We've included 6 of the most common color schemes below used the 12-point RYB color wheel. COMPLEMENTARY ANALOGOUS TRIADIC Colors Colors Colors Complementary colors are those which are directly opposite each other on Analogous colors are those which lie on either side of any given color. Analogous The triadic color scheme uses the power of three colors which are situated at 120 the color wheel. Due to the powerful color schemes are often found in nature degrees from each other (as determined by an equilateral triangle) on the color wheel. Triadic color harmony is contrast of complementary colors, web designers can choose one dominant color (usually the background) and another to highlight the most important elements of the page (the content). and are harmonious and pleasing to the eye. They usually match well and create serene and comfortable designs. considered by some to be the best color scheme, You could use one color for a background and the two remaining for content and the highlighted areas. SPLIT-COMPLEMENTARY RECTANGULAR SQUARE Colors (TETRADIC) Colors Colors The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement. Split complementary The rectangular (or tetradic) color The square color scheme is similar scheme uses four colors arranged to the rectangular scheme, but with all four colors spaced evenly around into two complementary pairs. This rich color scheme offers plenty of the color circle. This scheme offers possibilities for variation. Tetradic color the greatest number of possible color colors have a high degree of schemes works best if you let one color combinations-which can be a problem contrast, but are not as extreme as be dominant. Be sure to pay attention for good harmony. Be careful when complementary colors, which result in greater harmony. to the balance between warm and cool using square color schemes. colors in your design. HARMONY between LAYOUT and PHOTO ELEMENTS Coordinating color between layout and photo elements is a way of building unity in web design. A connection between the color of layout and photo elements needs to be found or the design won't look right. Just like poor use of color schemes, failure to consider the color balance of web elements can leave a bad first impression as well. LARGE AMOUNTS of COLOR COORDINATION Your Site C R + http://www.yoursite.com/ Q Google -• WELCOME! Some web designers opt to use large amounts of layout/photo coordination-in some cases ОНОМЕ ABOUT PRODUCTS CONTACT Red Coordination exclusively using the photo elements to determine the entire Gray Coordination palette of the site. Coordinating images and layouts around similar colors provides a strong connection for the user, it suggests maximum unity. SMALL AMOUNTS of COLOR COORDINATION Your Site 4 e +http://www.yoursite.com/ Q. Coogle WELCOME! Smaller amounts of color О НОМЕ ABOUT PRODUCTS CONTACT coordination can be used to Red Coordination highlight specific parts of a layout. This can give additional focal Gray Coordination points, with surrounding layout colors acting like a frame. Layout elements containing this accent color such as logos are given much more impact as a result. BACKGROUND IMAGES and COLOR COORDINATION Your Site C +http://www.yoursite.com/ Q- Google WELCOME! A photo used as layout backdrop can help communicate your site's purpose quickly and effectively. When using background images, contrasting colors should be used to make other elements more noticeable, but too much contrast can make the design look uncomfortable. See what works Red Coordination best for you. О НОME ABOUT PRODUCTS CONTACT In CONCLUSION Color can be your most powerful design element if you learn to use it effectively. Coordinating color between layout elements and photographs is a great way to create unity. Coordination makes everything look as though they belong. Keep this in mind when designing your site. There are several tools available to help you pick color schemes, among them are colorschemedesigner.com and kuler.adobe.com. AKISSmetrics Let's talk: +1 (888) 767-5477 PEOPLE PAY YOU. NOT PAGEVIEWS. KISSmetrics is a powerful web analytics solution that helps you make smarter business decisions. Try KISSmetrics for FREE: kissmetrics.com/signup Special thanks to @speckyboy, @smashingmag and @onextrapixel