{"id":4965,"date":"2020-02-20T15:55:59","date_gmt":"2020-02-20T15:55:59","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=4965"},"modified":"2020-08-04T12:32:51","modified_gmt":"2020-08-04T12:32:51","slug":"grey-color-palette","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/grey-color-palette\/","title":{"rendered":"Grey Color Palette for Wonderful Websites"},"content":{"rendered":"<p>Although toned down, a grey color palette can work wonders for websites. It can integrate additional colors that contrast with grey, in original combinations. Usually, grey makes a modern and sleek color scheme. Adjacent colors add liveliness and vivacity to the website, and can result in cool color combos.<\/p>\n<p>&nbsp;<\/p>\n<p>In the following lines, we give you some examples of grey color palettes that can be successfully replicated for a new website:<\/p>\n<p>&nbsp;<\/p>\n<h3><a href=\"https:\/\/www.gothamsiti.it\/\">Example 1 of grey color palette<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4967\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/02\/gothamsiti.png\" alt=\"\" width=\"860\" height=\"415\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>This website alternates black and grey in serious tones. This intriguing alternation only raises curiosity about the website and what it\u2019s all about. The first thing one will do when landing on the homepage is to click on the About section. Thus, you\u2019ll find Gothamsiti is a creative agency with a strong portfolio. Scrolling throughout the website pages, you\u2019ll see the same black and grey background. These colors serve well the company branding, placing it on the high-end. Text is white, which perfectly contrasts with the dark background and is extremely easy to read. One can say the grey color palette has the main role to bring content forward. Gothamsiti is an agency that relies on content more than design.<\/p>\n<p>&nbsp;<\/p>\n<h3><a href=\"http:\/\/www.romainbriaux.fr\/\">Example 2 of a grey coloro scheme<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4968\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/02\/romain-briaux-min.png\" alt=\"\" width=\"860\" height=\"425\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><a href=\"http:\/\/capitolmarket.net\/vendor\/mea-cuppa-coffeebar\/\">Example 3 of grey color palette in a website<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4969\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/02\/mea-cuppa.png\" alt=\"\" width=\"860\" height=\"420\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>In this website, soft tones of red, orange and brown serve as variation from the grey than permeates the image in the homepage Header. Several nuances of grey create a balance in the chromatic scheme of the website. They make the color palette original and pleasant to the eye. As they\u2019re used in the Header, they instill an agreeable feeling into readers who willingly start exploring the website. They transmit a feeling of well-being and cosiness that\u2019s hard to ignore. The rest of the website relies on white background and dark-colored text.<\/p>\n<p>&nbsp;<\/p>\n<h3><a href=\"https:\/\/www.qedgroup.cz\/en\/\">Example 4 of grey in an original color scheme<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4970\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/02\/qd.png\" alt=\"\" width=\"860\" height=\"418\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>This time, grey is part of a pretty original color palette. It combines soft nuances with some yellow, blue and violet, plus black for the text. The image in the homepage Header is very suggestive, connecting with the title: \u201cGuide to your inner landscape\u201d. The grey suggests human silhouettes, and the \u201cinner landscape\u201d. Which is justified for a company specializing in applied psychology and behavioural economic fields. Text partly borrows the grey from the Header image, so text descriptions are grey.<\/p>\n<p>&nbsp;<\/p>\n<h3><a href=\"https:\/\/dddhotel.jp\/en\/\">Example 5 of grey, black and white<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4971\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/02\/ddd-hotel.png\" alt=\"\" width=\"860\" height=\"416\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>This website is representative for a hotel presentation. The homepage and the Hero of the homepage are designed so as to incorporate much white space. You already know white space is very important in web design, and DDD Hotel uses it wonderfully. As to color combinations, beyond white, the website has a touch of brown and some more grey and black. The text is colored in black, to contrast well with the other colors in the background image. Each section in the homepage has an indicator to what the user should do next: it\u2019s a circle (of different colors throughout the page) that signals the next step in the website navigation. In the first 2 sections, the circle is black\/white, to be easily distinguishable from the rest of the respective sections.<\/p>\n<p>&nbsp;<\/p>\n<h3><a href=\"https:\/\/www.minas-designs.com\/\">Example 6 of grey color scheme<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4972\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/02\/minas-world.png\" alt=\"\" width=\"860\" height=\"420\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>As the website announces, it proposes a new shopping experience. It\u2019s a jewellery shop, and the grey color palette brings forward the available collections. The dark grey conveys an impression of high-end products, luxury and expensiveness. Also, it suggests the jewellery is easy to notice. As best practice, text is white-colored on the grey background, for good visibility and a clear message. It\u2019s a site that invites to further exploration of the products and eventually, purchase.<\/p>\n<p>&nbsp;<\/p>\n<p>We hope these examples inspire you to create your own grey color palette for the new website. Now that you know the effects of grey for the <a href=\"https:\/\/colibriwp.com\/blog\/website-color-schemes\/\">color scheme of a website<\/a>, you can combine it with vivid or pale colors, to create the exact impressions that you want to associate with your brand.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Although toned down, a grey color palette can work wonders for websites. It can integrate additional colors that contrast with grey, in original combinations. Usually, grey makes a modern and sleek color scheme. Adjacent colors add liveliness and vivacity to the website, and can result in cool color combos. &nbsp; In the following lines, we&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/grey-color-palette\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":5231,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[147],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Grey Color Palette for Wonderful Websites - ColibriWP Blog<\/title>\n<meta name=\"description\" content=\"Check these examples of grey color palette used in websites. Take them as source of inspiration for your own website design.\" \/>\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\/grey-color-palette\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grey Color Palette for Wonderful Websites - ColibriWP Blog\" \/>\n<meta property=\"og:description\" content=\"Check these examples of grey color palette used in websites. Take them as source of inspiration for your own website design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/grey-color-palette\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-20T15:55:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-04T12:32:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/boris-stefanik-wxJscL5ZzDA-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3500\" \/>\n\t<meta property=\"og:image:height\" content=\"2132\" \/>\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\/grey-color-palette\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/boris-stefanik-wxJscL5ZzDA-unsplash.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/boris-stefanik-wxJscL5ZzDA-unsplash.jpg\",\"width\":3500,\"height\":2132},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/grey-color-palette\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/grey-color-palette\/\",\"name\":\"Grey Color Palette for Wonderful Websites - ColibriWP Blog\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/grey-color-palette\/#primaryimage\"},\"datePublished\":\"2020-02-20T15:55:59+00:00\",\"dateModified\":\"2020-08-04T12:32:51+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\"},\"description\":\"Check these examples of grey color palette used in websites. Take them as source of inspiration for your own website design.\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/grey-color-palette\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/grey-color-palette\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/grey-color-palette\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grey Color Palette for Wonderful 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":"Grey Color Palette for Wonderful Websites - ColibriWP Blog","description":"Check these examples of grey color palette used in websites. Take them as source of inspiration for your own website design.","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\/grey-color-palette\/","og_locale":"en_US","og_type":"article","og_title":"Grey Color Palette for Wonderful Websites - ColibriWP Blog","og_description":"Check these examples of grey color palette used in websites. Take them as source of inspiration for your own website design.","og_url":"https:\/\/colibriwp.com\/blog\/grey-color-palette\/","og_site_name":"ColibriWP Blog","article_published_time":"2020-02-20T15:55:59+00:00","article_modified_time":"2020-08-04T12:32:51+00:00","og_image":[{"width":3500,"height":2132,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/boris-stefanik-wxJscL5ZzDA-unsplash.jpg","type":"image\/jpeg"}],"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\/grey-color-palette\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/boris-stefanik-wxJscL5ZzDA-unsplash.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/boris-stefanik-wxJscL5ZzDA-unsplash.jpg","width":3500,"height":2132},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/grey-color-palette\/#webpage","url":"https:\/\/colibriwp.com\/blog\/grey-color-palette\/","name":"Grey Color Palette for Wonderful Websites - ColibriWP Blog","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/grey-color-palette\/#primaryimage"},"datePublished":"2020-02-20T15:55:59+00:00","dateModified":"2020-08-04T12:32:51+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e"},"description":"Check these examples of grey color palette used in websites. Take them as source of inspiration for your own website design.","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/grey-color-palette\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/grey-color-palette\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/grey-color-palette\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Grey Color Palette for Wonderful 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\/4965"}],"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=4965"}],"version-history":[{"count":0,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/4965\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/5231"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=4965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=4965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=4965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}