One of the most important color tricks I’ve ever learned was to avoid using the color black in my work. The problem is, we see dark things and assume they are black things. When, in reality, it’s very hard to find something that is pure black. Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black.

Shadows aren’t black.

An excellent example can be seen in Wayne Thiebaud’s work. Wayne Thiebaud is an American painter known for colorful works depicting commonplace objects, like cakes and pastries. Thiebaud is a perfect example of shadows not being black. His shadows are some of the most saturated parts of his paintings. Now you might be thinking, “Yeah, but those are paintings. They’re not real.” Well, how real do you think our interfaces are to Thiebaud?

Take a blue light the bulb and shine it on  a pure-white ball from her cabinet full of pure-white things (that she kept for figure drawing exercises) and placed it on a pure-white pedestal, under the light. And sure enough, when she turned on the blue light, the shadow cast by the ball was an orange tint, not black.

The darkest part of that image? It’s not #000000. It’s #130f30. (That’s 19% brightness and 69% saturation!)

Black overpowers everything else.

When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural. All of the “black” everyday objects around you have some amount of light bouncing off of them, which means they aren’t black, they’re dark gray. And that light probably has a tint to it, so they’re not even dark gray, they’re colored-dark gray.

Lots of the apps we use on a daily basis have blacks that aren’t really blacks, but dark grays. Twitter’s sidebar, Sublime Text 2‘s sidebar if you have Soda Dark installed (which you should!), new Photoshop’s background, the calendar widget. Even Twitter Bootstrap. They all use colors close to black, but slightly muted so they don’t overpower the rest of the elements on the screen.

Here’s a bit of a contrived example… Dribbble has a pretty awesome feature that lets you search for shots by color. If you search for shots with pure black and shots with “real black” which ones feel better? Not the ones with pure black in them.

It’s not only about the brightness (or value) of the color either…

Saturation is just as important.

You can do even better than staying away from pure #000000 black too. Whenever you’re working with grays, add a bit of color to them and they will feel less dull. The amount of color you can add is proportional to how dark the color is. The black from my Path photo had 69%! saturation, whereas a light-gray might only need 3%.

I’ve used that as a general guide when making the color palette for Segment. I mix a small amount of yellow-orange into our grays. Saturation starts at 2% for our lightest gray and steadily increases until it’s at 22% for the darkest gray, forming an arc across the Photoshop color picker.

But don’t take my word for it again—let’s look at Facebook. Why does the Facebook Mobile interface feel so nice? Because all of those grays are pumped full of Facebook Blue.

It’s been a long time coming.

Bottom line is: when you find #000000 in your color picker, ask yourself if you really want pure black. You’re probably better off with something more natural. And if you’re feeling adventurous, try staying away from the left edge of the color picker altogether.