{"id":7,"date":"2011-10-03T08:00:58","date_gmt":"2011-10-03T13:00:58","guid":{"rendered":"https:\/\/crazyeggblog.wpengine.com\/?p=7"},"modified":"2024-04-09T16:49:58","modified_gmt":"2024-04-09T20:49:58","slug":"persuasive-power-color","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/","title":{"rendered":"14 Examples of The Persuasive Power of Color in Web Design"},"content":{"rendered":"

To see the impact color has on the overall user experience of a website, one need only\u00a0strip away a hue to see how the visual flow is affected.<\/p>\n

While color creates the mood and feel of the site by\u00a0directing user attention to certain elements, there are many ways to approach the use of color. Hue, value, and saturation are all three integrated dimensions of color that, when used properly, can enhance the site\u2019s message just as well,\u00a0if not better, than using flashy colors.<\/p>\n

In this article we\u2019ll delve deeper into color psychology as it relates to web design, and view examples of sites that used color persuasively in their branding efforts.<\/p>\n

A quick intro to color<\/h2>\n

For a primer on color, one should refer to the color wheel, as it presents a logically arranged sequence of pure hues. I\u2019m sure you\u2019re familiar with the primaries \u2013 red, yellow, and blue; and secondaries:\u00a0green, orange, and purple \u2013 which are formed by mixing the primaries.<\/p>\n

Tertiary colors are comprised of the middle colors like yellow-green and blue-green. They are created by mixing a primary color and a secondary color. We often refer to the color wheel as it can be used to create harmonious color schemes, leading to an effective visual experience.<\/p>\n

The Power of Color<\/h2>\n

The two most popular advertising color choices in America,\u00a0blue and red,\u00a0are frequently used on websites globally. Blue connotes trustworthiness, loyalty, and sincerity, and is most often a business favorite due to these attributes.<\/p>\n

But blue isn\u2019t for everyone and the best method of determining the right color (or colors) for your brand or website is to first consider the target group you’re trying to reach.<\/p>\n

Colors have different meanings to various age groups, cultures, and nationalities. They\u00a0have the power to reach beyond just connotations and hold the viewer\u2019s attention, communicate what the business is about, and make a sale.<\/p>\n

When you think of the impact color has on a particular audience it\u2019s easy to see why companies exert a lot of time and effort in choosing the right one.<\/p>\n

5 website elements affected by color<\/h2>\n

1) Text Links<\/h3>\n

\"App<\/a><\/p>\n

A common solution for drawing attention to monochromatic links is to give them a faint background to lift them off the page. This technique is shown in the navigation for AppZapper<\/a>.<\/p>\n

\"Font<\/a><\/p>\n

The active link on the navigation for Font Explorer is styled differently than the rest, giving the user a quick glimpse at where they are on the website.<\/p>\n

2) Navigation<\/h3>\n

\"Bronto\"<\/a><\/p>\n

Bronto<\/a> uses saturated colors to bring attention to\u00a0its navigation. This balance works well with the rest of the site, which is more subdued yet takes up more screen real estate.<\/p>\n

3) Buttons<\/h3>\n

\"Postbox\"<\/a><\/p>\n

Postbox uses red and blue on\u00a0its call- to-action buttons. These highly saturated and large buttons do a great job\u00a0of drawing attention to the intended action the user should take \u2013 to\u00a0download or buy the software. Compare how the less-saturated button just below and to the right would fare if those buttons switched colors.<\/p>\n

\"Life<\/a><\/p>\n

The complimentary color of blue is used on the call-to-action button on Live Resto to set it apart on the layout and add emphasis.<\/p>\n

4) Headings<\/h3>\n

\"Billings\"<\/a><\/p>\n

The minimal, clean website for Billings makes use of vibrant blue headings for emphasis.<\/p>\n

5) List Items<\/h3>\n

\"A<\/a><\/p>\n

A Small Orange<\/a> makes use of\u00a0its brand colors in\u00a0the list of recent news posts. The color doesn\u2019t overwhelm, as it\u2019s used sparingly with a white background to ease its vibrancy.<\/p>\n

Color can affect readability<\/h2>\n

\"Versions<\/a><\/p>\n

If the text on your site is meant for scanning instead of reading, it\u2019s okay to have gray text on a black background. On the website for VersionsApp<\/a>, the monotony is broken up through highlighting and the use of splashes of color throughout the text.<\/p>\n

\"crazyegg\"<\/a><\/p>\n

Sometimes the best solution is to have dark text on a white background. Readability is hardly a problem with this method. When necessary, you can incorporate color into quotes or bullet points as shown above\u00a0for Crazy Egg.<\/p>\n

Color can affect accessibility<\/strong><\/h2>\n

We should also think of color in terms of accessibility for color-blind users. After all, these color deficiencies affect about 8% of males and 0.5% of females.<\/p>\n

The great thing about designing for this niche is good design judgment is really all it takes. For instance don\u2019t use colors with similar brightness values as the base of your website. This causes the text to vibrate and can lead to watery eyes.<\/p>\n

Also, if you\u2019re going to use a change in background color to designate a hover state, make sure it has enough contrast and is different in its relative brightness.<\/p>\n

It’s\u00a0also\u00a0a good idea to add another design element such as a stroke to a button when this hover is activated, providing further contrast.<\/p>\n

\"notify\"<\/a><\/p>\n

The call-to-action buttons on the website for Notify feature a contrasting outer glow stroke when the user hovers over them. Such small details add contrast to the button.<\/p>\n

Going Monochromatic<\/h2>\n

We\u2019re past the era of web design where we have to use as many flashy colors as possible to grab the user\u2019s attention. Thankfully, we\u2019ve developed insight into how we can convey a message using shades of one color.<\/p>\n

The use of monochromatic color in layouts is a common practice for designers who want to portray a balanced interface while focusing on the overall UX instead of merely coloring things up.<\/p>\n

As you\u2019ll see by the following examples, it\u2019s possible to create an engaging and informed layout by simply using one color.<\/p>\n

\"the<\/a><\/p>\n

The Invoice Machine<\/a> uses a grayscale for the design of\u00a0its invoicing software\u2019s website. Blue, the common color for links, is used as a border around the buttons, emphasizing their importance in relation to the rest of the site. This makes the buttons stand out\u00a0without resulting\u00a0in a bubbly, 3-D look.<\/p>\n

\"davroc<\/a><\/p>\n

Davroc Interiors creates a soothing visual experience on its website. Hover over the photographs to reveal full-color images that add a layer of interest to the minimal website. Blue, the universal link color, is used in areas throughout the site to enhance the user experience.<\/p>\n

\"metelab\"<\/a><\/p>\n

Metelab<\/a> also uses a monochromatic color scheme on\u00a0its website. Notice the use of saturation on the top-right button. Saturated colors are effective on buttons, links, alerts and system messages because they grab the user\u2019s attention. It\u2019s important to use these colors sparingly, as too many can slow the user down.<\/p>\n

When used correctly, saturation can be exciting and dynamic.<\/p>\n

Gray is a common color used in web design these days because it doesn\u2019t compete with saturated and desaturated colors.<\/p>\n

\"the<\/a><\/p>\n

The absence of color on The Grid System<\/a> site is a great opportunity to make use of white space and bold typography when necessary. Such elements help create hierarchy by grouping elements together according to importance.<\/p>\n

There may be millions of colors out there, and as a designer my goal is to choose those that speak to my client\u2019s business and mission.<\/p>\n

While some companies adopt color as a tool to enhance dynamism, others are put off by it when used sporadically. Through the examples I\u2019ve shown in this article, I hope to strike a balance between these extremes \u2013 one where color can be used in all its vibrancy but still be elegant, and alternative approaches to the use of color, such as the monochromatic color scheme.<\/p>\n

Have you noticed a color trend\u00a0that is not addressed in this article? Let me know in the comments!<\/p>\n

Image courtesy of Viktor Hertz<\/p>\n","protected":false},"excerpt":{"rendered":"

To see the impact color has on the overall user experience of a website, one need only\u00a0strip away a hue to see how the visual…<\/p>\n","protected":false},"author":14,"featured_media":228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[9],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"yoast_head":"\n14 Examples of The Persuasive Power of Color in Web Design<\/title>\n<meta name=\"description\" content=\"Delve deeper into color psychology as it relates to web design, and view examples of sites that used color persuasively in their branding efforts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"14 Examples of The Persuasive Power of Color in Web Design\" \/>\n<meta property=\"og:description\" content=\"Delve deeper into color psychology as it relates to web design, and view examples of sites that used color persuasively in their branding efforts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/\" \/>\n<meta property=\"og:site_name\" content=\"The Daily Egg\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crazyegganalytics\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/stephaniehamiltondesign?ref=bookmarks\" \/>\n<meta property=\"article:published_time\" content=\"2011-10-03T13:00:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-09T20:49:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2011\/09\/color-persuasion-tool1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"690\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Stephanie Hamilton\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/shamiltondesign\" \/>\n<meta name=\"twitter:site\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stephanie Hamilton\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/\"},\"author\":{\"name\":\"Stephanie Hamilton\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/9496fd8e34e7ca73bbf43c42836f9233\"},\"headline\":\"14 Examples of The Persuasive Power of Color in Web Design\",\"datePublished\":\"2011-10-03T13:00:58+00:00\",\"dateModified\":\"2024-04-09T20:49:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/\"},\"wordCount\":1274,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2011\\\/09\\\/color-persuasion-tool1.jpg\",\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/\",\"name\":\"14 Examples of The Persuasive Power of Color in Web Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2011\\\/09\\\/color-persuasion-tool1.jpg\",\"datePublished\":\"2011-10-03T13:00:58+00:00\",\"dateModified\":\"2024-04-09T20:49:58+00:00\",\"description\":\"Delve deeper into color psychology as it relates to web design, and view examples of sites that used color persuasively in their branding efforts.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2011\\\/09\\\/color-persuasion-tool1.jpg\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2011\\\/09\\\/color-persuasion-tool1.jpg\",\"width\":\"690\",\"height\":\"600\",\"caption\":\"Color As A Persuasion Tool\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/persuasive-power-color\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/category\\\/web-design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"14 Examples of The Persuasive Power of Color in Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"name\":\"The Daily Egg\",\"description\":\"Conversion Rate Optimization Made Easy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\",\"name\":\"Crazy Egg\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"width\":191,\"height\":100,\"caption\":\"Crazy Egg\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/crazyegganalytics\\\/\",\"https:\\\/\\\/x.com\\\/CrazyEgg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/crazy-egg\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJNe_xmPi07YezxaqfoRVqg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/9496fd8e34e7ca73bbf43c42836f9233\",\"name\":\"Stephanie Hamilton\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/69e9156082a16887b128c27e10981e674d43e79b2cdf24f3cab0b56a87422436?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/69e9156082a16887b128c27e10981e674d43e79b2cdf24f3cab0b56a87422436?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/69e9156082a16887b128c27e10981e674d43e79b2cdf24f3cab0b56a87422436?s=96&d=mm&r=g\",\"caption\":\"Stephanie Hamilton\"},\"description\":\"Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.\",\"sameAs\":[\"https:\\\/\\\/www.sjhamilton.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/stephaniehamiltondesign?ref=bookmarks\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/stephaniehamilton\",\"https:\\\/\\\/www.pinterest.com\\\/shamilton86\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/shamiltondesign\"],\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/author\\\/stephanie-hamilton\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"14 Examples of The Persuasive Power of Color in Web Design","description":"Delve deeper into color psychology as it relates to web design, and view examples of sites that used color persuasively in their branding efforts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/","og_locale":"en_US","og_type":"article","og_title":"14 Examples of The Persuasive Power of Color in Web Design","og_description":"Delve deeper into color psychology as it relates to web design, and view examples of sites that used color persuasively in their branding efforts.","og_url":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/","og_site_name":"The Daily Egg","article_publisher":"https:\/\/www.facebook.com\/crazyegganalytics\/","article_author":"https:\/\/www.facebook.com\/stephaniehamiltondesign?ref=bookmarks","article_published_time":"2011-10-03T13:00:58+00:00","article_modified_time":"2024-04-09T20:49:58+00:00","og_image":[{"width":690,"height":600,"url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2011\/09\/color-persuasion-tool1.jpg","type":"image\/jpeg"}],"author":"Stephanie Hamilton","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/shamiltondesign","twitter_site":"@CrazyEgg","twitter_misc":{"Written by":"Stephanie Hamilton","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/#article","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/"},"author":{"name":"Stephanie Hamilton","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/9496fd8e34e7ca73bbf43c42836f9233"},"headline":"14 Examples of The Persuasive Power of Color in Web Design","datePublished":"2011-10-03T13:00:58+00:00","dateModified":"2024-04-09T20:49:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/"},"wordCount":1274,"commentCount":12,"publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2011\/09\/color-persuasion-tool1.jpg","articleSection":["Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/","url":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/","name":"14 Examples of The Persuasive Power of Color in Web Design","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2011\/09\/color-persuasion-tool1.jpg","datePublished":"2011-10-03T13:00:58+00:00","dateModified":"2024-04-09T20:49:58+00:00","description":"Delve deeper into color psychology as it relates to web design, and view examples of sites that used color persuasively in their branding efforts.","breadcrumb":{"@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/#primaryimage","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2011\/09\/color-persuasion-tool1.jpg","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2011\/09\/color-persuasion-tool1.jpg","width":"690","height":"600","caption":"Color As A Persuasion Tool"},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyegg.com\/blog\/persuasive-power-color\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crazyegg.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Design","item":"https:\/\/www.crazyegg.com\/blog\/category\/web-design\/"},{"@type":"ListItem","position":3,"name":"14 Examples of The Persuasive Power of Color in Web Design"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyegg.com\/blog\/#website","url":"https:\/\/www.crazyegg.com\/blog\/","name":"The Daily Egg","description":"Conversion Rate Optimization Made Easy","publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyegg.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyegg.com\/blog\/#organization","name":"Crazy Egg","url":"https:\/\/www.crazyegg.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","width":191,"height":100,"caption":"Crazy Egg"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/crazyegganalytics\/","https:\/\/x.com\/CrazyEgg","https:\/\/www.linkedin.com\/company\/crazy-egg\/","https:\/\/www.youtube.com\/channel\/UCJNe_xmPi07YezxaqfoRVqg"]},{"@type":"Person","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/9496fd8e34e7ca73bbf43c42836f9233","name":"Stephanie Hamilton","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/69e9156082a16887b128c27e10981e674d43e79b2cdf24f3cab0b56a87422436?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/69e9156082a16887b128c27e10981e674d43e79b2cdf24f3cab0b56a87422436?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/69e9156082a16887b128c27e10981e674d43e79b2cdf24f3cab0b56a87422436?s=96&d=mm&r=g","caption":"Stephanie Hamilton"},"description":"Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.","sameAs":["https:\/\/www.sjhamilton.com\/","https:\/\/www.facebook.com\/stephaniehamiltondesign?ref=bookmarks","https:\/\/www.linkedin.com\/in\/stephaniehamilton","https:\/\/www.pinterest.com\/shamilton86\/","https:\/\/x.com\/https:\/\/twitter.com\/shamiltondesign"],"url":"https:\/\/www.crazyegg.com\/blog\/author\/stephanie-hamilton\/"}]}},"modified_by":"Peter Lowe","_links":{"self":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":0,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}