Color In Design: Brown

image Last week we took a look at purple, a vibrant rich color. Today, we’re talking about brown. In some ways brown is almost an opposite to purple in terms of connotations. Brown is considered to be earthy, natural, simple. It conveys feelings of dependability, wholesomeness and conservatism. On the downside it could also be considered a little dull, but that can be alleviate by combining it with brighter colors.

Brown is closely associated with wood and to a smaller extent with stone. A few years ago there was a plethora of websites with wooden backgrounds. This trend seems to be over now, but when done well, “wooden” sites were eye-catching and gave a nice textured feeling. Brown is, of course, also associated with old and aged photographs and materials and can be used to create a warm and nostalgic feeling.

Using Brown

There are many shades and tints of brown and many of their names come from nature. Light browns include sand, cream and beige, mid browns include chocolate, cocoa and dark browns include coffee and mahogany.

Using light colors with dark browns can produce a rich combination and if you think about autumn colors you’ll see nature giving a superb display of browns with reds, oranges and yellows – a ready made palette for conveying warmth.

Brown with green is earthy and brown with mint green is stylish. Yellows and oranges brighten dark brown while still looking “natural.” If you want to avoid using black, dark brown can be a good substitute without appearing as hard.

Brown Logos

I found it really difficult to think of or find many internationally famous logos using brown. If you can think of any, please add them.

image image

However, I did find plenty of websites doing a really nice job with brown, here’s ten that I liked.

James Lai Creative

image

Moustache Me

image

Hard Row To Hoe

image

New Concept

image

E-webbed

image

Cellar Thief

image

Artisan Built

image

e3fs

image

Wall Swaps

image

Lubie Vision

image

So what do you think of brown? Is it a color you like to use or avoid like the plague? Have you seen other nice examples of websites using brown?

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.

  • http://www.rebeccahaden.com rhaden

    Check out my website at http://www.RebeccaHaden.com for nice use of brown. After it had been up for a while, I told the designer (at Sharp Hue, Inc.) that people said it made them think of chocolate. He said, “Of course!” While my business is not connected with chocolate, I think the sense of luxury and indulgence says something about our customer service.

  • Bru

    Great Article. I’m just doing the layout for a brown site now and I discovered something very cool. The contrast in the copy area determines how easy it is to absorb the material. The higher the contrast the harder the ability for the mind to concentrate on what’s being said. Using low contrast colors actually makes the content easier to scan and absorb.

    examples:
    high contrast
    low contrast

    Beauty of a brown site is in the use of spot colors in contrast to the brown hues

  • Jeff

    Beautiful site design, Rebecca! As a writer too, I can appreciate the suggestion that words may be savored like chocolate; the chocolate color is apropos, not at all contrived, and satisfyingly subtle.

    And Bru, your insight about contrast is very good also. I’m a big fan of site design that uses color intelligently, especially if it reinforces qualities of the product or service. I think we really need to get away from black text on a white screen, which is everyone’s default (are you listening, SitePoint?).

    I’ve said this before (ad nauseum, probably) in other forums, but it’s important to remember that we are asking end users (and ourselves) to peer directly into a light source. This is not light reflected off a page, which has other characteristics altogether, and it’s just rude to bombard users with more white than needed. I try to use white only for accents. When our team redesigned the site for West Virginia’s vocational rehabilitation agency, we used a putty-like color for the text background because it has more satisfying contrast for people with visual impairments. That was an important segment of the agency’s audience, and we considered them carefully, but I think it really yielded a more satisfying look for everyone.

    Browns are great because they’re found everywhere in nature, and we should take advantage of that when appropriate. I’m about to tackle a design for a friend who sells rocks and semi-precious stones, and some related jewelry. I’ll take the colors directly from the products, toss things around until they come together in a way that expresses what the products are about. Some shade of brown is likely to provide the backdrop, since rocks are naturally found in the earth.

    Great food for thought, Jennifer. Thanks again!

  • Steve Brown

    I too love brown! I combined it with mint green on a site for my client http://www.claytonmedia.co.uk … take a look and let me know what you think!

  • mujahid

    i agry with you…

  • http://www.laughingliondesign.net Jennifer Farley

    Thanks guys for the comments and the links.

    Rebecca, I think chocolate is a great way to describe your site, very nice.

    Steve, the green and dark brown look really good together.

    Jeff, the putty background is definitely easy on the eye when used with suitably dark text.

  • Antonin

    Good idea of articles but would it be possible to display some color palette to demonstrate your point (your example between the green and mint green, or with warmer colors…)?
    I’m far from being a good designer and when I tried to develop a layout based on brown, I found difficult to match some nice colors with it.
    Just a suggestion…

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

    Brown isn’t usually my first choice colour in web design but it can look really nice (as some of these examples have shown) when executed well. I agree that it can be a good alternative to black when a softer tone is needed and I especially like the idea that it is linked to chocolate in our minds :-)

  • Bru

    @Antonin

    For color palettes there are a lot of tools online. Here are a few..
    Link1
    Link2
    Link3

    Realize that if you keep a consistent warm palette any hot color will jump out. Part of the success of a website is in prioritizing where the eye goes as it absorbs information. (Animation that loops anywhere on the site is the kiss of death for visitors concentrating on what’s being said). So when you’re using colors, step back and see where your eye is automatically drawn and determine if it is reinforcing the message you want to communicate. If one area is overwhelming the attention of the viewer and you really need him/her to read some copy you’ve got a problem.

    @rahden you have a beautiful website! I would just suggest a smidgen of leading between your lines to make them easier to absorb.

  • Mike Boardley

    Check out our amazing use of brown @ Comfy Chair Consulting.
    Oh, and if you need Django web development who will strut your stuff, look us up.
    http://www.comfychairconsulting.com

  • Federica Sibella

    Wow! Very nice round up, inspiring thanks. We just designed a brown based website for a client: check it out http://www.albergogiardinetto.it we’ll be very happy to have comments on it!