White- (or green, or blue, or yellow) label Dabble
It started when we switched our company email to the new Google Apps service. Seeing the Dabble DB logo on our mail made us so happy that we set about adding custom logos to Dabble. (And hey, it doesn’t hurt that a few customers asked for it too.) Just by looking at the logos from Ismael Ghalimi’s Office 2.0 Database, we knew that we also needed people to be able to pick custom colors to complement their logo. Then someone made a joke: why doesn’t Dabble pick colors automatically when customers upload a logo? Discussing it further, we decided we weren’t joking. Our graphic designer Luke was somewhat doubtful, but we thought it would be a cool feature, so we dove in.
What started out as a simple branding exercise turned into a bit of an adventure in color theory and computer-generated design. If you’re curious, read on to learn a bit about our engineering and design process. If you’re not, then here’s the short and sweet: you can upload a logo and let Dabble choose a color scheme for you, or you can customize your own.
The first thing we needed to do was figure out the logo’s background color. And that’s all the first version did, by using the corner pixels. In this initial version, other colors were picked based on how close the background color was to black or white from a set of two colors each. Apps colored this way looked a bit dull, but at least they didn’t clash with the logo or look objectively bad. Luke was mildly impressed.
Then we thought: what if we pick the text and border color from the logo as well? These colors needed to contrast with the background color, and ideally could be picked from the logo. Unfortunately, logos tend to have black, white, and grey in them rather than more interesting colors.
It turns out color theory has a way of measuring interestingness: saturation. So we pulled out an interesting color from the logo. Using the same color for the border and the text made things a bit more monotone than we wanted, so finally we decided to try and grab two interesting colors if they’re present. Luke was fairly happy. “It’s not perfect, but it’s pretty good.”
Now our menu items needed a color for the text as well. But no matter what we picked, it wouldn’t always have the right contrast with the border. We turned again to color theory and realized we could use the border color’s luminance to decide whether black or white text was more suitable. Luke was pleased but is now feeling uneasy about his job prospects.
Now here are some examples from the finished product using some logos from friends. In each case, the three colors (background, text and border) of the header are pulled directly out of the logo image.
It turned out to be a much bigger feature to implement than any of us expected. But it wins by being a smaller feature for our users. All they have to do is upload their logo and they’ll have a custom Dabble. That’s it.