Colour design: green

My selfie

James Turner,

Tags: Design

With a name like Rotten Tomatoes, the choice of colour palette for the TV and film review aggregator was clear. Red accents, with the occasional splash of blue and yellow, reign over the primary colour, green (Figure 1). In this post, I'd like to take a look at how the colour green is best used in the world of web design, and review a small selection of sites which feature this colour.

The Rotten Tomatoes header and news carousel.
Figure 1: Green dominates the header on Rotten Tomatoes.
Sample My Name Hex Code
Green#3A9425
Yellow#F3EC1A
Blue#0C89CA
Red#ED1C24

The naming of the colours

It never hurts to drop the names of a few colours into conversations with fellow designers and clients. Let's start with CSS. There are 140 pre-defined colours in the CSS specs. Here are a sample that have a passing resemblance to the colour green.

Sample CSS Name Hex Code
MintCream #F5FFFA
Aquamarine #7FFFD4
SpringGreen #00FF7F
PaleGreen #98FB98
GreenYellow #ADFF2F
Chartreuse #7FFF00
Lime #00FF00
LawnGreen #7CFC00
MediumSpringGreen #00FA9A
LightGreen #90EE90
MediumTurquoise #48D1CC
YellowGreen #9ACD32
MediumAquaMarine #66CDAA
LimeGreen #32CD32
DarkSeaGreen #8FBC8F
MediumSeaGreen #3CB371
LightSeaGreen #20B2AA
OliveDrab #6B8E23
SeaGreen #2E8B57
ForestGreen #228B22
Olive #808000
Teal #008080
Green #008000
DarkOliveGreen #556B2F
DarkGreen #006400

That's not all. FindTheData has a whole library of named colours with suggested hex codes. Of course, you can't refer to them by name in CSS — you have to use the hex code — but it's nice to have a wider vocabulary of colours:

Sample FindTheData Name Hex Code
Neon green#39FF14
Moss green#ADDFAD
Pastel green#77DD77
Malachite#0BDA51
Pistachio#93C572
Acid green#B0BF1A
Kelly green#4CBB17
Laurel green#A9BA9D
Sage#BCB88A
Apple#8DB600
Mint#3EB489
Verdigris#43B3AE
Jade#00A86B
Moss green 2#8A9A5B
Viridian green#009698
Islamic green#009000
Camouflage green#78866B
Avocado#568203
Viridian#40826D
Generic viridian#007F66
Spanish viridian#007F5C
Sap#507D2A
Pine#01796F
La Salle green#087830
Cadmium green#006B3C
Bottle green#006A4E
Hunter green#355E3B
Dark moss green#4A5D23
British racing green#004225

Finally, just because I like it, Google's Material Design specifies a number of greenish colours in its documentation:

Sample Material Design Name Hex Code
Lime 500#CDDC39
Light green 500#8BC34A
Green 500#4CAF50
Teal 500#009688

The many meanings of green

Over thousands of years of human history — and tens of years of digital history — the colour green has taken on a number of meanings. Some of these are culturally specific, while others are universal. I've discussed a few below, but see this online etymological source for more information.

Success

In user interface design, a very important use of the colour green is to reinforce a success message. Green means “whatever you just did worked” or “it's OK to proceed”. It is so tied up with the idea of success that a user barely needs to read a success message if it appears in a green container (Figure 2). Changing the colour of a success message to red is a big no-no (red is for danger), and even blue or yellow would probably add to the user's cognitive load.

A green-colored box with the message: your settings have been changed.
Figure 2: Thank you, computer! Because of the colour, I don't even need to read the success message on Dropbox when I upload a file.

Nature and the environment

Green is the colour of nature, and many organisations with a connection to the outdoors use green in their branding. From recycling and waste management (Figure 3), to gardening and horticulture, to adventure holidays, to breweries, vineyards, and coffee growers, and even to the military (think camouflage), green is a very prominent cliché.

Recycle symbols in red, yellow, grey, green and blue.
Figure 3: Which colour best suits the universal symbol of recycling?

Health and healing

All manner of health-related services and products use green as their primary colour. Hospitals, chemists' and dentists' sometimes have a green logo, while organic food and nutritional supplements tend to have green in their packaging (Figure 4). The reason might be that green is considered to be a calming, reassuring colour.

A jar of stevia extract.
Figure 4: Stevia extract is often sold in green packaging. That must mean it's good for you, right?

Money

How many currencies around the world have a green bank note for their smallest denomination? The US famously does, and the UK used to. In many English-speaking communities, the word ‘green’ is slang for money. If you're thinking of setting up a low-end website for pay-day loans, perhaps green is the colour for you?

Jealousy

Although a bit shopworn, phrases in the English language like “I'm green with envy” and the “green-eyed monster” (possibly coined by Shakespeare) are well-established in art and literature.

Poison, radiation and corrosion

In popular culture, green has long been associated with poison. The spent nuclear fuel rods in the opening sequence of The Simpsons and the slimy spirits of Ghostbusters are just a couple of the icky, squelchy and runny substances in cartoonland that might be bad for you. Some of these things have even made the leap into real life (Figure 5).

The selection of, um, mouth-watering products on toxicwastecandy.com
Figure 5: Toxic Waste Candy (bad website alert) went all-out with their decision to go with green.

Inexperience

In English, if someone is green, they are young, inexperienced and naïve. Maybe it's from the colour of a new soldier's uniform or the colour of an inexperienced sailor's skin on his first day out on the boat. Answers on a postcard, please.

Ireland

Ireland is strongly related with the colour green; just look what happens around the world on St. Patrick's day. The term ‘Kelly green’ (Kelly being a common Irish surname) probably comes from this association.

Paradise

Green is a traditional colour in Islam. In the Qur’an, it is referred to when describing paradise. The colour appears on the flags of a number of countries whose chief religion is Islam (Figure 6).

Flag of Saudi Arabia.
Figure 6: The national flag of Saudi Arabia.

Update 18/07/16: For more on colour associations, Duke at First Site Guide shared this great article and infographic on the psychology of colour.

Skip to navigation

Colour theory and the colour green

If you're having trouble choosing colours for your project's palette, a good place to start might be the colour wheel. Colour theory, which aims to give insights into how colours interact, is only a starting point; I would always feel free to play around with colours and vary them according to the needs of the project.

Monochromatic

A monochromatic palette uses tints and shades of the same hue of green. It is an obvious choice for any environmentally-themed website, but it can be a bit tame.

Analogous

For me, green, yellow-green and sea green evoke rolling fields under a clear blue sky. This is a great choice for websites related with rural life or open-air events.

Complementary

Is it just me, or do green and red scream ‘Christmas’? A mostly green website with the occasional red accent can be really appealing, but too much red and it runs the risk of becoming lurid. Some people might see unexpected black or white outlines when green and red are placed next to each other, which can happen when complementary colours meet.

Triadic

Green, orange and purple can be a fun combination. Remember that you can tinker with tints and shades to get a palette that doesn't clash too much.

Split complementary

You'd think these four colours — green, yellow-green, red and purple-pink — would only be good for heralding the arrival of Jimbo's Flying Circus, but in fact they can work quite nicely, especially if one colour dominates and the others are used in moderation.

All the above colour swatches have the same base colour green (#0DBF0D), and I used Paletton to derive the secondary colours. Interestingly, even though it's exactly the same green in each swatch, sometimes it looks duller or more vibrant depending on the colours around it (e.g. when you compare the triadic and split complementary colour schemes).

Skip to navigation

The following is a showcase of some websites which (a) I like and (b) have a colour palette featuring green. Each one has things that I can learn and apply to my own websites in the future.

Treehouse

The folks at Treehouse went for a simple pastel colour scheme. Green echoes the ‘tree’ part of the name, while playful graphics in a range of other colours hint at the simplicity of the service Treehouse provides. Different pages use varying amounts of the primary green colour. The landing page is very green. For me, this is like saying “hello, we're Treehouse”. On the other hand, the ‘Features’ page is more white and grey. This implies to me that the ‘Features’ page probably has more nitty-gritty explanations in it. So, the first learning point is use lots of colour to attract attention, but when you have people's attention, tone the colours down. The site offers two packages, a Basic Plan and a Pro Plan. The details about the basic plan are in the standard green, but the Pro Plan uses a blue accent (Figure 7). There's the second learning point: use your dominant colour for your basic service, and your accent colour to highlight a more exclusive or luxury offering.

Details of Treehouse's Basic Plan and Pro Plan in green and blue, respectively.
Figure 7: Ubiquitous green hints at the ‘basicness’ of the Basic Plan, while blue reinforces the idea that the Pro Plan is for special people.
Sample My Name Hex Code
Green#5FCF80
Pastel Green#B8F5D2
Blue#42B4D6
Pink#FBAEA8
Light Blue#C1E0F5
Grey#DCE1E5
Skip to navigation

Responsive Field Day

The Responsive Field Day web design conference held in Portland, Oregon in September 2015 looks like it had a great line-up of speakers, and most of the presentations are available to download as videos or podcasts. The recordings (I didn't attend the conference) are thought-provoking and entertaining — definitely worth a listen while you're doing your ironing or whatever. It's a simple one-page site, with fun graphics, minimal animations and a playful colour scheme (Figure 8). The dominant colour is pine green (I'm guessing that's Portland in the background), while orange, yellow and a couple of blues serve as accents. They not only colour the cute little roboty thingies in the site header, but also the UI elements, including buttons, headings and links. There's my learning point from this site: maintain colour consistency between images and UI elements. This is a great little site, with a beautiful, coherent colour palette.

The single page Responsive Field Day site.
Figure 8: I'm guessing that the colour scheme on the Responsive Field Day site was inspired by the Oregon landscape.
Sample My Name Hex Code
Dark Green#016B59
Green#01B295
Light Green#C3E5DF
Yellow#FFD457
Orange#F37737
Blue#00476A
Skip to navigation

The Crop Trust Annual Report 2014

I like the fact that the Crop Trust avoided doing the obvious thing of using green for the primary colour in its annual report, and went with blue instead. Green still features, but more in its photography and as an accent colour. My next learning point, then, is don't always go for the obvious colour choice. The cover page presents attractive infographics (see Figure 9), while elsewhere, coloured triangles sprout, live and then wither, just like the crops that the organisation aims to protect. The navigation is not typical, but then this is not a typical site. All in all, I think it's a well-executed and original bit of design, and a good example of maintaining coherence in a colour scheme while avoiding triteness.

Green, blue, yellow and purple rectangles contain funky animations of cartoon aeroplanes, office buildings, and an Antarctic station.
Figure 9: Green everywhere would have been a cliché for the Crop Trust's annual report, but thankfully they avoided it.
Sample My Name Hex Code
Blue#0775B4
Dark Blue#0A2B50
Earth Green#41571E
Investment Green#5AC6A6
Seed Green#999C4E
Gold#F6B400
Red Brick#8F5845
Violet#4C4580
Another Blue#4487D4
Skip to navigation

Owltastic

Even though Owltastic, the personal and professional blog of designer Meagan Fisher, doesn't get updated too often any more, it's still a lovely-looking site (Figure 10). Sea green, wine and cornfield yellow play together in text, backgrounds, photo overlays and UI elements. In fact, most of the buttons on her site have a green-yellow-red gradient as a background (Figure 11). What sounds like a terrible idea on paper actually works rather well. There's my lesson from Owltastic: select colours according to how they look (and perform), not how they sound.

The landing page on Meagan Fisher's blog, Owltastic.
Figure 10: Meagan Fisher's subtle colour scheme.
A button from Owltastic.
Figure 11: Yes, your eyes do not deceive, this button has a gradient for a background. And blow me down if it doesn't work!
Sample My Name Hex Code
Charcoal#4B5052
Sea Green#48A18C
Wine#A2606F
Cornfield Yellow#FFE59C
Skip to navigation

Beer 34

Georgian brewery Beer 34 didn't build a website; they built a shrine. I'm sure their product is great, but their site raises it to mythic proportions through beer-related stories and trivia, chunky graphics and understated animations. The minimal green and gold palette evokes fields of malt and hops, which is central to the 34 story (Figure 12). What can I take from this site? You can be creative no matter how limited your colour palette. An original navigation system using tiles rather than text links rounds out this charming site.

The Beer 34 website.
Figure 12: Beer 34 uses a simple palette, which brings to mind the fields where their raw ingredients are grown.
Sample My Name Hex Code
Green#455A34
Yellow#CDA34C
Grey#343223
Skip to navigation

Conclusion

It's one thing to know your chartreuse from your verdigris, your analogous colours from your complements, and the many connotations that a choice of colours brings to the table. But it's quite another to select a palette that works for your project. I've really enjoyed this tour of green in the world of web design. So, what's your favourite hue and tint/shade of green? Do you have any green websites that you'd like to share? And how do you go about selecting a colour palette for your project?

Skip to navigation