{"id":4589,"date":"2019-12-17T12:49:44","date_gmt":"2019-12-17T12:49:44","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=4589"},"modified":"2021-09-15T13:39:42","modified_gmt":"2021-09-15T13:39:42","slug":"brown-color-palettes-websites","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/","title":{"rendered":"Brown Color Palettes for Exceptional Websites"},"content":{"rendered":"<p>Brown color palettes are indicative of certain meanings in websites. Brown is the color of earth, it signifies steadfastness, stability and balance. Also, it implies reliability and friendliness, as well as simplicity, that\u2019s why it\u2019s a good idea to choose a brown color palette for your website. When included in a website color scheme, brown gives the impression of wholesomeness and peace, harmony and stability. If that\u2019s what your brand needs to communicate, use brown in your website color combo.<\/p>\n<p>So, let\u2019s see some examples of brown color palettes in websites:<\/p>\n<p>&nbsp;<\/p>\n<ol>\n<li>\n<h4><a href=\"http:\/\/www.athena-art.com\/\">Athena Art<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4590\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/athena-art.png\" alt=\"Athena Art brown color palettes\" width=\"860\" height=\"391\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This website design plays with geometric shapes and original brown color palettes that focus the attention on the site content. A great part of the homepage is covered with light brown, in combination with violet, which gives a feeling that this website content is to pay attention to. The design is unusual, and it gives the impression of elegance and modernity. The color scheme matches the topic of the website, also giving it a modern aspect that seems to be intricately related to \u201cAthena Art Finance\u201d.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"2\">\n<li>\n<h4><a href=\"https:\/\/sahel.qodeinteractive.com\/\">Sahel<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4591\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/sahel.png\" alt=\"Sahel brown color palettes\" width=\"860\" height=\"423\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This website mixes different nuances of brown. The images are placed onto a light brown background, which ensures enough negative space is preserved. Also, it leaves the impression of 3D movement, which makes the website stand out and grabs the attention of users. The design of the homepage is simple, leaving the decision to users as to where they navigate and how they go further exploring the website.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"3\">\n<li>\n<h4><a href=\"https:\/\/lincorwatches.com\/en\/\">Lincor Watches<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4592\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/lincor-watches.png\" alt=\"\" width=\"860\" height=\"424\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This website uses light brown in the background of the homepage Hero. It gives a sense of trust, and leaves enough room for negative space. As a result, the message is brought to the forefront, and it grabs people\u2019s attention with its friendly tone. This goes hand in hand with the friendliness of the color scheme and the simplicity of it.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"4\">\n<li>\n<h4><a href=\"https:\/\/www.alps-coffee.it\/de\/\">Alps Coffee<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4593\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/alps-coffee.png\" alt=\"Alps Coffee brown color palettes\" width=\"860\" height=\"406\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This website uses brown as suggestive of coffee. This is the very topic of the Alps <a href=\"https:\/\/muffingroup.com\/blog\/cafe-websites\/\">coffee website<\/a>, that\u2019s why brown is used in the homepage Hero image. It involves calm and comfort, steadfastness and stability, and harmony. The logo, the menu and the text color are the same brown as that which is used for the photo, so there\u2019s design coherence and visual balance.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"5\">\n<li>\n<h4><a href=\"https:\/\/authenticff.com\/\">Authentic CFF<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4594\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/authentic-cff.png\" alt=\"\" width=\"860\" height=\"424\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This website doesn\u2019t use brown as the main color in its pages. However, light brown is the accent color, for underlining and marking some parts of content, all throughout the pages. Call-to-Action buttons are in brown. Some sections appear on a brown background. The logo itself consists of brown, the same brown nuance as the rest of the homepage items. The hamburger menu and the expanded menu are on a brown background. All these create unity within the page and give coherence to content.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"6\">\n<li>\n<h4><a href=\"http:\/\/ss.art4web.co\/\">Art4web<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4595\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/art4web.png\" alt=\"Art4web brown color palettes\" width=\"860\" height=\"429\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>In this website, brown comes naturally, as indicative of the beauty ritual. For the homepage, the designer used split screen, so the page unfolds only onto the right part of the screen. All throughout this right side of the page, brown alternates with blue-green nuances, for exquisite effects. In some sections, light brown appears in the background, while text is visible in a different brown nuance that contrasts well with that background. The presentation is remarkable as unique, and recommends Salon Sona as special for the beauty ritual.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"7\">\n<li>\n<h4><a href=\"https:\/\/www.ultimagstaad.com\/en\/\">Ultimagstaad<\/a><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-4596\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/ultimagstaad.png\" alt=\"\" width=\"860\" height=\"422\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This website is about a 5-star hotel. It uses brown both in the Hero image and in the following homepage sections (background, titles &amp; subtitles). It conveys a sense of luxury and cosiness, that\u2019s indicative of the hotel luxury. For elements on hover, they use the brown color, making micro-interactions part of the whole web design.<\/p>\n<p>&nbsp;<\/p>\n<p>We hope these few examples inspire you for the <a href=\"https:\/\/colibriwp.com\/blog\/website-color-schemes\/\">next website design project<\/a>. Hence, you should know what brown nuance to use in what part of the website, so the whole stays unified and coherent, transmitting the values you want to, through the use of brown.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Brown color palettes are indicative of certain meanings in websites. Brown is the color of earth, it signifies steadfastness, stability and balance. Also, it implies reliability and friendliness, as well as simplicity, that\u2019s why it\u2019s a good idea to choose a brown color palette for your website. When included in a website color scheme, brown&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":4655,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[27,47],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Brown Color Palettes for Exceptional Websites - ColibriWP Blog<\/title>\n<meta name=\"description\" content=\"Check some examples of brown color palettes used in websites. They might inspire you for your next project, and serve as a starting point in your 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\/brown-color-palettes-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Brown Color Palettes for Exceptional Websites - ColibriWP Blog\" \/>\n<meta property=\"og:description\" content=\"Check some examples of brown color palettes used in websites. They might inspire you for your next project, and serve as a starting point in your design\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-17T12:49:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-15T13:39:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/alps-coffee-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1878\" \/>\n\t<meta property=\"og:image:height\" content=\"886\" \/>\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=\"5 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\/brown-color-palettes-websites\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/alps-coffee-1.png\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/alps-coffee-1.png\",\"width\":1878,\"height\":886},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/\",\"name\":\"Brown Color Palettes for Exceptional Websites - ColibriWP Blog\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/#primaryimage\"},\"datePublished\":\"2019-12-17T12:49:44+00:00\",\"dateModified\":\"2021-09-15T13:39:42+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\"},\"description\":\"Check some examples of brown color palettes used in websites. They might inspire you for your next project, and serve as a starting point in your design\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Brown Color Palettes for Exceptional 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":"Brown Color Palettes for Exceptional Websites - ColibriWP Blog","description":"Check some examples of brown color palettes used in websites. They might inspire you for your next project, and serve as a starting point in your 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\/brown-color-palettes-websites\/","og_locale":"en_US","og_type":"article","og_title":"Brown Color Palettes for Exceptional Websites - ColibriWP Blog","og_description":"Check some examples of brown color palettes used in websites. They might inspire you for your next project, and serve as a starting point in your design","og_url":"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/","og_site_name":"ColibriWP Blog","article_published_time":"2019-12-17T12:49:44+00:00","article_modified_time":"2021-09-15T13:39:42+00:00","og_image":[{"width":1878,"height":886,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/alps-coffee-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"iulian","Est. reading time":"5 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\/brown-color-palettes-websites\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/alps-coffee-1.png","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/12\/alps-coffee-1.png","width":1878,"height":886},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/#webpage","url":"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/","name":"Brown Color Palettes for Exceptional Websites - ColibriWP Blog","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/#primaryimage"},"datePublished":"2019-12-17T12:49:44+00:00","dateModified":"2021-09-15T13:39:42+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e"},"description":"Check some examples of brown color palettes used in websites. They might inspire you for your next project, and serve as a starting point in your design","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/brown-color-palettes-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Brown Color Palettes for Exceptional 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\/4589"}],"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=4589"}],"version-history":[{"count":1,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/4589\/revisions"}],"predecessor-version":[{"id":8770,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/4589\/revisions\/8770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/4655"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=4589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=4589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=4589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}