Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

“50 Shades of Grey” – Sequel for Designers

Have you read the erotic romance novel “Fifty Shades of Grey” by E.L. James? Notwithstanding all the conflicting comments around it, the novel rocked the community.

Of course, we are not going to discuss this reading matter here. Book essays are not the point for our blog posts if they are not related to web design, development and Internet marketing, of course. So, we decided to write our own novel about grey color in web design, its shades, tints and significance. Hopefully, this information will be more useful for your professional life than the description of BDSM practices.

However, whether we like the novel with all its vulgar erotic scenes or feel a kind of disgust over them, it’s stupid to deny the fact that this particular article has been inspired by it. Let us call it, say, “How Many Shades of Grey Do You Use in Your Designs?” Surely, we will illustrate our article with sexy templates designed by professionals and show you the most winning color combinations that fit grey.

Color psychology

Grey is the color of intellect, knowledge, and wisdom. It is perceived as long-lasting, classic, and often as sleek or refined. It is dignified, conservative, and carries authority. Grey is controlled and inconspicuous and is considered a color of compromise, perhaps because it sits between the extremes of black and white. Gray is a perfect neutral, which is why designers often use it as a background color.

Grey physically unsettles us, creates expectations.

Interesting facts about grey

  • Did you now that The New York Times is sometimes called “Gray Lady”?
  • Gray represents non-involvement, giving it a formal authority.
  • Grey is associated with intellect and the brain is composed of “grey matter.”
  • Grey is representative of pessimism.
  • It’s unbelievable, but the human eye can distinguish about 500 shades of grey.
  • Gray is the color for Lent mourning and repentance in Christianity.

Shades of grey color in web design

Variations of gray or grey include achromatic grayscale shades, which lie exactly between white and black and nearby colors with low colorfulness.

Chart of computer web grey colors

greys-chart

White and black colors can be thought of as shades of achromatic gray, as both contain equal amounts of red, blue and green. White is at the extreme upper end of the achromatic value scale and black is at the extreme lower end of the achromatic value scale, with all the colors normally considered tones of achromatic grey colors in between. Achromatic colors have no hues, so their hue codes are usually marked as a dash.

Achromatic grays are colors in which the RGB values are exactly equal. Achromatic grays are the axis of the color sphere, with white at the north pole and black at the south pole of the color sphere. Various tones of achromatic grey are along the axis of the color sphere from white at the top of the axis to black at the bottom of the axis.

Here are the examples of achromatic grays:

achromatic

  • Medium gray (gray (X11)) #BEBEBE
  • Spanish gray #989898
  • Davy's gray #555555
  • Jet #343434

Off-grays are colors that are very close to achromatic grays, but whose red, green, and blue color codes are not exactly equal. Here are some of them:

  • Platinum
  • Ash gray #B2BEB5
  • Battleship gray #848482
  • Charcoal #36454F

Cool grays are colors that are noticeably bluish gray, grayish cyan, greenish grey, or violetish grey. Here are some examples of cool greys:

  • Cool gray #8C92AC
  • Cadet gray #91A3B0
  • Blue-gray #6699CC
  • Glaucous #6082B6
  • Slate gray #708090

Warm greys are colors that are noticeably brownish, pinkish greys, or reddish purple greys. The color brown is itself a dark shade of orange. Brown colors also include dark shades of rose, red, and amber. Pink colors include light tones of rose, red, and orange. These tones of pink become warm greys when they are mixed with grey.

Here are some of the warm greys:

  • Rose quartz #AA98A9
  • Cinereous #98817B
  • Rocket metallic #8A7F8D
  • Taupe #483C32

How do you like shades of grey without any erotic connotation? We provided their hexes, so that you could see and try them in Photoshop or any other drawing software you use.

Grey color schemes

We are not going to tire you enumerating all color combos that go well with grey. You’d better see them with your own eyes. Just click the image under this text and the link will take you to the website containing tons of color combinations you need. Each color scheme includes the HTML color codes you will need to code your website. The hex codes can be found underneath each of the color swatches.

combos

Real examples

Would you like to see if real shades of grey can be seductive? We’ve gathered 50 beautiful grey website designs for the purpose. They are presented on 10 images you see below and accompanied by palettes of grey color shades and their combos, applied at their creation. You will see that grey color is so universal that it can be used for almost any website category from T-Shirt Store to Car Dealer. You can also borrow the most winning color combinations in order to apply them in your own projects.

* * *

Click each image to enlarge.

[mfc_lightbox]001 (2,10,11,13,49)[/mfc_lightbox]

Fashion Agency, Gas & Oil, Erick O'Hara, Car Audio, Ringtones.

* * *

[mfc_lightbox]002 (3,5,8,16,22)[/mfc_lightbox]

Lux Interior, Salsa Dancing, Kevin Bridges, Cat Breeder, Games Store.

* * *

[mfc_lightbox]003 (14,25,27,44,45)[/mfc_lightbox]

Lingerie, New Hope, Tyres, Bikes, Plumbing Services.

* * *

[mfc_lightbox]004 (17,18,20,29,33)[/mfc_lightbox]

Easy Way, Twingoo, Men's Fashion, Celebrities, T-Shirt Store.

* * *

[mfc_lightbox]005 (5,9,21,36,43)[/mfc_lightbox]

Photo Stream, Music, Extreme, Video Content, Industry.

* * *

[mfc_lightbox]006 (6,32,34,40,50)[/mfc_lightbox]

Hosting, Londa, Physiotherapy, Jewelry, J. Ohira.

* * *

[mfc_lightbox]007 (4,19,23,26,46)[/mfc_lightbox]

Cycling, Smart Move, Spero, RC Models, World of Gifts.

* * *

[mfc_lightbox]008 (28,31,41,42,47)[/mfc_lightbox]

Lingerie, Furniture, Forepoint, Orphan Care, Kitchen.

* * *

[mfc_lightbox]009 (15,24,35,38,48)[/mfc_lightbox]

Ron Swanson, Arch, Rugby, Billiards, Beatrix.

* * *

[mfc_lightbox]010 (1,12,30,37,39)[/mfc_lightbox]

New Born Baby Club, Gift Shop, Lily Wam, Plumb, XC Car.

* * *

Traditional wrap up

You know quite well what to do now, don’t you? Of course we would like to hear from you! How did you like our sequel of “50 Shades of Grey” for web designers? Do you usually use grey color in your designs? What color combinations with grey do you like to most? Did this article make any sense to you? Did you save in your memory any nice color combinations for the future?

Waiting for your comments and wish you the inspired designs…


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Helga Moreno

Experienced writer passionate about highlighting all the topics related to web, design, marketing, SEO, and more. Follow Helga on Quora.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

One response to ““50 Shades of Grey” – Sequel for Designers”

Leave a Reply

Your email address will not be published. Required fields are marked *