50 Shades of Grey: 50 Websites with Black and Grey Design

50 Shades of Web Design

This post was originally published on 9/4/2012 and was updated on 2/17/2015.

Never has grey been so colorful.

After 60 million copies of the book "50 Shades of Grey” sold worldwide, and the movie grossed $81.7 million on its opening weekend, it seems we still can’t get enough grey matter in our lives.

While the E. L. James book, based on a fictional character with "fifty" mood swings and a serious bondage habit, has been translated  into over 30 languages, web design is something that never needs to be translated -  it is a universally spoken language of its own.

Of course, when it comes to custom website design most think that in order to "make it pop" you need multiple gradients and a variety of color. However,  sometimes with fewer colors and just a few shades of grey you can increase your visual hierarchy and balance in your layout.

In honor of the "Fifty Shades of Grey" theatrical release we've have found 50 websites from various countries that utilize black, white and grey (with maybe a splash of an accent color or two).

The common design elements in these websites are the use of bold typography that guides users though the website, large black and white images, drawings that utilize the negative space of the page, or to frame the content area in a visually pleasing manner.

Below are fifty excellent design examples that prove you don't need a lot of flashy colors to create an alluring design.

1. Kirschner Brasil

2. Tokyo Mild Foundation

Tokyo Mild Foundation Homepage

3. Roland Olbeter

Roland Olbeter

4. Urban Edge Design

5. Thirty Dirty Fingers


6. Stylepit Lookbook

Stylepit Lookbook

7. Undercover


8. Pixies

Pixies agence

9. The Noun Project


10. Marcin Kaniewski

11. Blissfully Aware

12. Information Architects

13. Piotr Świerkowski


14. Leg Work Studio


15. Parallaxis


16. Yara N Yared


17. Sold-Out

18. Non Stop Bar


19. Misfit Creative


20. Midwinter Light Up


21. Manuelle Gautrand Architect

22. Video Mapping Loops

Video Mapping Loops - BFM

23. Antidote

24. Rule of Three

25. Open121

26. Nouvelle Vague

27. Routalempi on

28. Lionel Durimel


29. Process Type Foundry

30. Afrobeat

31. Kenji Endo


32. Multitouch Barcelona

33. Jakob de Boer


34. The Sum

35. Zero Fee

36. Peter Riedel

37. The Letter D

38.  Design Made in Germany

39. #Itouchmyselfproject


40. Square Space

41. Hashima Island


42. Tokyu Agency

43. Ego

44. SWE Film

45. Redirect Digital

46. Daniel Vane


47. Joint London

48. Colorz

49. Kryptis

50. Never Bland

There you have it! Our top 50 websites that utilize many gradients of grey. Did we miss any of your favorites? Let me know down below or at @BFMweb.

5 Ways to Increase Your Website's Conversion Rate Whitepaper

Share this post

Comments on this post

  1. Awesome and very inspiring collection! Like it :)
    Grey is my favorite color, so all this designs make me happy!

  2. Great post! Keeping sites confined to simple colors all within the same color family can be very effective and cool. I love all the sample sites. Very cool, very inspiring. Awesome!

  3. Cool blog idea, Debbie! I don’t like gray (or grey, if you prefer) text for large chunks of content because it’s hard on my eyes, but I don’t mind when it’s used for headers and such. Of the examples here, I like #7 the best because the image is the focal point. And let’s face it, we’re all about pictures these days! :)

  4. These are always my favorite types of posts: lot’s of eye candy with a purpose. I love the concept of clean minimalistic design that allows for any saturated elements to really stand out without clashing against other colors. Sadly, most of my clients are opposed to greys : Anyways, great post!

  5. Pingback: 50 Shades Of Grey : 50 Website Designs That Forgo The Splashy Colors | Creative Company

Comment on this post


Ready to discuss your project?
Request a Quote