Dabble DB

The Dabble Blog

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.

Dabble DB logo

Snipshot logo

Ventures West logo

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.

8 comments

  1. Sam Pullara says:

    Are you going to release the color scheme generator as an API by any chance?

  2. Adam Smith says:

    I wonder how long it will be before domain squatters start using automatic color scheme extraction to make their ad pages retain the visual flavor for the domains of which they are misspellings.

  3. Sebastian says:

    Can you guys share some code? I really love this and want to implement it as well.

  4. Dan Wilcomb says:

    Fantastic feature, and I love the sample screens! I would also love to see an API, or for you to share some code. (And tell Luke we're all in the same boat.)

  5. William Shields says:

    http://kuler.adobe.com/ does this as well. No API but you can upload an image and get a colour scheme you can import in the CS4 suite of programs (or, hey, just use Color Cop to grab the RGBs).

  6. alexx says:

    Can you guys share some code? I really love this and want to implement it as well..

  7. Anon says:

    Are the greens in the Snipshot scheme really the same?

  8. Phil | Gaming Mouse says:

    Wow, lots asking for the code or an api. I mean, I'd be lying if I said I didn't want to ask for either or both of those myself, but its still funny.

The comments to this entry are closed.