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.
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.
Red – Wrath
Wrath can be best described as anger or hatred. It is the polar opposite of kindness.
Light Blue – Sloth
Sloth is the act of being lazy or idle. The opposite of sloth is zeal — or eagerness to achieve something good.
Blue – Lust
Lust is the act of giving into desire. The opposite of lust is self-control.
Yellow – Greed
Greed is the desire for wealth and status. The opposite of greed is generosity.
Orange – Gluttony
Gluttony is the act of consuming more than you need. The opposite of gluttony is temperance — being disciplined and wise with resources.
Why do you think these colours represent their respective sins? What emotions do you feel when seeing these colours in web designs?
Related Content
- How to Use Retro Colors in Your Designs
- Color: The Next Limited Resource?
- 14 Brilliant Tools for Evaluating Your Design’s Colors
- Related categories: Web Design and User Interface
























41 Comments
Joe
May 6th, 2010
http://psychology.about.com/od/sensationandperception/a/colorpsych.htm
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.
Leandro
May 7th, 2010
here its a broken link on one blue website
http://sixrevisions.com/design-showcase-inspiration/7-deadly-sins-represented-with-web-design-colors/Blue%20Water%20Productions
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