Ask DN: How much gray is too much?

almost 7 years ago from Jeff Heaton, UX Designer at Gather Technologies

  • Morgan CarterMorgan Carter, almost 7 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, almost 7 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