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.
In the following lines, we give you some examples of grey color palettes that can be successfully replicated for a new website:
Example 1 of grey color palette
This website alternates black and grey in serious tones. This intriguing alternation only raises curiosity about the website and what it’s all about. The first thing one will do when landing on the homepage is to click on the About section. Thus, you’ll find Gothamsiti is a creative agency with a strong portfolio. Scrolling throughout the website pages, you’ll 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.
Example 2 of a grey coloro scheme
Example 3 of grey color palette in a website
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’re 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’s hard to ignore. The rest of the website relies on white background and dark-colored text.
Example 4 of grey in an original color scheme
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: “Guide to your inner landscape”. The grey suggests human silhouettes, and the “inner landscape”. 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.
Example 5 of grey, black and white
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’s 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.
Example 6 of grey color scheme
As the website announces, it proposes a new shopping experience. It’s 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’s a site that invites to further exploration of the products and eventually, purchase.
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 color scheme of a website, you can combine it with vivid or pale colors, to create the exact impressions that you want to associate with your brand.
