Blue in the Interface

This comes as a surprise to me, but a look at most all of the icons on my computer reveals that the vast majority of them are blue. There’s only a very small handful — Adium, Address Book, iCal, Transmit, some others — that aren’t. Blue, blue, blue — everywhere I look all over my hard drive, blue.

Maybe this is old news to you — it’s hardly novel for any Westerner to realize that, if there’s a default color that signals acceptability and inoffensiveness, it᾿s blue. But if you don’t believe me, have a look at these thirty icons I collected from my hard drive (please, no potshots about how out of date some of them are. I’m too busy to upgrade) and how shockingly uniform they are in color.

+
  1. and beyond the blue, the profusion of circles.

    In my dock, the icons I have by default (other are launched via Quicksilver):
    – Flock
    – Firefox
    – NetNewsWire
    – Safari
    – iTunes

    All round!

  2. It’s funny, I noticed the exact same thing a few weeks ago and was planning to do a screenshot of my application switcher filled with blue icons. Surely no surprise that there are more; I’d add CocoaMySQL, Google Earth, RealPlayer, Shiira, Thunderbird, Transmit, Virtual PC, Spaces, BBEdit, and the new Leopard folders to the list.

    And of course orange/yellow is the second most popular, being blue’s complement…

  3. Yeah, I suddenly noticed that when I got Leopard.

    So i changed the icons. At least the default desktop is not longer blue.

  4. Kind of staggering to see them all in one place. Couple that with a good point by Olivier about roundness and it makes me think there’s a huge opportunity here for someone with a great app to design a truly unique icon. Or, perhaps, for someone to start offering their talents in service of truly unique icon design.

  5. Yeah, I first noticed this when iTunes 7 was released, which dropped that lovely green music note for the current ugly blue one. My entire dock is blue (other than the trash can), which is really annoying.

  6. I am getting sick of blue! Why do major Web sites continue to use it! I know, its suppose to be somewhat of a soothing color, but everything is blue and I just hate designing in blue! Oh Khoi you lucky dog, black and white are the only 2 shades you see, and for that your retina’s will thank you later on in life.

  7. It’s true, but I don’t think we should feel so blue about it. Look around folks! The sky, the ocean, jeans… all awesome, all blue.
    I’m down with blue, but then again, if I’m designing an application icon, I’ll probably stay away from blue.

    I think black is a very underrated application icon.

  8. Its not really surprising; the interface is called “Aqua” and many of the original icons and UI widgets had/have a blue gel look to them. At least half the icons there took their design cues from that original look. Also, 7 or so of them have an earth motif that one would expect to be blue.

  9. Very, very blue! 🙂

    The new version of Keynote is now wooden brown – maybe the reason for the change?

    Going in the other direction, OmniGraffle Pro 5 (in beta) sports a new silvery-bluish icon – previously it was forest green and gold. On its own, I think the new icon is more attractive, but I don’t know if it will stand out as much as its green predecessor on my dock, or in my Apps folder.

    Is blue the safe bet? If you want to stand out and go red (for example) I suppose your app needs to be able to justify the attention …

  10. Remember that song “Blue”, by Eiffel 65?
    Yeah, this reminded me of that.

    Speaking of icons, I did a sort of remix/recreation of the Time Machine icon recently. You can see it on my site. And for what it’s worth, it’s not blue!

  11. My dock’s actually not so uniformly blue, thanks in large part to the Adobe apps. But, your point remains in tact. I wonder if, in addition to the inoffensiveness of blue that you note, the fact that OS X has always been predominately silver/grey and blue has an influence here? Apple’s moved away from the aqua somewhat, but it still shows itself in many places (scroll bars, for example), and that move is only pretty recent.

  12. That’s funny, I was recently wondering how all of the online newspaper sites sychronised their link colour to blue. There’s the sombre, desaturated blues: NYT (although on second look, you just darkened it, didn’t you?), IHT, FT and the Washington Post. Then there’s the somewhat fresher, brighter blues: SMH, Times Online, SZ and the WSJ. The only big online news source I know of these days that *doesn’t* have blue links is Spiegel.

    Blue’s the new black I guess?

  13. Additionally: svnX, and OfficeTime are both blue.

    Round icons just on my dock: Opera, Firefox, Safari, Adium (with an icon replacement), CocoaMySQL, OfficeTime, Fugu. Others like iSync and Pages come to mind as well.

  14. heh, a look in my dock finds the same thing.. even the darn FROG in azureus’s logo is blue. when was the last time you saw a blue frog?

    add to that list, BBEdit and Vicomsoft FTP (my fave FTP program.)

  15. Well, blue is and always has been MY favorite (I believe that’s specifically cited in the OS X User Interface Guidelines somewhere.)

    And only slightly more seriously: blue, from the dawn of NTSC broadcast time, has worked really, really well on television, in part because the about-to-be-obsolete NTSC color gamut has “more room” for subtle variations in blue, and is kinda crippled around the green range. This advantage all but disappears in the land of HD.

  16. How about:
    – Adobe Photoshop CS2
    – Adobe Help Center
    – Real Player

    I hope khoi updates the post with everyone else’s findings.

  17. Showoff 😀
    Blue has somehow become the universally neutral color — nowadays it should be among black and white. Every day, as I see different designs, I notice that people are trying to run away from blue since it’s somehow lost it’s authenticity due to over(and sometimes mis)use.

    As the (corny if you ask me) coined term Web 2.0 clings I hear the words “green”. I think Web 2.0 is about the ‘scaping from blue and living on green (please do not present non-valued misinterpretations).

    What’s next? Getting red (blushing :D)? Or we get to keep the relaxant blue? (As obvious I’m giving out post ideas ^_^)

    Anyway, nice iconics.

  18. Wait, you have Flock installed? 😉

    A large part of it is undoubtedly because of Mac OS X and the aesthetic that follows aqua when it first came about. But also, Microsoft follows the same aesthetic with their choice of blue for their products, identity, even OS.

    It seems as if a developer wants to appear OS or application-like, they embrace the general aesthetic in looking more legit.

    The icons that stand out in my dock are Firefox, Coda, Adium and Aperture (along with the CS3 apps). The rest indeed are surprisingly blue. Though I suppose at that size, it’s a neutralizing colour that catches enough attention but doesn’t scream out at you. Good or bad?

  19. I deliberately stack my dock with non-blue things so I can pick things out quickly, and invoke others with Quicksilver.

    I find that Taskpaper (red circle) and Coda (Green leaf) break things up nicely. Final Cut Pro is another good diversion, but perhaps not worth the $ just to make the dock more navigable.

  20. Blue is also the color of technology and the future. Think of every sci-fi film you’ve ever seen — Terminator, Blade Runner, or more recently Children of Men. Blue is the color used to depict the sheen of a far off technical convergence.

    I noticed the icon thing awhile back as I keep my Dock color-coded.

  21. I sort icons in my dock (like the books on my shelves) by color, and about 50% of my dock is blue. I’m partial to the purple section in the middle (InDesign, TextMate, Colloquy and Aperture) because it’s such an underused hue.

  22. I don’t have that many, percentage-wise, blue items. But the preponderance of circles is a problem. I will occasionally hit the wrong thing in the dock as a result of this needless similarity. I like things like the Skype icon and Watch-it which have their very own shape.

  23. A couple of non-blue recommendations:
    – for database access, try SQLGrinder (orange! though still round)
    – for one that really stands out in this round, blue universe, try Mishimo’s excellent MyNotes
    – BetterZip, an excellent utility (see what’s in those zipfiles without unzipping them) is a humble brown box

  24. It may be worth noting that (as far as I can recall), each major version of iTunes has changed the color of the note over the CD … though I will say that there’s definitely a blue-leaning in the color choices (green was as far away as they got). The current icon’s blue seems to match the overall blue used throughout the Aqua UI, so it shouldn’t be that surprising that other icons have followed suit.

  25. Remember when iTunes icon used to be green?

    The prevalence of blue has got to have something to do with used-to-be-default blue desktop background…

  26. This post helped me realize that blue is the predominant color in my wardrobe – let alone my computer. Now what does that say about me?

  27. good grief … take 100 icons and pick 20 that are blue and present those. Classic data fudging technique.

    A better way to do it is to focus the Finder in Icon mode on the Applications directory and see the true nature of this issue.

    thanks!-

    -lance

  28. This is just flagrant ‘Blueism” you should be locked up so as not to cause any more harm to society than you already have.

  29. But on a serious note, if you know anything about colour theory you would know that blue is a ‘trusted’ colour. A great deal of banks use blue as a colour in their brand for just that reason. It could be that subconciously we ‘trust’ blue icons more than others…

  30. Maybe it’s time to switch your docked text editor to Smultron. It’s a great editor for programmers, it’s icon is red and green like a top view of a strawberry maybe, and it’s a free download from the apple site. I station it right in the middle of my dock and it really stands out against all that blah,

Thank you! Your remarks have been sent to Khoi.