9 comments

[ 3.3 ms ] story [ 32.1 ms ] thread
I've done something similar in one of my older iOS apps however I used a 8x8 sample. Still an interesting read.
How I'd do it:

1. pick 500 random points from the album art

2. cluster them in 10 classes (k-means is an old, well understood algorithm)

3. pick the median point of dominant class for the bg

4. pick a contrasting color from a different cluster for the text

I wouldn't pick the median of the dominant class for the BG, but rather from the borders (even though this could work)

for 4 you want that, picking from one of the colors of the album or a contrasting color if this is not available from the album

How I'd do it: Use Embedly! Our extract API returns the dominant colors of all the images it finds: http://embed.ly/docs/extract/api/response#extract-images

For those that are curious, what happens under the covers is a random sampling of the image followed by a conversion to LAB color space (even better than YUV in terms of human perception) and finally some K-means clustering.

To see this in action, check out http://tightro.pe.

They also use a similar trick based on the icon colors for the iTunes ios app update feature (for those of us who still like plugging our phone or tablet into the USB cable). In the latest iTunes, when you click on an app in icon mode to find out what's new in the update, the background reflects the colors of the icon, which can make for some odd combinations...