Ryan Snyder

200,000 Icons in the Icon Rainbow

In the initial launch of Icon Rainbow, an icon color analyzer, we featured a small subset of 5,000 icons from the Apple iTunes store.  But Crystal and I knew that Icon Rainbow couldn’t be considered a fully developed project until we had the icons for all of the iPhone apps in the iTunes app store.  Well, it’s official - the Icon Rainbow now features the icons for all 200,000 apps in the iTunes app store.  And I guess that means you could call it a fully developed project now.  

I re-wrote the scripts that scraped, analyzed and saved all of the icons from apple.com, and ran those over the course of 4 weeks on our poor little $20 Slicehost server, which is still whimpering from its taskload.  Now that everything has been analyzed and saved, the icons have been migrated to Amazon S3 and an aggressive caching scheme has been put in place - the new Icon Rainbow dataset is ready for your perusing.

What’s next?  First, we’re planning to open source the code.  Next, we want to find ways that we can highlight the top applications from the app store, as well as the interesting colors that icons appear in the icons (my, designers sure do love their browns and periwinkles).  And eventually, we’d like to be able to highlight color trends that we notice in the app store.  We know we won’t be able to pull off color trending on our sad Slicehost server, so we’ll be looking into ways to efficiently analyze all of the data we’ll be collecting.

Hey, ho, it’s the Icon Rainbow!

If you know me, then you know that I get really bored when I am not dealing with a wacky problem that needs to be solved.  When Crystal Beasley (@skinny) approached me with an idea about writing a color analyzer to help quench her one of her geeky designer itches, I couldn’t turn down solving such a fun problem.

The Icon Rainbow (@iconrainbow) is a color analyzer for iPhone app icons.  In the first iteration, we fetched a subset of iPhone app icons and grabbed the color for every single pixel in each of the images.  We then determined which colors were most prominent in each app’s icon, in each app category, and also in the entire icon subset.

Rather than spend time explaining the site and how it works, I’ll just point out a few of the places where we got a little geeky about colors…

The Color Spectrum

For each category page and each app page, the spectrum at the top of the site shows all of the colors used in that dataset. And each color of that spectrum is made a width equal to the percentage by which that color is used in the dataset represented on that page.  Click around the site, and you’ll notice that the spectrum changes from page to page…  Just compare the spectrum for the Games category and the Weather category…

Click +EXPAND SPECTRUM at the top of the site over any data set and stare at the pretty colors.

Pixels and Percentages

For each category, all of the colors used are displayed ordered by most frequent use of the color.  Each color swatch shows how many pixels that color occupies in icons for apps belonging to that specific category.  The colored area of each color swatch acts as a graph bar by depicting the percentage that the color is used in that category; the shaded area of the color swatch acts as the end of the graph bar.

Hex, RGB and HSB

When colors need to be detailed, we try to give you the hex value, RGB value and HSB value for that color.  For HTML geeks, it’s the hex value that matters the most, and for design geeks you can flip a coin between RGB and HSB being top dog.

It’s not done yet

The Icon Rainbow is far from being complete.  We still need to grab the entire set of iPhone app icons, tweak the color matching and add some more design geekery.  But for a quick 50 hour side project, we’re pretty happy with we’ve created.