50 Monochromatic Website Designs | Webdesigner Depot

17 Mar

50 Monochromatic Website Designs

Color, Design

71

Sponsored by: Click here to create FREE Flash Website!

Color choice is a key element to the success of any design. It invokes an atmosphere and sets the mood. One method for using color is to use only shades of a color, which is known as a monochromatic color scheme.

Of all the color schemes, the monochromatic is one of the easiest to pull off successfully. This reason for such ease is that one shade of a color will naturally almost always work with another shade of the same color.

One of the most popular monochromatic color schemes is Blue. This is likely because blue is seen as trustworthy, dependable and committed. Blue, however, is not the only successful color scheme. Greens, Purples, Browns, Reds can also appropriately set a mood.

In this article, we feature 50 monochromatic website designs, categorized based on the predominant color that they use.

Blues

Purples

Reds

Oranges

Browns

Greens

Blacks, Whites and Grayscale

Compiled exclusively for WDD by Michael Shelton. Michael is a web designer and graphic design student who has worked in both web and print for over 4 years.

Which color scheme is your favorite to use and why? Do you know of any other examples besides the ones listed here? Please post them in the comments section of this post.

Share this story

Share

Related Posts

Meet Radim Malinic: The Graphic Artist Behind Webdesigner Depot The Do’s and Don’ts of Dark Web Design 13 Characteristics of Outstanding Blog Design
71 Comments »

#1

David Perel
March 17th, 2009 at 10:47 am

This is a really cool selection. I am surprised there are so many ‘hot’ monochrome sites out there. I have always tried to avoid monochrome (although, Obox Design gets close) because I was worried about the supposed lack of impact.

These sites have proved me wrong, very nice stuff here.

Reply Close comment form

#2

Aaron J. Shapiro
March 17th, 2009 at 10:57 am

Thanks for the plug. Seriously appreciated.

Reply Close comment form

#3

Colin Rotherham
March 17th, 2009 at 11:57 am

Thanks for featuring Cell Zone! Good timing, we’ve just added an AJAX mobile phone suggestor too.

Reply Close comment form

#4

Abulafio
March 17th, 2009 at 12:08 pm

Reallynice and inspirating collection! thanks

Reply Close comment form

#5

MODx Design
March 17th, 2009 at 12:27 pm

Some lovely design. especially like the full width web 2.0 look with large images, it contradicts all the things we learned about “use real estate wisely” in the beginning of Web Design, but still works! Cica is my fav of the above.

Reply Close comment form

#6

ace_dman
March 17th, 2009 at 12:59 pm

Im first…

nice stuff..thanks for this

Reply Close comment form

#7

Mark
March 17th, 2009 at 1:14 pm

very inspyring thanks,

Reply Close comment form

#8

Anna
March 17th, 2009 at 1:32 pm

Great article and advice, thanks for sharing!

Reply Close comment form

#9

Andy
March 17th, 2009 at 2:17 pm

Great resource article! Nice collection of monochromatic designs.

Reply Close comment form

#10

Lars
March 17th, 2009 at 2:36 pm

Thanx for good ideas and inspiration.
I´m starting school in a few months aiming to become a web-candidate, and then go on to design

Reply Close comment form

#11

Diogo Duarte
March 17th, 2009 at 3:10 pm

Nice article !

Reply Close comment form

#12

Timothy
March 17th, 2009 at 3:15 pm

Great list! I tend to really like monochromatic sites.

Reply Close comment form

#13

Chris Wallace
March 17th, 2009 at 3:44 pm

Very nice selection, not all from CSSRemix. I think my site falls under monochromatic as well:

http://chris-wallace.com

1 Reply
Reply Close comment form

Michael
March 17th, 2009 at 11:26 pm

Yes your site is a wonderful example of a monochromatic design. I’m sorry I missed it, can’t get them all!

Reply Close comment form

#14

Nick
March 17th, 2009 at 3:44 pm

Awesome sites!

I think color is one of my biggest problems when designing a new website…it’s hard to decide on themes and combinations for me.

Reply Close comment form

#15

Greg Givan
March 17th, 2009 at 3:50 pm

I’m currently finding myself a fan of the greyscales… i find that the design tends to bring the content forward while not overwhelming the eye.

or, i could just be drunk. hard to tell.

Reply Close comment form

#16

Bernard
March 17th, 2009 at 3:53 pm

Hello, thanks for this wonderfull gallery. I really like this kind of design and I just tried it on one of customer’s web site : bounty-tours.com. But it’s difficult for me to mix technical constraints and design fashion !!!

Reply Close comment form

#17

Steven Grant
March 17th, 2009 at 3:59 pm

I like this post, very effective use of monochromatic schemes here. Some work I was already familiar with, others I wasn’t so thanks.

Reply Close comment form

#18

Web Designing
March 17th, 2009 at 4:20 pm

Nice collection …

Gives a good prespective.

Reply Close comment form

#19

bs kishore
March 17th, 2009 at 4:27 pm

I’m new to this web service,quite happy to be the first commenter,and the
content is nice,could have added more examples.

Reply Close comment form

#20

David Hellmann
March 17th, 2009 at 4:33 pm

Nice Pages, thanks for the article!

Reply Close comment form

#21

Nitin Garg
March 17th, 2009 at 5:32 pm

hi there, many thanks for including my portfolio site.

By the way, i really like the short and straight write-up for the article.

Reply Close comment form

#22

NetOperator Wibby
March 17th, 2009 at 5:52 pm

This is a nice list, I also found some nice sites that seem pretty interesting.

Reply Close comment form

#23

Naldz Graphics
March 17th, 2009 at 6:26 pm

Huge and inspiring list.thanks:)

Reply Close comment form

#24

Mike
March 17th, 2009 at 6:31 pm

I’ve always been a big fan of welovewp! Even had a couple sites featured on there! ACtually have one on their front page right now!

Reply Close comment form

#25

WebDesigner
March 17th, 2009 at 6:41 pm

woooooooooooooow……… beautiful designs… very nice

Reply Close comment form

#26

Don
March 17th, 2009 at 7:14 pm

Great work! Thanks for gathering these sites together in one place. Very inspirational…

Reply Close comment form

#27

Thomas
March 17th, 2009 at 7:55 pm

Very Nice Article! I love the designs!

Reply Close comment form

#28

Personalized Kids Wall Art
March 17th, 2009 at 8:08 pm

These are some nice resources not to mention tastefully designed sites. I think the sites with the blue palettes are a little bland, but the oranges and greens look very nice.

Reply Close comment form

#29

Davin Greenwell
March 17th, 2009 at 8:25 pm

Lots of eye-candy, but so few of these designs are actually practical with living content. Some of them are, and are very appealing to the eye – those are winners.

Reply Close comment form

#30

dre
March 17th, 2009 at 8:36 pm

Great list with awesome examples of how powerful color can be if properly used!

thanks,

Dre

Reply Close comment form

#31

macias
March 17th, 2009 at 10:47 pm

immpressive ….very impressive

Reply Close comment form

#32

maja
March 17th, 2009 at 10:56 pm

Another good post. Though some of your examples are somehow bad at color composition.
Color in RGB space is flimsy category… the harmony never shows quite exactly as you first intended. And RGB space with digital media and technology of screen is still very very … unsatisfying. It is still much shallower than print. That is a tragedy.
Anyway… Thank you for sharing this.

Reply Close comment form

#33

Michael
March 17th, 2009 at 11:40 pm

Thanks guys! I’m glad you liked the collection.

When compiling this list, it was interesting to see impact a well designed monochromatic site can have. A single color usage is typically avoided because some believe it is boring, however, what people do not realize is that color is not everything, it is one element (an important one mind you) among many.

If contrasted with the right visual elements, a monochromatic color scheme, sets an immediate mood, but allows elements such as space, text and images to come forward in the visual hierarchy. This combination of elements is what makes a color scheme work or not.

Glad you enjoyed it!

Reply Close comment form

#34

Rafael
March 18th, 2009 at 12:35 am

Good collection , amazing

Reply Close comment form

#35

Sasha
March 18th, 2009 at 3:40 am

Awesome round-up, bookmarked for future reference

keep ‘em coming, great work!

Reply Close comment form

#36

Liora
March 18th, 2009 at 9:30 am

Great posts, nice way to start the day :0)

Reply Close comment form

#37

insic
March 18th, 2009 at 10:53 am

nice selection of sites

Reply Close comment form

#38

Victoria Blount
March 18th, 2009 at 12:09 pm

Really nice selection of monochromatic color website designs, I was concerned that just using a single color could not be impacting enough and maybe a tad boring, but these examples above have changed that. Used in the right way, one color website designs look unified, calming, some with subtle delicacy to them.

Reply Close comment form

#39

Aldis
March 18th, 2009 at 4:25 pm

Beautiful list of monochromatic websites, saw some interesting works. Impressive!

Reply Close comment form

#40

devolved
March 18th, 2009 at 5:48 pm

Nice post but http://www.blog.spoongraphics.co.uk/ really should have been included in the browns as it’s been through a few incarnations with it.

1 Reply
Reply Close comment form

Michael
March 19th, 2009 at 1:44 am

Yes I agree, a very nice example. Sorry just can’t find them all!

Reply Close comment form

#41

loswl
March 18th, 2009 at 5:52 pm

Don’t think all of these are true Monochromatic Websites but they are all pretty cool )..nice source of inspiration!

Reply Close comment form

#42

tuma
March 18th, 2009 at 6:51 pm

great list thanks

Reply Close comment form

#43

Thomas
March 18th, 2009 at 9:03 pm

Great List, I guess this one http://www.ifj96.de falls under Monochromatic too. Talking about blue

Reply Close comment form

#44

Logo Design guru
March 18th, 2009 at 10:51 pm

Some of these work with the one tone, but others look too plain and need a little spice. Monochromatic is tough to work with but can look great if done right.

Reply Close comment form

#45

Marko
March 19th, 2009 at 5:14 pm

Great designs! Thanks for choosing mine too.

Reply Close comment form

#46

image-hosting
March 20th, 2009 at 9:10 am

Wow, this is an awesome collection. Thanks for this.

Reply Close comment form

#47

Jack
March 20th, 2009 at 1:47 pm

These are so cool so useful so nice.

Reply Close comment form

#48

dr edison
March 20th, 2009 at 8:03 pm

I LOVE Monocromatic Design!!!

Reply Close comment form

#49

Johanna Arias
March 21st, 2009 at 8:24 pm

Wauuuuu, lovely list!

Reply Close comment form

#50

Hezi
March 21st, 2009 at 10:19 pm

Excellent post!

Reply Close comment form

#51

Realizzazione Siti Web Bologna
March 23rd, 2009 at 12:53 pm

Thanks for the interesting article, great list!

Reply Close comment form

#52

Carl
March 27th, 2009 at 6:29 am

Great selected of designs, still I hold Branded 07 as one of my favs!

Reply Close comment form

#53

Bryan Kohlmeier
March 27th, 2009 at 11:18 pm

Awesome. Thanks for the inclusion. I really appreciate it. It feels good to be included with such good company, lots of great sites in that list and designs. Congrats to all.

Reply Close comment form

#54

Denver Web Design
March 30th, 2009 at 4:41 pm

Nice list. BookMarked.

Reply Close comment form

#55

Internet Strategist
March 31st, 2009 at 10:33 am

Thank you for visiting and commenting in my blog. What an exceptional quantity and quality of examples in this post. Well done. I just Twurled this post to Twitter and will also share it at cliKball and FriendFeed.

Reply Close comment form

#56

michael soriano
April 3rd, 2009 at 5:27 am

very good collection. very inspiring.

Reply Close comment form

#57

martin
April 4th, 2009 at 1:26 pm

Nice and inspiring list of sites. I often use a monochromatic colour effect as it gives photo a zing due to the contract, specially with dark colours such as black and blue.

Reply Close comment form

#58

Ritesh Jain
April 8th, 2009 at 7:54 am

Nice Collection
Here should be this also

http://www.rjvisuals.com/html/main.htm

Reply Close comment form

#59

Yassna
April 8th, 2009 at 5:34 pm

Very very nice collections

Reply Close comment form

#60

Juan
April 22nd, 2009 at 9:04 pm

Great collection, thanks !

Reply Close comment form

#61

Jasmin Halkić
August 14th, 2009 at 1:25 am

Nice.

Reply Close comment form

#62

Alexander Bickov
August 14th, 2009 at 9:21 am

Designs as it is must be monohromatic

Reply Close comment form

#63

Bim
August 27th, 2009 at 10:02 pm

Superb collection! Thanks. What about black, white, greyscale and one other colour? Mine maybe. Anyway, keep up the great posts.

Reply Close comment form

#64

ertan (erkasoft web tasarım)
September 6th, 2009 at 7:53 pm

nice collection. I love it!

Reply Close comment form

#65

Softbilogix
October 4th, 2009 at 1:26 pm

Very true, but U think having black and yellow shade also give a classical look in the website. We can use this combination where we have to display the content in more prominent way!

Otherwise, using which background is always Great

Tom
Project Manager
Softbilogix

Reply Close comment form

#66

Cara Dixon
October 20th, 2009 at 6:19 pm

Love the ‘Kobe’ website – it’s really inspirational! Loads of creativity exhibited here! Thanks for posting!

Reply Close comment form

#67

shaMan
November 10th, 2009 at 2:01 am

Nice web design

Reply Close comment form

#68

Margaret
November 12th, 2009 at 6:22 pm

So beautiful! Thanks for the inspiration

Reply Close comment form

#69

Web dizajn
January 4th, 2010 at 8:42 pm

Nice, very nice!

Reply Close comment form

#70

Webby Design Guru
January 28th, 2010 at 2:32 pm

These are some really creative designs. Great inspiration!!!

Reply Close comment form

#71

Editha
February 2nd, 2010 at 3:34 am

Wowwww I love almost every website! This is definitely my style too… actually, my website wuold part of the blue section
http://unuidesign.com/

Great list! Thanks for this article

Reply Close comment form

Name (required)

E-mail (required - never shown publicly)

Web-site

Your Comment (smaller size | larger size)

2+5=? (required)

Notify me of followup comments via e-mail

TOP OF PAGE

Web Designer Depot

Home| Advertising| About| Contact

© 2010 All Rights Reserved