Anatomy of Colors in Web Design: Green and Environmental Concept

Anatomy of Colors in Web Design: Green and Environmental Concept

This article is the first of our upcoming series, Anatomy of Colors in Web Design. Over the next few months, we’ll be covering different colors, featuring web designs from around the world with particular to one specific color theme. We start today with an article about the use of the color Green in Web design and related Environmental Concept. Please stay tuned as we will continue with other colors in upcoming weeks.

Subscribe to our RSS feed or follow us on Twitter in order not to miss the full series.

Everyone has a favorite color and they tend to choose their preferred color when it comes to their work or personal life, e.g. like buying an item or doing an art work. This is almost the same when it’s applied to designers. Designers have a propensity to use the same set of colors on their design. Even if they were given an unlimited range of colors, they would rather still stick with their own senses.

Green Concept

Web design which achieves successful marketing results is sensitive to the cultural, instinctual and iconic meanings of color in relation to the product/service being promoted. Not forgetting to consider the cultural backgrounds and gender of the targeted clientèle too.

Definition of Green

Green is a color, the perception of which is evoked by light having a spectrum dominated by energy with a wavelength of roughly 520–570 nanometers. In the subtractive color system, it is not a primary color, but is created out of a mixture of yellow and blue, or yellow and cyan; it is considered one of the additive primary colors.

Green
Image courtesy from Wikimedia Commons

Green in Web Design

Green is an effective color that is so commonly used in modern web design. It is probably because of the awareness of a global trend of environmentalism. Effectual Green design may integrate simultaneously with other supporting colors to displays a symphonic arrangement of shades, tints, tones and complementary colors to tantalize and maintain interest.

The effect of adding textures too can alter colors. For example, a roughly textured surface makes a color seem darker, while a smooth surface lightens the same color.

Color trends may also defy instinctual, cultural and iconic constraints. As Color Professor J.L. Morton says:

Successful design requires an awareness of how and why colors communicate meaning. Web site designers should treat the symbolism of color as seriously as the design of graphics and layout.

The psychological impact of the color green can be applied to advertising, corporate identity, and electronic media. Industrial manufacturers trying to boost their revenue through Internet sales and marketing may find that implementing green in their Web sites could be helpful.

Many designers reveal that their call to action section/button receives more clicks and attention when they are green in color. This could be an impending trend in the Web Design Industry of focusing on the color green to attract visitors.

Call to Action

WedoXHTML has made use of green to highlight their important information brilliantly. The adoption of the green fonts is comfortable yet obvious to visitor.

Wedoxhtml
Wedoxhtml

Yet another classic example of how Pagelime has made use of the color green to direct visitors to the intended section.

Pagelime
Pagelime

Why Choose Green?

Visual receptors have specific characteristics and limitation that are common to most people and they are most sensitive to middle frequencies such as green.

Green is a complex color with many uses and explicit meanings of which you can draw on to focus a designer’s skills. Green makes things appear natural, fresh, and ecologically beneficial. When equipment is painted green in an industrial environment, the illusion of safety and normalcy is fostered. This environment tends to make people feel clean and that their personal health is not at risk.

People often find the color green in relaxing and refreshing imagery. When someone thinks of green, they will usually think of the outdoors and plants. The calming aspects of this color lend itself to relaxation and tranquillity.

Green maximizes readability and minimizes optical fatigue which is a critical factor in web design. It also draws the eye to the most important areas on a small or large screen and sustains visual interest with it.

Green is also the color of money, nature and environment. Most websites that are going green in their design, the imagery and overall style are either corporate sites or deals directly with the environment and nature in some way.

The Benefits of Green

Green has a significant psychological impact on the human mind and is popular in most cultures. It is the most soothing color to the eye and can aid in the healing process. Green lowers blood pressure, relaxes the nervous system, calms and soothes the mind, stimulates creativity, and is an appetite suppressant. Green is easy on the eye and can improve vision. Images set in green backgrounds seem farther away.

Green is also known to have a soothing effect on humans. It is known to reduce the levels of anger and frustration more than any other color. The reason why you feel attracted to grass is because of your body’s affinity to its green color. The scientific reasoning behind this superstition may be that the color green usually calms the nerves. Green is the most restful color to the eye, requiring no adjustment of the retina to focus on it. That’s why nature is predominantly green.

Green can also reduce stress while it balances and soothes emotions. It helps anyone suffering from anxiety and depression. Green light is considered to have beneficial effects on people with heart ailments and cancer. However be warned, too much green can cause feelings of envy, resentment and possessiveness!

Different Type of Green in Web Design

Green is a useful marketing tool for organic, healthy and natural ‘green’ products. However, not all type of green fits the same bill. We have to use it sparingly and if used properly, it can be a great ally in website design.

Dark green

Most commonly associated with money and ambition. It is popular with corporate websites. It can also be used to promote concentration and give visitors a sense of prestige, power and substance on the site.

Heineken
Heineken

Bright green

This type of green may be used to represent bright green environmentalism and is projected as lively, energetic and daring.

Yodaa
Yodaa

Celadon

Celadon is a pale tint of spring green. It is most commonly used in Chinese, Korean and Japanese art and spread to the other Asian cultures as they are perceived as a quiet elegance that is “beyond description”.

Qilady
Qilady

Yellow-green/Lime green

This color should be use carefully as it often link with sickness and nausea. It is ideal to use it in health product sites or non-food related sites. However, refrain from using this color for promoting food products as it’s an appetite depressant.

Pado
Pado

Olive green

Generally pleasing to the eyes, it’s symbolises peace and can be use liberally. However, it may have military overtones for some people.

Mocapoke
Mocapoke

Blue greens

It is the most accepted type of green and it’s appealing across both gender lines.

Amitkhera
Amitkhera

Using Green with Other Colors

Green also works well with other complementary colors too. Complementary colors are opposites on the color wheel. Red and green, yellow and violet, blue and orange, are the three common pairs of complementary colors. These colors always go well with each other, hence the term complementary.

Knowing this, when organizing your website, it’s always good to keep in mind that darker colors are easier to see than lighter ones. Additionally, be careful when using too many colors on the site. The ideal option, to begin experimenting with what you can do using different shades, is to use two complementary colors first. Now, we’ll see how green works with other colors too.

Green with Blue

It produces echoes of nature, water and forest. It also symbolizes freshness, growth and can denote new beginnings.

Narhir
Narhir

The Forbidden Corner
Theforbiddencorner

Green with Brown, Tan, or Beige

The combination says organic or recycled and can be a good color combination for packaging those types of products.

Mailchimp
Mailchimp

Juandiego Velasco
Juandiego Velasco

Green with Yellow and Black/White

Tri-color combinations of green with yellow and black or white are sporty, outdoor colors.

Evacare
Evacare

Bugworldexperience
Bugworldexperience

Green with Purple or Red

Green with these two colors can be highly contrasting, lively and arousing.

Designheartsme
Designheartsme

Naturestable
Naturestable

Green with Orange and Yellow

Lime green with orange and yellow is a fresh and fruity palette which appears health conscious..

Web Banner Ad Design
Webbanneraddesign

Blymp
Blymp

Showcase of Corporate Identities

Green is common and evident in corporate Web Design.

Nutrifield
Nutrifield

Gbados Energy Solutions
Gbados energy solutions

Compograss
Compograss

Blossoms Village
Blossoms Village

Aquaadria
Aquaadria

Rcleaners
Rcleaners

Daguia
Daguia

Geo Vision
Geovisionsae

Green Globe Ideas
Green Globe Ideas

Ecoservice
Ecoservice

Gbb
Gbb

Greenanysite
Greenanysite

Hrasti
Hrasti

E Schneider Garten
E Schneider Garten

Rbc
Rbc

Sleepydog
Sleepydog

Biofoolish
Biofoolish

Cobahair
Cobahair

Shopify
Shopify

Sprintbio
Sprintbio

Liptongreenmint
Liptongreenmint

Organic Supermarket
Organic Supermarket

Reallywildtravel
Reallywildtravel

Oypro
Oypro

Outdooritalia
Outdooritalia

Terrasse Concept
Terrasse Concept

Showcase of Freelancers

Freelancers have also tapped on the benefits of green in their portfolios.

Anna Pawelczyk
Anna Pawelczyk

Quadrifolia
Quadrifolia

Tyler Web Design
Tyler Web Design

Snailbird
Snailbird

Anandakm
Anandakm

Artist in design
Artist in design

Inspirationbit
Inspirationbit

Ladysign
Ladysign

Paulicio
Paulicio

Showcase of Green Web Designs

Other Web designs that use green perfectly.

Cgalvin
Cgalvin

Pestovo Golf
Pestovo Golf

Sageblue
Sageblue

Somoslaperalimonera
Somoslaperalimonera

Studio7designs
Studio7designs

Viget
Viget

Blogfullbliss
Blogfullbliss

Ztradycja w nowoczesnosc
Ztradycja w nowoczesnosc

Growmedia
Growmedia

Green Color Palettes

  • Colourlovers: This site boosts some of the best green color inspiration around.
  • Colorcombos: The Combo Library provides a convenient way to search for green color schemes.
  • Colorscheme: ColorScheme’s Gallery is an online community where users can share and manage green color schemes.

Care for the Environment

It’s essential that we care about our environment so that we can continue to enjoy the fruits of mother earth’s labor. What do you think of the color green in the Web industry? Are there any “green” sites that haven’t been covered? Share and discuss your thoughts.

Comments

    • Vamsi,
    • November 3, 2009
    / Reply

    Enjoyed the show of these beautiful designs. Thanks for the inspiration.

  1. / Reply

    Very good list. I bookmarked a lot of those for inspiration.

    I especially liked http://www.amitkhera.com/ because it has a similar theme to my portfolio site but I think they did it better.

    How did you find such a varied showcase?

    • Deja,
    • November 3, 2009
    / Reply

    I’ve always enjoyed green on the web. Here are a few more sights I enjoy that are using unique shades of green.

    http://www.mint.com
    http://www.plantwithpurpose.org
    http://www.nectarlounge.com
    http://www.aveda.com
    http://www.engeldesign.com
    http://www.wathen-castanos.com/green

    Thanks for the inspiration!

  2. / Reply

    This article has been shared on favSHARE.net. Go and vote it!

  3. / Reply

    Great post. Very detailed.

    On a side note, Congratulations on being part of the Smashing Network! Very-well deserved.

      • Terrance,
      • November 3, 2009
      / Reply

      Thanks for the encouragement. We will continue to work hard.

    • J.Schimel,
    • November 3, 2009
    / Reply

    Excellent post!!
    Love the new interface of smashingmag’s website! :-)

    • Aurore,
    • November 3, 2009
    / Reply

    E Schneider Garten looks like Terrasse concept

  4. / Reply

    Excellent post!!

  5. / Reply

    Another great “green” Web site that the folks here at iStudio recently launched – Green Bin Ottawa -http://www.greenbinottawa.ca

  6. / Reply

    New smashing layout is really amazing along with the new concepts for its visiters.

    Excellent work so far and expecting more in future. Keep it up smashing team :)

    • choen,
    • November 4, 2009
    / Reply

    Interesting article. Thanks

  7. / Reply

    Useful. Now I’m anxious for more colors.

  8. / Reply

    My website was featured!:D cool thanks guys!:D

  9. / Reply

    green is the essence of any designing form.

  10. / Reply

    What a great article! And thank you for featuring my site along such beautiful green designs! :)

  11. / Reply

    Very useful…Nice article!!!

  12. / Reply

    Not done much with Green, but these examples are pretty influential. Thanks

  13. / Reply

    Hi Green is nice which is my webpage is also Green

    • Cliff Tyllick,
    • January 25, 2010
    / Reply

    Thanks for this interesting, thought-provoking, and even inspiring series. I like that you mention that we need to be aware that it can be hard for people to read your site’s text or even see its designs if the colors are not dark enough. What you really mean is that a color should have sufficient contrast with its background color.

    “Sufficient contrast” might seem to be a matter of taste or at least judgment, but the Web Content Accessibility Guidelines (WCAG 2.0) actually help us make a rational decision. These guidelines exist to help Web developers and designers make sure that people who have disabilities — in this case, colorblindness or other visual impairment — can understand their Web pages.

    Fortunately, there are many tools available to help designers pick accessible color pairs. For two reasons, my favorite is Annika Hamann’s Contrast-A.

    First, if your first choice for a pair of colors does not have sufficient contrast, Contrast-A shows you how much you would need to adjust the hue, the saturation, or both of either color.

    Second, unlike other tools, which let you analyze only one color pair at a time, Color-A lets you build a complete palette, making sure that each color pair that does need enough contrast actually has enough contrast. (For example, you might not care how much the background color of the main content contrasts with the background color of a sidebar. But you do want each text color to have enough contrast to its respective background. And you might want more contrast between the background color and the border color used in the “Submit Comment” button on this page.)

    Also, like a number of other tools, Color-A lets you see how your color pairs look to people with four different kinds of colorblindness.

    Best of all, although Annika accepts donations, you can get Contrast-A free at her website, contrast-a.dasplankton.com.

    But let me add a word of caution here. Although WCAG 2.0 focuses on ensuring sufficient contrast, there are a few people for whom too much contrast is a problem. So achieving the highest contrast possible isn’t necessarily a good idea. Just be sure that your important color pairs have enough contrast to conform to WCAG 2.0.

      • Aidan,
      • January 25, 2010
      / Reply

      Thanks Cliff for the great comment. What else can I say? I’m sure others will find your comments helpful. Keep them coming!

  14. / Reply

    I think the colors of a website are extremely important. Colors are everything.

    • Ken,
    • April 5, 2010
    / Reply

    Great post. Very detailed. Thanks

  15. / Reply

    Thanks for listing my site. Its a great list.

    • K,
    • May 24, 2010
    / Reply

    Safari flags up the “Vivamaria Zakopane” website as being a potentially dangerous website (malware). Perhaps it should be removed from this list, if it is indeed harmful.

    1. / Reply

      Hi K,

      I’ve removed the website from the list as Google has prompt that the site is dangerous.

      Thanks for pointing it out.

  16. / Reply

    This websites are pretty but i wouldnt prefer them for business websites

  17. / Reply

    The interface looks really great,thanks for the post…

  18. / Reply

    Thank you,I really liked this templates more for personal usage…

  19. / Reply

    Great information and post. I would like to thank you for sharing your ideas and times

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.