From decoration to high tech products and fashion, grey has become the trend colour at the turn of the century.

 

In interior design, grey is a guest in every room of the house, and enhances every other colour. In our wardrobes, as smart as black can be, grey is a sure bet for every occasion and each season. Our electronic devices, as well as their interfaces, are available in all the grey hues.

In short, grey’s never been as colourful nor as sexy as it is now!

bouche

Is grey really a colour?

Yes! Generally it’s considered a neutral, cool and balanced colour.

Timeless and practical: it’s softer than black, more noticeable than white. Charcoal grey possesses black’s strength and mystery without being negative or aggressive. Light grey features white’s light without being transparent.

Grey suits all moods: modern, sophisticated, understated, quiet, earnest, conservative, formal, dull or sad.

panel

Grey in web design

This colour is very popular in designing web and mobile interfaces. If you look for it in interfaces, you’ll find this colour everywhere.

Indeed, grey is universal and ordinary. It seems to suit every colour and gives a smart look, fitting screens. Light grey can be used in some cases instead of white, while dark grey can replace black.

imac

Grey: user manual

Because it’s naturally neutral, people frequently use it as wallpaper colour. Indeed, it allows the products showed on screen to stand out and attract the user’s eye.

écran gris

Still and impassive, grey is strong and steady. There is no surprise if grey is often the colour for block’s background. It imperceptibly outlines the page.

écran blanc

The difference between screen and print reading is clear. On screen, black on white can seem indigestible for some readers, seeing as the strong contrast wears the eyes out. For this reason, grey is a favourite for typography in most websites.

 

A good range of grey shades can also help to establish a hierarchy in information and make reading easier. Dark grey for titles, slightly lighter for headers, medium for common texts, etc.

 

The text needs to contrast with the background. A text seemingly good looking for a designer can be unreadable for a good part of the readers.

innovations

 

Icons and pictograms can be darkened. They blend in perfectly with the rest of the interface. Darkening is mainly used when you need to see the images, without them standing out.

pictos gris

For some people, intensive use of grey gives a dull, sad and gloomy atmosphere.

 

In this case, just ad a slight percentage of dominant colour on screen, and you will see a “coloured grey”. Coloured grey is richer and gives an atmosphere to the design.

 

Coldly tinted, it gives an image of modernity, solemnity and refinement.

vélo

 

Warmly tinted, it creates a warm, friendly, and humane atmosphere.

cooper

 

Neutral greys or achromatic come from black. Their RGB worth are identically balanced.

nuances

Off-greys or almost neutrals are slightly tinted. Their RGB code are not exactly similar.

nuances2

Cold greys include blue, green or purple, whereas warm greys include brown, pink, reddish purple, yellow and red.

nuances3

nuances4

Grey is a very pretty colour, useful and essential in interfaces’ design. It is not gloomy and can even seem merry when slightly tinted. It is time to finally admire it and pay tribute to this incredible colour. Without it, design and content hierarchy on screen would be difficult if not impossible.

 

Long life to Grey!

This article comes from Axance’s Lead AD, Shiva Sherbaf’s blog