HTML & CSS - - By Jennifer Farley

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?

Sponsors