Color In Design: Green

So far in this series we’ve looked at blue and red with some examples of their use in design. Today it’s the turn of the color green. Like blue, green is closely associated with nature and growth. The term forty shades of green is certainly appropriate and when you think about the names of the many green hues greens you can see why: sea green, emerald, grass green, apple, forest, leaf, sage, olive, pea green, fir and moss green to name but a few.

Just thinking about language and common phrases may help a designer decide what kind of feeling their use of green conveys. Green has many good connotations: getting the green light, moving to greener pastures, earning some greenbacks. Likewise green has its dark or unattractive meanings: the green-eyed monster, feeling green around the gills and simply being green, i.e. inexperienced.  I don’t think many designers want to come off as green, nor leave the visitors of the site feeling green around the gills.

Using Green

There are so many green hues, it makes for an extremely flexible color. It can be warm in the yellow-green side of the color wheel and cool in the blue-green and aquamarine. A lime green can make a design pop, olive green is much more subdued, while light green can give a clean spring time feel. Combining green with blue conveys feelings of water. Adding beige or brown gives an earthy organic feel. White and green is fresh and outdoorsy while purple and green is high contrast (and needs to be handled with care).

Green Logos

In previous posts on color in design, it’s been easy to pick out a large number of very famous logos, but when it came to green I found it quite difficult to think of some really well known global brands with green as a major color. (While I did come up with a few, I have to give a thank you to some Twitter friends who helped out.) It seems that in the world of massive corporations, green is not as popular as red or blue. Please feel free to add to the list. Here are a few:

bp-logo landrover

Recycle StarbucksLogo

GreenPeace

Below you’ll see ten websites with varying shades of green appropriate to their content and audience. What do you think about the use of green in these sites?

Bird Malaysia

BirdMalaysia

Leaf Span

leafspan

Scout

scout

I-Avion

i-avion

The Fruit Box

FruitBox

Tolingo

tolingo

Come2Play

Come2Play

The Medium

TheMedium

Version App

versions

Silverback

silverback

Are you a fan of the green?

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.

  • steve_web

    Your initial links to “red” and “blue” are reversed… red points to blue, and blue points to red. ;-)

  • Carl – Web Courses Bangkok

    Love this post as our colours are green :)

  • Mark

    I really enjoyed your articles about different colors in design. In Holland you see green a lot with beers. For example Heineken uses green a lot in the design of their website and also on their bottles. Grolsch does the same, they also have green as a major part of their logo.

  • Horsify

    Green is a great color BUT one of the hardest to deal with in terms of color shift between PC and Mac moniters, I’ve found.

    I would love to have some hex numbers for reliable light, medium, and dark greens! The ones that look perfect to me (on a Mac) look grey and dreary on a PC moniter.

    :(

  • Arron

    Green, IMO, is not nearly easy to design with when compared with reds and blues, it’s very easy to get it wrong.

  • cf_gal

    Thanks for the post. It’s quite useful to have examples of color usage, especially since sometimes color can be the hardest thing to get right — thanks for putting that together and I will definitely keep this URL on hand as a reference.

  • http://pixopoint.com/ ryanhellyer

    Cool. I love green websites … hence my own site is bright green :D

  • RussellG

    Green is one of my favourite colours to use in design. Currently designing my personal site using a few different greens hues.

  • http://www.isquaretechnologies.com SSJ

    I am a fan of GREEN and I liked the most example website given above. Green with Black suits the best according to me. I don’t like the last Silverback one. Colors looks like DULL for me. Don’t you think??

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

      Thanks everyone for the comments. It seems like green is popular with all of you designers!

      Thanks Steve_web for pointing out the mixed up color links. It’s fixed now.

  • Eric_HE

    Green makes people feel hopful~and fresh

  • Ollie

    A great example of using the colour green in web design is the website for the British children’s charity Barnardo’s: http://www.barnardos.org.uk