Color In Design: Gray

image In this series we’ve looked at pretty much every color in the rainbow and it’s use in design. In this post, we’re looking almost at an absence of color because today, I’m writing about the color gray. Gray is a balanced, neutral color and it is very popular in web design. It doesn’t evoke particularly strong emotions (except maybe a bad mood) in the same way Red, Orange or Purple might. It’s not as definite as black, but a very dark gray can do the business in almost the same way. Likewise a very light gray is not as stark as white, but it can sometimes fill the space occupied by white.

Gray has positive and negative connotations. “Gray matter” is associated with intellect and brain power, while the word “gray” itself is used to describe something that’s dull and boring. Gray suits are the uniform of the corporate world. Gray color names include charcoal, gunmetal, powder, ashen, lead and slate.

Gray In Design

It’s hard to go too far wrong with gray. It seems to work with just about every color. Because of it’s neutrality, it is frequently used as a background color. It makes other colors pop. As mentioned earlier, you can use light gray to replace white and dark gray to replace black. To get a warmer more earthy gray, use Taupe, which is a grayish brown.

Using gray with pastels and soft pink produces a feminine feel, while darker colors combined with gray create a more masculine quality. Dark gray with red or orange is a particularly eye catching combination. Take a look at the movie posters below.

300 Movie Poster

Gray is frequently used as as a background color for portfolios (both on and offline). It allows photographs, illustrations or other color elements come to the forefront while providing a solid backbone to the portfolio. Having most of the layout in gray almost makes the background disappear, yet makes the other elements and colors really standout.

Web Sites Using Gray

This week it really wasn’t hard to find a large number of nicely designed sites. Gray is extremely popular both as a background color and also for both headlines and body copy text. Here’s ten sites doing good things in gray.

Ok Cog Aoke

image

Digital Podge 2009

image

Eilersen

image

Christopher Meeks

image

Broader Sheet

image

Ricardo Gimenes

image

Ectomachine

image

Jeff Finley

image

Nokia Music Almighty

image

And there you have it. Are you a fan of gray? Any other nice web sites you’ve liked sporting this neutral color?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Zoe Feast

    Grey or Gray depending on which side of the pond you are, is such a versatile color and there are so many hues…just think of the definitions of grey in a Pantone color swatch.

    I use it quite a bit, so much softer than black and I absolutely agree with you when you say it helps colors pop.
    Here are a couple of grey sites I have recently created
    The 4449 and Goley Insulation
    Looking forward to your next color, or should that be colour!

  • Sheena Rai

    Nice Post!! Really Love Grey Shade Soo Much!! Even The Poster Of Moview 300 Is Monochrome… This is the first time i noticed it
    -Sheena Rai Technetto

  • http://www.crearedesign.co.uk/ Nicola Connolly

    Grey is certainly a much requested colour in my experience of web design – it works well with so many colours as you have said and it’s neutrality means it can give subtle depth without being overpowering. Using grey as a background lets the content take the limelight – when I was studying at University, all of the wall boards in our studios were painted grey so that when we displayed our work it gave you the most neutral and least intruding ‘background interference’ possible – letting our work stand out and do the talking.

  • genelle

    We are building our new home & have gone with main house colour a nice gray with darker portico pillars.We have taken the gray throughout the house with one or two darker feature walls incorporated with a glass splash in the kitchen of the same feature wall colour .can you suggest what other colours we should decoriate with ,We are not into all the very bright colours though,I was thinking pattened lounge cushions that have a splash of black on them as we have a oyster leather lounge. & lots of timber & cane going onto a timber back deck off the biofolds.

    Any thoughts would be wonderful
    Cheers genelle