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

Kirschner Brasil

2. Tokyo Mild Foundation

Tokyo Mild Foundation Homepage

3. Roland Olbeter

Roland Olbeter

4. Urban Edge Design

Urban Edge Design

5. Thirty Dirty Fingers


6. Stylepit Lookbook

Stylepit Lookbook





9. The Noun Project

The Noun Project

10. Marcin Kaniewski

Marcin Kaniewski

11. Blissfully Aware

Blissfully Aware

12. Information Architects

Information Architects

13. Piotr Świerkowski


14. Leg Work Studio

Leg Work Studio

15. Parallaxis


16. Yara N Yared

Yara N Yared

17. Sold-Out

Sold Out

18. Non Stop Bar


19. Misfit Creative

Misfit Creative

20. Midwinter Light Up

Midwinter Light Up

21.Manuelle Gautrand Architect

Manuelle Gautrand Architect

22. Video Mapping Loops

Video Mapping Loops - BFM

23. Antidote


24. Rule of Three

Rule of Three

25. Open121


26. Nouvelle Vague

Nouvelle Vague

27. Routalempi on

Routalempi on

28. Lionel Durimel

Lionel Durimel

29.Process Type Foundry

Process Type Foundry

30. Afrobeat


31. Kenji Endo

Kenji Endo

32. Multitouch Barcelona

Multitouch Barcelona

33. Jakob de Boer

Jakob de Boer

34.The Sum

The Sum

35. Zero Fee

Zero Fee

36.Peter Riedel

Peter Riedel

37. The Letter D

The Letter D

38.  Design Made in Germany

Design Made in Germany

39. #Itouchmyselfproject


40. Square Space

Square Space

41. Hashima Island


42. Tokyu Agency

Tokyu Agency

43. Ego


44. SWE Film

SWE Film

45. Redirect Digital

Redirect Digital

46. Daniel Vane


47. Joint London

Joint London

48. Colorz


49. Kryptis


50. Never Bland

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? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978