{"id":5281,"date":"2013-06-20T15:27:17","date_gmt":"2013-06-20T22:27:17","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=5281"},"modified":"2013-08-20T10:47:48","modified_gmt":"2013-08-20T17:47:48","slug":"picking-the-right-brand-colors-for-your-website","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/picking-the-right-brand-colors-for-your-website\/","title":{"rendered":"Picking the Right Brand Colors for Your Website"},"content":{"rendered":"<p>Recent <a title=\"Why Color Matters\" href=\"http:\/\/www.colorcom.com\/research\/why-color-matters\" target=\"_blank\">research reveals<\/a> that \u00a0people make a subconscious judgment about a person, environment or product within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone. The right brand colors can help you connect with your customers and draw their attention more effectively to your goods and services.<\/p>\n<p>Before you select your brand colors, ask yourself what you want your visitors to feel when they see your website. For instance, do you want your website to convey warmth and nurture or energy and excitement?<\/p>\n<p>Different colors can represent different messages. For instance, green conveys nature, adventure and youth while black conveys credibility, strength and power.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-5282\" alt=\"Green Color Messaging\" src=\"https:\/\/blogcontent.yola.net\/blog\/wp-content\/uploads\/2013\/06\/Green-Color-Messaging.png\" width=\"532\" height=\"107\" \/><br \/>\n<img loading=\"lazy\" class=\"aligncenter size-full wp-image-5283\" alt=\"Black Color Messaging\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/06\/black-color-messaging.png\" width=\"528\" height=\"115\" \/><br \/>\nOnce you have agreed on your brand\u2019s personality, you can then select the right colors that would accurately represent it. Colors can represent warmth, confidence, prestige and a host of adjectives that can trigger various emotions from your visitors.<\/p>\n<p>Below is an infographic that shows <a title=\"The Psychology of Color in Logo Design\" href=\"http:\/\/thelogocompany.net\/blog\/infographics\/psychology-color-logo-design\/\" target=\"_blank\">how colors affect emotions<\/a> and how your customers perceive various global brands. Think about what would you like your brand colors to tell your website visitors.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-5284\" alt=\"Color Emotion Guide\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/06\/Color-Emotion-Guide.png\" width=\"491\" height=\"430\" \/><br \/>\nNext, pick what combination of colors you want to represent your brand. For instance, do you want complementary colors or contrasting colors? Complementary colors bring out the attributes of each other and connote harmony while contrasting colors adds an element of surprise to your brand. Multi-colors help to add a fun and playful vibe to your brand and also connotes variety. Here is <a title=\"Lindsey Besser Infographic\" href=\"http:\/\/lindseybesser.info\/tag\/infographic\/\" target=\"_blank\">a color guide<\/a> that can help you decide on what combination of colors to select for your brand.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-5285\" alt=\"Color Theory\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/06\/Color-Theory.png\" width=\"548\" height=\"428\" \/><\/p>\n<p>Next, you should think of what hues you want to use for the colors you have selected. Hues help to tone down or give more prominence to colors. For instance: How much white or black do you want your selected colors to have?<\/p>\n<p>Choose your hues carefully to make sure you accurately trigger the right emotions. The image below shows <a title=\"The Basic Elements - Shape, Value, Color, Edge\" href=\"http:\/\/www.proko.com\/basic-elements-shape-value-color-edge\/\" target=\"_blank\">the transition in hues<\/a> as various colors are made lighter or darker.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-5286\" alt=\"Transition in Hues\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/06\/Transition-in-Hues.jpg\" width=\"300\" height=\"294\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>When you pick your brand colors, think through how these colors can <a title=\"Use Color to Improve Conversion Rates\" href=\"http:\/\/impressthemes.com\/2012\/02\/can-color-theory-improve-conversion-rates\/\" target=\"_blank\">increase the conversion rates<\/a> of the products on your site if you intend to sell online. For instance, take a look at the following call-to-action buttons and how they affect how online buyers think about the product.<\/p>\n<p>The yellow \u201cbuy\u201d button is used to grab the attention of window shoppers while the red \u201cbuy\u201d button is used to create a sense of \u00a0urgency about the sale.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-5287\" alt=\"Colors Calling to Action\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/06\/Colors-Calling-to-Action.png\" width=\"609\" height=\"390\" \/><br \/>\nSmart website owners use call-to-action buttons to effectively get website visitors to complete actions that are beneficial for their business. For example, the buttons can be used to persuade customers to call your business, sign up for your newsletter, download an ebook, schedule an appointment or buy your product.<\/p>\n<p>To match the call to action buttons with your brand colors, you can use complementary or contrasting colors depending on if you want to call attention to the message on the button or have it blended into the site as a more passive message. You can also play around with how the buttons blend into your color scheme by having it match your site\u2019s background color, if you have one. This is a great way to get the button to stand out. Here is an example of \u00a0how complementary colors can help your call to action stand out:<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-5288\" alt=\"Skype Download\" src=\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/06\/Skype-Download.png\" width=\"515\" height=\"77\" \/><\/p>\n<p>The right brand colors and call-to-action buttons can help you achieve your goals with your website and speak to your customers effectively. Try some of our tips out and watch your business grow online!<\/p>\n<p>For those of you using Yola, you can check out our <a title=\"Yola style designer\" href=\"https:\/\/www.yola.com\/blog\/now-users-have-even-more-customization-and-design-control\/\">Style Designer<\/a> feature that can help you choose the right styles and colors for your website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recent research reveals that \u00a0people make a subconscious judgment about a person, environment or product within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone. The right brand colors can help you connect with your customers and draw their attention more effectively to your goods&hellip;&nbsp;<a href=\"https:\/\/www.yola.com\/blog\/picking-the-right-brand-colors-for-your-website\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Picking the Right Brand Colors for Your Website<\/span><\/a><\/p>\n","protected":false},"author":458,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false},"categories":[129,130],"tags":[296,211,295,297],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/5281"}],"collection":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/users\/458"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=5281"}],"version-history":[{"count":15,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/5281\/revisions"}],"predecessor-version":[{"id":5964,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/5281\/revisions\/5964"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=5281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=5281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=5281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}