99designs Tech Blog

Adventures in web development

99designs Color Explorer

by Dennis Hotson

Here’s a sneak peek of some experimental stuff we’ve been working on at 99designs.
99designs color explorer is a tool for browsing designs by color.

Nerdy technical details

For those interested in the technical details, color explorer uses colorific to extract colors from logo designs (We’ve written more about colorific previously). It’s also using colordb, a side project of mine designed to efficiently index and search by color using some fancy perceptual nearest-neighbour algorithms.

Colordb turned out to be super easy to implement thanks to a few excellent Python libraries: Rtree, Flask and colormath.

Rome wasn’t built in a day—but the 99designs color explorer definitely was built in a day thanks to these great libraries.

R-trees

R-trees are a useful data structure for indexing spatial data such as the location of planets in the solar system or coffee shops in your local area. In this case, colordb uses an R-tree to index colors since colors can also be kind of spatial and three dimensional (colordb uses the Lab color space that has L, a, and b dimensions instead of the typical x, y and z). Normally you’d use an R-tree to help find nearby coffee shops but I’ve used it instead to find nearby colors.

The best part about R-trees is that they let you do nearest-neighbour searches efficiently. This means that you can search for a color and it will return results with colors that are similar—it means the search doesn’t have to be exact.

By indexing colors in the Lab color space, colordb is also able to give search results that are perceptually similar. Color differences in the Lab color space are perceptually uniform. This means that comparing colors in the Lab color space matches how human eye perceives color.

Flask

Flask is a micro-framework for making little web apps in Python. Flask made it dead-easy to add a simple HTTP interface to colordb in order to integrate colordb with the rest of the 99designs codebase.

Putting it all together

So, there’s a couple of things that make color explorer work:

We used colorific to extract the top two colors in a design and insert them into colordb. At the time of writing, there are ~120,000 designs indexed in colordb.

The color explorer backend code connects to colordb over HTTP to search for a color. Colordb returns designs that contain a color similar to the one searched for. Color explorer is then able to serve up the HTML markup with the matching designs into what you see on the page.

That’s about all there is really. It’s quite simple.

Why?

So, what’s the point of all this? Well, mostly because I thought it’d be fun to make. :-)

But there’s another reason. I’m a big fan of using clever computer science to make software simpler. I love the idea of making user’s lives easier by using sophisticated algorithms to reduce complexity.

Color explorer is an experiment in taking an open ended problem such as “search designs by color” and using clever computer science to create a solution that is simple, powerful and easy to use.

Some other great examples of this principle in practice are Google’s search and Apple’s Siri.

I think it’s pretty amazing that Google is able to hide an incredibly sophisticated search engine behind a single text input. Likewise, Apple’s Siri is able to combine sophisticated machine learning, voice recognition and language analysis to enable people to perform tasks simply by speaking into their phone.

Isn’t that remarkable?

Acknowledgements

A big thanks to Josh Amos for his help on the UI and visual style.

This experiment was built as part of a 99designs R&D day. Every second Friday we have a day to spend on an interesting work related side-project. So, a big thank you to 99designs for letting our dev and design team loose to make cool and crazy stuff.

By the way, if this sounds like your cup of tea—did I mention that 99designs is hiring? :-)

Discuss

Join the discussion at Hacker News and Reddit.