20 Great Examples of the Use of Brown in Web Design

This is an extensive follow up to a post that I wrote on my own personal blog a little while ago before Inspect Element was even a twinkle in my eye. Now time to let the designs to do the talking:

leemunroeLee Munroe

creamycssCreamy CSS

holdfirenetHoldfire

authenticstyleAuthentic Style

ideafoundryIdea Foundry

rootcreativeRoot Creative

forestrivertimberhomesForest River Timber Homes

tutsplusTuts +

sergionovielloSergio Noviello’s Portfolio

leslygLesly G’s Portfolio

typechartTypechart

tearoundTea Round

vigetextend1Viget Extend

blueacornBlue Acorn

jlaiJames Lai Creative

coThe Creative Outfit

coffeenaticCoffeenatic

ditleyDitley

spundoSpundo

kuhboomKuhboom

Author

I'm the creater of Inspect Element and currently work as a senior web designer and developer for Factory Media. You can read my personal blog and follow me on Google+ and Twitter.

Discussion

  1. nice color usage, and good templates

  2. Joel Vardy says:

    Really nice round-up Tom. It didn’t occur to me that those site were using brown colour schemes. They look really good but if someone asked me to build something with a dark, brown colour scheme I think I would struggle, some great inspiration here.

  3. Nora Reed says:

    Great use of brown. Brown can be a nice color for design if used well, it can also be dull and lifeless so it’s a fine line to be crossed.

  4. vocal says:

    waooooo, you used the @font-face, it’s so beautiful.

  5. James Bloor says:

    My new site uses browns too – would be great to hear some feedback!

    http://jamesbloor.com/

    James

  6. NS Digital says:

    We’ve just finished a nice brown site, http://www.ndcproductions.co.za

  7. Nando says:

    Here’s a brown site that we finished a few months ago. We were a bit afraid of using brown, but it worked well with the restaurant image and it turned out looking quite nice:
    http://terasauzlatestudne.cz/

  8. Nice ones.. Here’s what we did with brown: http://www.hamarikaksha.com It was featured on design galleries such as CSSMania.

  9. Jorge says:

    Great collection, maybe this one it’s ok too.

  10. great post. love the colors used in your examples, so many times i’m working a the <a href="http://blueprintds.com"Web Design Company i work for and clients want a brown theme, or feel to make it more natural, this was a big help thanks

  11. Web dizajn says:

    Braun and orange colors are very empathic and firendly colours!

  12. Mercedes & BMW call brown = Champagne

    Because brown is for Toyotas. And Zunes.

  13. Its amazing how you have used a rare colour like brown in designing your sites. Its good to see blue with brown in websites, especially here in blueacorn.

  14. Great Info, Good to see some great designs.

Become Part of the Discussion

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.