Colors have a huge impact upon website users. In building sites, designers often choose green as base color for their pages. The important thing is how they pair green with other colors and nuances, to get a nice visual effect and an effective website?
An interesting report about how color psychology influences conversion rates and boosts sales shows that green is:
- Better suited for certain niches, and quite unpopular for others
- Popular for energy, technology, finance, household and food
- Unpopular for car, airplane and clothing
- Questionable for health care
- Between 62% and 90% of the product assessment is based on color alone
- Color impression is responsible for 60% of the acceptance or rejection of a product.
But an effective site is not just about sales, it’s also about brand recognition and remembering. Base color and the particular color combination in websites help users shape their own image of the brand.
In combining green with other colors and tints, you should consider the different meanings green has in different cultures around the world:
- Western cultures – green stands for nature and freshness, spring, environmental awareness, luck, wealth, on the positive side.
- Middle East – green represents luck and wealth
- Eastern cultures – green symbolizes youth and new life
Beside the interest these meanings inherently arise, they’re of utter importance for planning global communication campaigns. The color has to be in line with the message you want to transmit, otherwise it might have subjacent implications that drive people away from your goods/services. Choose colors carefully, after you’ve chosen your target market.
So, we can conclude that not only is the niche a factor in determining whether green is an appropriate color or not. There’s also the region factor and the target audience with cultural specificities.
In the following lines, we’ll exemplify combinations of green with other colors, and see what significations they’re bound to convey:
Green, violet and orange color scheme
While green and orange match based on their opposition in the color wheel, violet is quite an unusual color that comes up. Violet has the effect of drawing attention towards the topic of the website, raising awareness and focusing attention on each and every detail in the site pages. Green, turned to violet, stands indeed for an emergency. This is related to the whole site identity and the team activism towards a zero-carbon future. If violet is the accent color, orange comes to soften the message: it is used for driving engagement and call to actions that invite users to take initiatives. Action itself is bound to soften the climate of emergency. Green should remain the base color, and so does the website imply through the color scheme and its message.
The next website shows a pretty similar color palette, only the orange softens more the overall message:
Colors that Go with Green: Brown and White
In this website, the mix of colors comes naturally: the photo integrates green and brown (+ some shades of foggy grey), unto which text is shown in white. Given that the background has darker colors, white comes in handy to create contrast. It’s also in line with the naturalness of the view, while focusing attention onto title and call-to-action. All the text of the page is displayed in white, including logo, title and subtitle, plus CTA button text. It’s remarkable how, through the use of colors, text and image support each other: green, brown and some tints of grey push the text forward, while white ensures harmony with the image naturalness.
The same color mix is used in websites such as:
First example green and white:
Second example 2 green and white:
Third example 3 light green and white:
Fourth example 4 dark green and white:
Colors that Go with Different Nuances of Green: Red, White
In the Geli website, there’s a nice interplay among different nuances of green: the green of the background, the green of leaves, the other green of other leaves… Overall, green spreads all throughout the page, and other colors interfere only to the point of better harmonizing the “greens” interplay. Some red and a little more of white are all the site needs to create a nice presentation of “Goods for green”. What’s special in the site is this exact combination of nuances that are distinct from one another, in reciprocal complementation and easy to form a coherent whole. As it’s best practice for green websites, text is displayed in contrasting white.
Following a similar color combination pattern:
Other Colors that Go with Green: Yellow, White
Another successful combination is that of dominant green, yellow as accent color and some white for background, texts and a few icons. It has power to transmit a vibrant feel and a consistent message (proudly funding Canadian artists for over 30 years!). Dark green contrasts perfectly with yellow and both put to the forefront a featured photo with a white background. For reasons of coherence, the text color alternates between white and yellow, so text and image better intersect their meanings and symbolism. The Call-to-Action buttons have all yellow background, so they are visible enough and urge to taking action. The layout and colors spread contribute to a clean design, that’s easy and pleasant to browse through.
Green, blue and black
If you find surprising to associate green with blue, let this website surprise you. On top of that, black comes to complete the color scheme with dark nuances. In fact, this mix of colors borrows its naturalness from… nature. One might associate blue with air, sky and light, that come down on solid ground and grass. A black frame wraps this décor and it contrasts with the lightened picture. As you might have already got accustomed, text is displayed in white, for reasons of visibility and harmonious color scheme. The CTA buttons perfectly fit into the design, as they alternate colors in the picture: green and blue.
The above-mentioned color combinations are the most popular in web design. You can use them as such for your website. Or you can take them as a source of inspiration for developing a different, unique color scheme. However, you have to keep in mind that green goes well with many colors: orange, brown, yellow, even blue, violet, black and white. Starting from here, you can innovate as much as you like, given that you have an eye on color combination principles, for your website design.
[sibwp_form id=1]
