The Colors Of An App Icon

At Appbot we get to see a lot of app icons while providing insights into app reviews.

At Appbot we get to see a lot of app icons while providing insights into app reviews.

In the past I have studied everything from app descriptions, to screenshots, to names, to countries. The one that has always really interested me most was app icons, but I never came up with an idea on how to really study what is effective.

Recently I stumbled across a cool Ruby library called Miro that extracts the dominant colors from an image.

Finding the dominant colors of apps shows some really interesting results.

The Method

Google Maps Icon

Next I took the standard Web Colors (plus added yellow) and matched each web color to the closest. This grouped them into approximate names.

#02601e -> Green
#a8120c -> Maroon
#0c44de -> Blue
#bdbfc0 -> Silver
#f4b510 -> Yellow
#717973 -> Gray
#24721b -> Green
#2d0d0e -> Black

Colors Of Google Maps

Ignoring black, white & grey and taking the four most common colors I plotted them on the a ‘Color Wheel’.

The large size of the icon represents a larger percentage of the icon containing that color.

Top 200 Free iOS App

Plotting the top 200 free apps on the Color Wheel gives us:

Top 200 Free iOS App Icon Colors

We find large clusters of blue and red app icons, with a scattering of green. Pink and purple is under represented, with Snapchat owning yellow.

Top 200 Paid iOS Apps

The top 200 paid iOS apps differ slightly from free.

Top 200 Paid iOS App Icon Colors

Although there are similar groupings of blue, red and green to that of free, paid apps generally appear to use more colors with less having one color on the majority of the icon. This results on more of a spread and smaller icons on our Color Wheel.

100 Newest iOS Apps

Next I plotted the newest 100 iOS apps released to the App Store at the time of writing. The assumption was that this would give a more general representation of the overall store than the top charts.

100 Newest iOS App Icon Colors

This gave very similar results to that of the top paid charts.

Top 200 iOS Social

All social networking apps are blue aren’t they? Twitter, Facebook etc.

Top 200 Free Social iOS App Icon Colors

Turns out the clusters are similar to all categories, if anything green is more represented.

Top 200 iOS Games

Many games tend to have more complex icons than applications. This sees more of a spread in colors used.

Top 200 Free Mac Apps

It’s always felt that 90% of the apps in my OS X dock are blue, but is that the way it turns out in the top charts for Mac?

Turns out blue is similarly represented as it is on iOS, with also a lot of icon using red and green.

Ordering By Chart Position

Graham from MacStories had a great suggestion on plotting the major color of an app against it’s chart position. I tried it for the top 100 free apps.

The larger the icon the higher up the charts the app was.

Top Free On Google Play

After posting the original copy of this article I had a bunch of requests for Google Play comparisons. My results are from the Australian store.

Looks pretty similar to me :)

Top Free Games on Google Play

For comparison to iOS.

What Color Should You Choose For Your Icon?

This should really come down to your app, what it does and your target audience. However, maybe you fit into one of these three categories.

The Conformist

You like to follow the crowd, so go for blue or red.

I Like To Be Different

Maybe you can go green, not the most popular, but you still aren’t being too risqué.

The Rebel

You laugh at the conformists, scoff at those who think they are different. Go for pink or purple and wear it like you own it.

Posted by Stuart Hall on Medium