7 Deadly Sins Represented with Web Design Colors

May 6 2010 by Nick Burd | 41 Comments

7 Deadly Sins Represented with Web Design Colors

The Seven Deadly Sins represents vices and tendencies that were believed to be misdeeds in early Christian religion.

The sins are as follows: envy, pride, wrath, sloth, lust, greed, gluttony.

Each sin is said to be represented by a colour. For example, envy is best represented by the colour green, which — in many cultures — is also the symbolic color of money.

I thought it would be a fun experiment to compile a showcase of a few web designs based on the colours reflected by the seven deadly sins.

Note: The web designs featured were used for aesthetic purposes only, not to imply that they characterize the sins.

Green – Envy

Envy is best described as a desire for something more and to covet other people’s belongings and status. The opposite of envy is love.

Bam Creative

Bam Creative

Free Gobbler

Free Gobbler

PSDChimp

PSDChimp

Violet – Pride

Pride is when a person feels more special or important than others. At its worst, pride is narcissism. The opposite of pride is humility.

idt.net.cn

idt.net.cn

Newism

Newism

shizixiu.com.cn

shizixiu.com.cn

Red – Wrath

Wrath can be best described as anger or hatred. It is the polar opposite of kindness.

Carsonified

Carsonified

KMX Karts

KMX Karts

The Salon

The Salon

Light Blue – Sloth

Sloth is the act of being lazy or idle. The opposite of sloth is zeal — or eagerness to achieve something good.

philipp doms

philipp doms

Iconjelly

Iconjelly

Narhir Design

Blue – Lust

Lust is the act of giving into desire. The opposite of lust is self-control.

Strutta

Strutta

Blue Water Productions

Blue Water Productions

MediaCore

MediaCore

Yellow – Greed

Greed is the desire for wealth and status. The opposite of greed is generosity.

Nikon Festival

Nikon Festival

Booreiland

Booreiland

Champagne Warehouse

Champagne Warehouse

Orange – Gluttony

Gluttony is the act of consuming more than you need. The opposite of gluttony is temperance — being disciplined and wise with resources.

Cubicle Ninjas

Cubicle Ninjas

scorchlondon

scorchlondon

designedbynelleke

designedbynelleke

Why do you think these colours represent their respective sins? What emotions do you feel when seeing these colours in web designs?

Related Content

About the Author

Nick Burd is a 23-year-old Freelance Web Developer from Ontario, Canada. He can be found at many places on the Net starting at his personal blog and portfolio, Twitter and LinkedIn.

41 Comments

abhishek

May 6th, 2010

What you want to say in this article, Pictures are nice.

Ilie Ciorba

May 6th, 2010

Every color has it;s own effect on the writer, it doesn;t matter what colors do you use in your designs, what does matter is how will people react on them.

kevin

May 6th, 2010

It’s a color showcase in the end…

Dion Lynk

May 6th, 2010

Thanks for the inspiration!

Nick Burd

May 6th, 2010

There is a lot that colours can do, from make you hungry, happy, angry, etc. The colours that are associated with the sins are associated with the moods that they can make you feel as well.

Heather Villa

May 6th, 2010

There is a reason people say “a picture is worth a thousand words”! There is so much that goes on in a sub-conscious level when it comes to colors. For example, as stated by http://www.infoplease.com, in the U.S. flag, white stands for purity and innocence. Red represents valor and hardiness, while blue signifies justice, perseverance, and vigilance. The stars represent the heavens and all the good that people strive for, while the stripes emulate the sun’s rays. Other more commonly used color coded things can be easily picked from many Disney movies. Villains are often wearing dark if not black colors and have heavy dark lines or wrinkles on their bodies while, on the other hand, the “good guys” are wearing light colors, pastel colors, and are ever so delicately drawn. Great article!

Andre

May 7th, 2010

Seems like nobody got the picture. It’s an experiment, a fun one. Good post Nick, its fun to see such rare comparisons (let’s face it, people today hear “sin” and yell: “Reprend, reprend!”) for a change. Good source of inspiration as well, I’m seeing some fine design on a lot of those screenshots.

Najam Siddiqi

May 7th, 2010

Color is one of the best tool in web design as i read in HCI these color took much influence in web development.

Kim

May 7th, 2010

I disagree, when I look at those designs I don’t feel envy or wrath etc.
I don’t really think colour alone can affect people perception, if you couple this with strong typography then you’re starting to get somewhere.

aleksander

May 7th, 2010

its not exactly what you feel its what your subconscious registers…which is why it takes skill to be an artist……great article

exionyte

May 7th, 2010

I liked the way how Nick came up with the idea of this article … original!

Bertrand

May 7th, 2010

I don’t get this article either… Sorry. What were you trying to show when you showed websites that had the sins’ colors? I’m confused.

And I have to agree that colors have different meanings for different cultures (which could make a good article since many website have a worldwide audience…)… wink wink …

Tom

May 7th, 2010

Neat idea for a post.

Jacob Gube

May 7th, 2010

@Leandro: Thanks for reporting the broken link. Should be fixed now.

theGipper

May 7th, 2010

The opposite of wrath or hate is love, not kindness.
Similarly, the opposite of greed is not love but kindness or generosity (selflessness, altrusim, sacrifice)

Nick Burd

May 7th, 2010

@theGripper – I believe I was pretty accurate with the opposites. I stated love being the opposite of envy, not greed…

And the opposite of Wrath is infact kindness or the feeling of opposites of anger, to be content or happy. :D

theGipper

May 7th, 2010

How is love the opposite of envy? The opposite of envy is self-satisfaction or contentedness, where you don’t wish to have things others do.

designing

May 8th, 2010

i thought each design flowed well with the label they got except for the reds… they didn’t at all convey any sense of wrath… maybe black designs would have been more graphic…

Josh of Cubicle Ninjas

May 8th, 2010

Thanks for the kind mention Nick! :)

Nick Burd

May 8th, 2010

@theGripper

Please see screenshot – http://grab.by/4hzo

Grün Weiss

May 10th, 2010

great works, nice list thx

rory

May 10th, 2010

Lovely stuff the colors on Carsonified are fantastic, love that red they’ve used. Not so keen on yellow sites, reminds me of the Yellow Pages, but the Nikon Festival site has pulled it off.
If sinning this good is wrong, I don’t wanna be righteous!

Najam Siddiqi

May 10th, 2010

great work . its really fantastic and reality

Divyang

May 10th, 2010

I don’t agree with this. Colors are chosen based on business need and not any personal emotions. Specifically organization’s websites are not driven by any emotions.

Jordan Walker

May 11th, 2010

Nice article, seven sins…what is the masterpiece to be played out?

Abel B.

May 11th, 2010

It’s interesting! Nice experiment!
But observing these screenshots, I had an diferent reaction from the feelings you’ve connected. Maybe everybody have relationships with colours and feelings, in their minds, but sometimes this relationships can be very different, depending on the person and his own mental maps.

Abel B.

May 11th, 2010

But… I have to agree that in many cultures, red really represents wrath, love, passion …
Interesting.

Jae Xavier

May 11th, 2010

And hot pink is for pr0n sites?

Nikola

May 12th, 2010

The color associations are euro-centric.

Đáp Án Đề Thi Đại Học

May 13th, 2010

Color is one of the best tool in web design as i read in HCI these color took much influence in web development.

Greg Givan

May 13th, 2010

How can you remotely call this an ‘article’? its a collection of screengrabs from some well designed sites sure… but totally devoid of any real content/knowledge of any practical use.

Rex

May 17th, 2010

It’s no point article and irrelevant…

SJL Web Design

May 26th, 2010

Great collection of designs, really cool way to use the colours too.

Thanks for sharing.

Dave

May 31st, 2010

Colour is a relative subject and it is different between cultures.
Like in my country: Hungary green has nothing to do with envy, because the corresponding colour for envy is yellow.

joe mac

June 1st, 2010

LAME article

Fanboy

June 16th, 2010

Thanks for including my design for The Salon alongside some really great designs.

BOCO

November 24th, 2010

Envy and gluttony must be my sins then. Interesting experiment!

Theleanthinker

November 25th, 2010

Nice article. I love the idea of 7 sins and the use of colours to represent them. I found this link through your twitter so I’ll retweet this too!

J.F. Herrera

December 22nd, 2010

Interesting article. So I would assume that the best way to minimize any negative effects is to use a well balanced pallet.

Leave a Comment

Subscribe to the comments on this article.