27 Examples of Color Usage in Web Design

By / Sep 26, 2011 / Inspiration

Here on WDL, we’ve discussed how colors can be used to invoke various emotions. For example, the color red symbolizes excitement and energy, while the more tranquil color blue represents calmness and stability. Here we’ve gathered a collection of web designs that make good use of color. In these examples you’ll notice some using color to highlight and draw attention to specific elements, while others use larger amounts of color to set the over all tone of the site. Nevertheless, there’s plenty of color usage here to inspire you. Enjoy!


Colors in Web Design


Colors in Web Design

Best Made

Colors in Web Design

Engine Creative

Colors in Web Design


Colors in Web Design

Ignacio Macri

Colors in Web Design

The Combine

Colors in Web Design


Colors in Web Design

James Garner

Colors in Web Design


Colors in Web Design

Sunday Best

Colors in Web Design


Colors in Web Design


Colors in Web Design

Igor Zagnienski

Colors in Web Design


Colors in Web Design

de Certau & Associes

Colors in Web Design

Alexander Zhestkov

Colors in Web Design


Colors in Web Design

Flow Festival

Colors in Web Design

Column Five

Colors in Web Design


Colors in Web Design

Daniel Martin

Colors in Web Design


Colors in Web Design


Colors in Web Design


Colors in Web Design

The Manual

Colors in Web Design

Bloom Health

Colors in Web Design


The Best Designs

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

  • http://www.mindeez.com Jérôme – blog marketing

    I think it’s very impressive…I love Archfirm, it’s so minimalist

  • http://www.webdesignfact.com/ Vivek Dhande

    Awesome examples !! Thanks for sharing.

  • http://www.aledesign.it aledesign.it

    A great collection of graphic site. So nice works someone! “Grind” “de Certau & Associes” and “Hyper” are my preferite! Thanks for sharing!

    • http://www.hyper.no Lars-Petter

      Thx aledesign

      Great to hear that you like our new website.

      Best regards

      Lars-Petter W. Kjos
      creative director

  • http://www.icwebdesign.co.uk IC Web Design

    Wow great collection of sites with some really varied colour! Thanks for the share

  • http://www.lexolutionit.com Maneet Puri

    In web designing, Colors plays an important role in highlighting the message that should be conveyed to the users. In some designs, I found too much of loud and bright colors making the main page too flashy while some other designs have a perfect balance of colors.If the colors are too intense, it will take away the attention of the user from the content value of the site.

  • John Carpenter

    There is no excuse for bad design on the web. Very good examples.

  • http://www.eonic.co.uk/d Eonic Web Design

    I really like the flow festival site. Great collection of sites, unique and inspiring.

  • http://www.dg-communication.com DG Communication

    Super exemples ! Un article à recommander!

  • http://www.webmentor.cr/en/ Marco

    I absolutely loved indubitablee, what a great job. WOW!!!

  • Samuel

    Some fresh stuff here. I dig it.

  • http://www.customicondesign.com/ custom icon design

    yeh, so many awsome website, they are all have great color. look so professional and clean. I have got some inspiration from those website. many thanks.

  • http://www.nedfinity.com Webdesign

    These are inspirational, creative and highly professional.
    Especially James garner’s website looks absolutely stunning!

  • http://2creative.se Tony

    Really nice! Thanks

  • http://graphicdesignplymouth.com Plymouth Graphic Design

    Love the James Garner site, but my question is whether anyone would hang around long enough to find out what it is all about.

  • http://www.scotlassiter.com Scot

    There are some great uses of color here. Rich,, vibrant and very interesting. I will have to say I like thecombine.org, very different than the norm and great us of electronic illustration. Thanks for the inspiration!

  • http://blog.ferryardian.net ferryardian

    the examples are very inspirational, thans for sharing…

  • http://timkeay.com Tim Keay

    Really like the Engine Creative one – octopus hatching out of an egg ftw! :o)

  • http://bloggingwordpress.net/ Liam

    Thanks for sharing such an useful list.
    I was unaware pf many of this sites. Now I use this to work more effectively.