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.