Ask DN: How much gray is too much?

over 6 years ago from , UX Designer at Gather Technologies

When I start in on an interface inventory one of the first things I almost always notice is an over use of colors. Piles of different colors of slight variation throughout an app. Of course a bunch of different, slightly similar colors look disjointed, or, at worst, causes confusion about what is actually clickable/tappable. But I always get to wondering about the grays (assuming they're not used for interact-able elements). It can be terribly useful to have a number of grays to subtly layer elements in the visual hierarchy of an interface.

Do you limit yourself in the number of grays you use? If so, why and how many? (something something 50 shades)


  • Eric Foster, over 6 years ago

    I tend to follow the "less is more" paradigm when it comes to neutrals in my designs. 3-4 is ideally my max. However, I have seen and coded up designs where double that number are being used. I agree that it can help add subtle variations to an interface, but I think a plethora of shades can also make things look messy and unrefined. Fifty shades of gray is some people's thing, but not mine.

    4 points
  • Tyrale BloomfieldTyrale Bloomfield, over 6 years ago (edited over 6 years ago )

    I tend to follow Massimo Vignelli, but apply it to grays. We have too many grays.

    I try to stick with 3.

    1. Very Light = disable or footnote
    2. Medium = subtext or borders/rules
    3. Dark = body text

    Using many more only could hierarchy and presentation.

    2 points
    • Manny Larios, over 6 years ago

      I do something similar: light, medium, dark. If I need to add more tones, I create them in between e.g. light, light-medium, medium, medium-dark, dark. That totals five, which is more than enough for me.

      0 points
  • Morgan CarterMorgan Carter, over 6 years ago

    In the last few projects I've done, I've started ranking my greys by brightness, all the way from near-black to near-white. So I'll have a grey at 10% brightness, another at 20%, another at 30%, and so on. Near the high-end of the spectrum I'll have more stops, so I'll have 85%, 90%, 95%, 98%, and then finally white.

    These greys aren't completely grey, but slightly coloured. They're then used for text colours, background colours, and absolutely everything except actual coloured elements.

    I don't necessarily end up using all of these (I find myself rarely using 10%, 20%, 40% or 50%. Either 30% or 60%, and then the upper shades I use frequently). But they're there if I need them, and especially in code it's really easy to make changes. If I need an element to be slightly darker I change it from $mono-8 to $mono-7.

    2 points
    • Rory Smyth, over 6 years ago

      I do something similar. The best way I've found for getting a decent scale on one end of the spectrum is to use the HSB picker, NOT an RGB picker, and definitely not picking them manually using the picker. Then just focus on the Brightness level to get different values.

      That way you can move to a more blueish tone and still get the same grading. A lot of the nice interfaces you'll see on Dribbble and Behance and the likes aren't actually grey, even though they might look like that. They're just a bit blue.

      Image alt

      2 points
  • dh .dh ., over 6 years ago

    Think keeping it simple is the key. Sometimes it is a requirement to add another gray for example creating division between titles and sub titles.

    0 points