“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

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:

• 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.

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][/mfc_lightbox]

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

* * *

[mfc_lightbox][/mfc_lightbox]

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

* * *

[mfc_lightbox][/mfc_lightbox]

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

* * *

[mfc_lightbox][/mfc_lightbox]

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

* * *

[mfc_lightbox][/mfc_lightbox]

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

* * *

[mfc_lightbox][/mfc_lightbox]

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

* * *

[mfc_lightbox][/mfc_lightbox]

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

* * *

[mfc_lightbox][/mfc_lightbox]

Lingerie, Furniture, Forepoint, Orphan Care, Kitchen.

* * *

[mfc_lightbox][/mfc_lightbox]

Ron Swanson, Arch, Rugby, Billiards, Beatrix.

* * *

[mfc_lightbox][/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…