Ryan Snyder

RSS

Posts tagged with "colors"

May 9

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…

Games Spectrum

Weather Spectrum

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.

Color Percentages

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.