Menu

7 Deadly Sins Represented with Web Design Colors

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.

This was published on May 6, 2010

41 Comments

abhishek May 06 2010

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

Ilie Ciorba May 06 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.

It’s a color showcase in the end…

Dion Lynk May 06 2010

Thanks for the inspiration!

Nick Burd May 06 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 06 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!

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 07 2010

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

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 07 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 07 2010

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

Bertrand May 07 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 …

Neat idea for a post.

Jacob Gube May 07 2010

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

theGipper May 07 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 07 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 07 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 08 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 08 2010

Thanks for the kind mention Nick! :)

Nick Burd May 08 2010

@theGripper

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

Grün Weiss May 10 2010

great works, nice list thx

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 10 2010

great work . its really fantastic and reality

Divyang May 10 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 11 2010

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

Abel B. May 11 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 11 2010

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

Jae Xavier May 11 2010

And hot pink is for pr0n sites?

The color associations are euro-centric.

Đáp Án Đề Thi Đại Học May 13 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 13 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.

It’s no point article and irrelevant…

SJL Web Design May 26 2010

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

Thanks for sharing.

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 Jun 01 2010

LAME article

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

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

Theleanthinker Nov 25 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 Dec 22 2010

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

This comment section is closed. Please contact us if you have important new information about this post.

Partners