Skip to main content

12 colours and the emotions they evoke

07. Pink

Rentberry screenshot

Pink creates a soft mood on this renting website

Feminine, young, innocent

Pink is a specialist colour that won't work for a lot of websites, but will work perfectly with the right audience. Because most people interpret pink as feminine, the colour is popular for targeting female users. However, don't overdo the pink-femininity connection, or else you're walking a fine line between appealing to users and pandering to gender stereotypes.

Its links with childhood and with sugary treats give pink a sweet, sometimes innocent appeal (not surprisingly a self-perpetuating cycle). It is also traditionally used with love and romantic themes, alongside red and light purple.

Rental service Rentberry's website uses pink as its key colour. In this case, it creates a soft, safe vibe, and intentionally distances itself from more corporate, traditional rental services.

08. Brown

Brown screenshot

B&O Play uses brown in an unexpected way on its site

Earthy, sturdy, rustic

While not a popular choice in web design, brown can, under the right circumstances, be effective nonetheless. As the colour associated with the earth and trees, brown can add an outdoorsy feel, maximised by a pairing with green. The tree connotations also give a sturdy and reliable feeling.

In web design, brown is often used in conjunction with wood texturing, giving the same old-fashioned and rustic atmosphere of a wooden cabin.

While tech websites are typically dominated by stronger, bolder shades, the microsite for B&O Play uses brown to great effect. The muted tones suggest a classier, more human side to the technology on offer. Natural connotations also remain: wood and leather feature prominently in the hero video, while a marble effect is used in the background.

09. Black

Cilindro Di Forna Setti

Black creates a real impact on Cartelle's website

Powerful, sophisticated, edgy

As the strongest of all colours, black is often used only sparingly – such as for text – but it works quite well as a primary colour element (like for backgrounds). Much like purple, black adds an air of sophistication and elegance, and also mystery, though with much bolder confidence.

The heavy use of black for the Cartelle creative agency creates unquestionable impact on its homepage and subsequent animations.

10. White

Cartelle website

An off-white background keeps the focus on the shoes here

Clean, virtuous, healthy

Literally the opposite of black, white pairs well with just about anything, making it ideal as a secondary colour. In a supporting role, white draws out the elements of more stimulating colours, and can even guide your user's attention if you know how to use it (check out UXPin's Zen of White Space in Web UI Design guide to learn more).

As a primary colour, though, white gives off an impression that is both clean and chaste. White has that 'spotless' feeling that, for the right site, feels completely effortless. Its association with purity can make it seem virtuous, but also sterile and cold.

To soften this feeling of sterility, some web designers will tend towards an ivory or cream instead. These offshoots of white are softer and even less noticeable, but with the same minimalist and complementary aspects. They are the more comforting and less stark alternatives to white.

The shoe company ETQ uses a dominant off-white background to keep the users' attention where it belongs: on the shoes.

11. Grey

Galvan Mobili website

Grey is used sensitively on the Galvan Mobili website

Neutral, formal, gloomy

As the intermediary between black and white, grey exudes neutrality, or a lack of any particular sensation. However, in the hands of an expert, this intermediary position can be a powerful tool.

By varying the vibrancy, grey can take on the properties of either black or white – attention grabbing or repelling – to specific degrees. That means if black is too powerful for your design, try dark grey. If white is too bland, try light grey.

On its own, though, grey is rich with individual characteristics. It is the colour of formality, so sites aiming to look traditional or professional tend to favour it. It can also give a depressing vibe, as it's the colour of gloomy, rainy days. When used dominantly, it can be somewhat subduing, for better or worse.

You can tell the Italian furniture company Galvan Mobili uses grey well because you don't even notice it. The grey background gives a professional air, and keeps attention on the pictures and bright red logo.

12. Beige

Beige Alan Ducasse

Beige here creates a calming backdrop

Accentuates surrounding colours

Beige may not be a primary colour, but it's worth mentioning because of its accentuating effects: it takes on the characteristics of the colours around it. While dull on its own, its enhancing effects make it a powerful choice as a background or secondary colour.

The use of beige for the aptly named Tokyo restaurant Beige Alain Ducasse creates a calming, comfortable backdrop to the more relevant elements such as clickable text and photos.

Like this? Read these!