{"id":4062,"date":"2019-07-26T13:08:02","date_gmt":"2019-07-26T13:08:02","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=4062"},"modified":"2020-02-06T09:47:54","modified_gmt":"2020-02-06T09:47:54","slug":"website-blue-green-color-palette","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/","title":{"rendered":"Blue Green Color Palette for Websites"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>Is a blue green color palette suitable for websites?<\/p>\n<p>Who\u2019s said blue and green cannot go together? They\u2019re colors that, with a pinch of creativity, can go a long way in transmitting a website\u2019s personality. Well, it also depends on the blue and green nuances, to make them perfectly match.<\/p>\n<p>Blue and green are two colors that underline reciprocally each other\u2019s power of expressiveness. You cannot say one takes priority over the other, but they intermingle in a pretty unusual way to give force to an original presentation.<\/p>\n<p>&nbsp;<\/p>\n<h2>Website examples with blue green color palettes<\/h2>\n<p>&nbsp;<\/p>\n<p>We\u2019ll present you a few examples of successful combinations of blue and green, resulting in a blue green color palette just perfect to copy for your own website:<\/p>\n<ol>\n<li>\n<h4><a href=\"https:\/\/okbye.momcilo.xyz\/\">OK BYE<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4063\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/11.png\" alt=\"blue green color palette\" width=\"860\" height=\"603\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The alternance of blue and green capitalizes on water and leaves colors in a natural environment. The richness of green seems to invade the background with water, while water slides into the leaves curtain insidiously. Each of the 2 elements gives the impression of grandeur. On scroll, the prevalence of green is gradually taken over by the water blue and a traditional picture of a swimming pool.<\/p>\n<p>You have to visit yourself the OK Bye site, to see how creativity finds its place in a stunning combination of blue and green.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"2\">\n<li>\n<h4><a href=\"https:\/\/www.brightscout.com\/\">Bright Scout<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4064\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/22.png\" alt=\"\" width=\"860\" height=\"609\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>In this case, the combination of blue and green refers to a technical presentation. Blue stands for reliability, stability and balance, but also trustworthiness. Green comes as a bold expression of blue, in that it represents transformational directions of design and technology. Green seems to be integrated into a gradient, that perfectly reflects how it \u201caccelerates the speed of innovation\u201d.<\/p>\n<p>&nbsp;<\/p>\n<p>Throughout the homepage, the same alternance between blue and green is reiterated in different sections, down to the bottom of the page. This means the blue green color palette is a great solution for replicating the brand into the website presentation.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"3\">\n<li>\n<h4><a href=\"http:\/\/www.hakafilms.com\/\">Haka Films<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4065\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/33.png\" alt=\"blue green color palette\" width=\"860\" height=\"609\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This is a more complex blue and green color scheme. Additional colors were used in the website, although in a reduced proportion as compared to the 2 dominant colors.<\/p>\n<p>In the Front Page of Haka Films website, the green in a central box has the role of focusing readers\u2019 eyes towards an important element of the presentation. In comparison with the several nuances of green, an electric blue surrounds this box with intriguing color and imagery. Although in small quantities, some brown and some white or grey will ensure the balance between natural green and electric blue: a composite creation.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"4\">\n<li>\n<h4><a href=\"https:\/\/www.leafworks.com\/\">Leafworks<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4066\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/44.png\" alt=\"\" width=\"860\" height=\"609\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This presentation is highly artistic and utterly suggestive of the organization\u2019s field of activity: herbal genetics company. The blue green color palette plays heavily upon the subtle choice of tints and nuances, which really make an impression.<\/p>\n<p>In the intro page, green is prevalent, signifying the application area for LeafWorks company. However, some blue underlining the page title slightly suggests where the nucleus of activity is placed (within the company). It seems to counterbalance the unpredictable character of natural elements, when under certain conditions.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"5\">\n<li>\n<h4><a href=\"https:\/\/akua.co\/\">Akua<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4067\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/55.png\" alt=\"\" width=\"860\" height=\"601\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This page presents a combination of green and blue in a color palette that has room for pink and orange, as well. To give liveliness to the presentation, this color combination uses the right proportions inviting to search, research and eventually, purchase.<\/p>\n<p>Green is for the page title text.\u00a0 So the text presentation approaches the products quality as much as possible. Decorations receive some blue nuances. The intention is to give freshness and authenticity to the presentation of \u201csuperfood from the sea\u201d.<\/p>\n<p>&nbsp;<\/p>\n<p>That is our selection of 5 websites that use the blue and green color palette successfully. They convince users to explore for more. We hope they serve as a good start and some inspiration for your next project, where your unique blue and green <a href=\"https:\/\/colibriwp.com\/blog\/website-color-schemes\/\">website color scheme<\/a> will impress and impact users.<\/p>\n<p>If you want to start from an appropriately colored WordPress theme and add small customizations to your new website, here&#8217;s a list of the 60+ best <a href=\"https:\/\/qodeinteractive.com\/theme-color\/green-wordpress-themes\/\">green WordPress themes<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Is a blue green color palette suitable for websites? Who\u2019s said blue and green cannot go together? They\u2019re colors that, with a pinch of creativity, can go a long way in transmitting a website\u2019s personality. Well, it also depends on the blue and green nuances, to make them perfectly match. Blue and green are&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":4063,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[57,47],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Blue Green Color Palette for Websites - ColibriWP Blog<\/title>\n<meta name=\"description\" content=\"A blue green color palette can be suitable for transmitting certain values. Check these examples and see how the color scheme makes a difference\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blue Green Color Palette for Websites - ColibriWP Blog\" \/>\n<meta property=\"og:description\" content=\"A blue green color palette can be suitable for transmitting certain values. Check these examples and see how the color scheme makes a difference\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-26T13:08:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-06T09:47:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/11.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1050\" \/>\n\t<meta property=\"og:image:height\" content=\"736\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"iulian\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/11.png\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/11.png\",\"width\":1050,\"height\":736},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/\",\"name\":\"Blue Green Color Palette for Websites - ColibriWP Blog\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#primaryimage\"},\"datePublished\":\"2019-07-26T13:08:02+00:00\",\"dateModified\":\"2020-02-06T09:47:54+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\"},\"description\":\"A blue green color palette can be suitable for transmitting certain values. Check these examples and see how the color scheme makes a difference\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blue Green Color Palette for Websites\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\",\"name\":\"iulian\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"caption\":\"iulian\"},\"url\":\"https:\/\/colibriwp.com\/blog\/author\/iulian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Blue Green Color Palette for Websites - ColibriWP Blog","description":"A blue green color palette can be suitable for transmitting certain values. Check these examples and see how the color scheme makes a difference","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:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/","og_locale":"en_US","og_type":"article","og_title":"Blue Green Color Palette for Websites - ColibriWP Blog","og_description":"A blue green color palette can be suitable for transmitting certain values. Check these examples and see how the color scheme makes a difference","og_url":"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/","og_site_name":"ColibriWP Blog","article_published_time":"2019-07-26T13:08:02+00:00","article_modified_time":"2020-02-06T09:47:54+00:00","og_image":[{"width":1050,"height":736,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/11.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"iulian","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/11.png","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/07\/11.png","width":1050,"height":736},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#webpage","url":"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/","name":"Blue Green Color Palette for Websites - ColibriWP Blog","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#primaryimage"},"datePublished":"2019-07-26T13:08:02+00:00","dateModified":"2020-02-06T09:47:54+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e"},"description":"A blue green color palette can be suitable for transmitting certain values. Check these examples and see how the color scheme makes a difference","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/website-blue-green-color-palette\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Blue Green Color Palette for Websites"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e","name":"iulian","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","caption":"iulian"},"url":"https:\/\/colibriwp.com\/blog\/author\/iulian\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/4062"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=4062"}],"version-history":[{"count":0,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/4062\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/4063"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=4062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=4062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=4062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}