Grey tints have always been tricky in web design and are probably some of the colours that are consistently inconsistent in the way they display across monitors and devices using various profiles and settings. With that being said greys are still frequently used in web design for backgrounds and interface elements.
There are times when straight up greys just aren’t working with a design and appear to making the layout flat and lifeless. If you reach this point then it might be worth introducing a very subtle tint of one of your other primary or secondary colours into the grey.
I use Photoshop to mock-up designs so the images below show how I use the eyedropper tool to select a colour value that shares the same contrast as my original grey but also includes a very subtle hint of my secondary colour (in this case green).
Original grey colours
These original greys appeared too flat and didn’t work well with the overall colour harmony.
Tinted grey colours
The new colour values share the contrast but have subtle hints of my secondary (green) colour.
Other sites using tinted greys
http://typekit.com/libraries/full (used in the dark font display menu bar)
Tips
– Keep the colour tints really subtle i.e. just about noticeable
– Technique works best for designs that only use a 2 or 3 colour hierarchy
– Experiment with the tint and keep reviewing the overall design
– A little bit of ‘noise’ texture on the greys can also help lift the design
I’m on the look-out for other sites that use greys well so if you know of any please do comment with a link below (thanks).
Nice write-up Mark! Would you consider adding some more info on how you choose your new (green) greys so that they share the same contrast? Do you just nudge the picker in a bit from the grey side and do it by eye? Or is there something more scientific? Or would that be giving away the trade secrets? (Not important, but I think your first colour eyedroppers images are the wrong way round?)
Thanks for spotting the error in the image Tim (corrected now).
I do just as you’ve mentioned which is by eye. I don’t know if there is a scientific method but keep the layer visible in Photoshop and nudge the picker across the palette until it looks and feels right (to me at least).