Which Color When? (Part 1)


As you probably know by now, each of the Office 2007 programs (both classic UI and new UI) have the ability to render themselves in several different color schemes.

What determines which color scheme is used when, and what are the defaults?

Before discussing Office 2007, let’s jump back and talk about Office 2003 for a bit of background and history.

Office 2003 was primarily designed to run on top of Windows XP. Windows XP has three “themed” color schemes which you can switch between in the Display control panel: Blue, Olive, and Silver. In addition to these, you can turn off theming altogether and use Classic mode (a Windows 95-like appearance) or High Contrast mode (an appearance designed for maximum contrast in the UI to help those with low vision.)

So the decision was made to have Office 2003 try to always match the OS color scheme. If you were using blue, Office looked blue; if you were using olive, Office looked olive. This work was done primarily through an internal data structure called the “color table.”

Office 2003’s UI is rendered on-the-fly based on entries in the color table. Each color table entry represents a specific color to be used for an element of one of the Office programs. There are around 1500 defined colors, each of them is chosen by a designer for each of the Office color schemes. This means 1500 colors for blue, 1500 for olive, 1500 for silver, etc.


The Office 2003 UI is rendered using around 1500 colors

Here’s an example: the background fill of a toolbar might be based on three entries in the color table: the color at the top, a gradient stop in the middle, and the color at the bottom. In reality, of course, the rendering of a toolbar is more complicated than this simple example and toolbars are actually drawn based on more like 50 colors instead of 3. But you get the idea.

The upside of this method is that defining a new color scheme is just the matter of choosing 1500 colors or so and then extensive testing to make sure they’re all used correctly. It’s hard and time-consuming to get right, but there’s no huge up-front production art cost.

This downside of this method of rendering the UI based on a color table pretty much means that the UI is limited to solid fills and simple gradients. As a result, the Office 2003 UI couldn’t be as rich and polished as the designers working on it wanted it to be.

There’s more than just the blue, olive, and silver themed color schemes, however; you can also turn off theming in Windows XP to revert to Windows 95-like appearance. In this mode, you can change the color of Windows system elements based on the old color picker for each part of the UI. There are around 25 system colors defined as part of one of these classic appearances.

And so, in an effort to have Office 2003 match the OS in this mode, every entry in the color table has to map to one of the system colors.

The problem? Windows only provides 25 colors, but Office needs around 1500. In order to try to make the UI still look nice despite there not being nearly enough colors, the team created the ability to specify that a color table entry is a blend between two Windows colors or a lighter/darker variant of a Windows color.

Sometimes this comes out looking OK, but many times it doesn’t turn out that great with certain color choices. A big effort was made to make sure Office 2003 works well with the default color choices provided by the system, but the fact that you can make your own Windows schemes makes the design a bit of a crapshoot.

Finally, in High Contrast mode, we have to render the UI based only the system colors; blending colors doesn’t work because it reduces the contrast. This means that every one of the 1500 color table entries has to map directly to one of the 25 Windows colors, which usually boil down to black, white, green, and purple. It’s extremely easy to end up with black text on black background or another impossible-to-read combination, so it takes us pretty much the entire product cycle of working to get all of the bugs in the mapping worked out.

Now you know how the Office 2003 UI is rendered. There were a few drawbacks to this approach:

  • The UI rendering was limited to solid fills and simple gradients.
  • Many “classic” color schemes didn’t look right or had usability problems.

In addition, one of the biggest pieces of feedback we received about Office 2003 was that people wanted more flexibility to change the Office color scheme independent of the Windows scheme.

Some people disliked that the Office color scheme was based on the OS appearance and that they couldn’t specify what Office scheme to use. Those of you in the 2003 beta will undoubtedly remember that this was one of the longest and most involved discussions in the 2003 private beta newsgroups.

Next time, I’ll describe what changes we made for the new UI in Office 2007 and how Office chooses color schemes on Windows Vista.

Comments (32)

  1. Humberto says:

    But now with Vista, Office doesn’t have the cool grass features!

    I know users always ask for more, but, it would be very nice if Office can support both modes (OS like and OS independent).

  2. Dave Solimini says:

    Ok, but this doesnt explain why the office team insists on using non-standard coloring to begin with. If standard colors are good enough for everyone else, why arent they good enough for office?

  3. A User says:

    The proposition that Office NEEDS 1500 colors is preposterous. With all due respect, you guys have way too much time on your hands.

  4. Christian says:

    You DO know that there are faaar more themes than "Blue, Olive, and Silver", do you?

    The first thing that goes on every installation of XP or terminal server is the Uxthememultipatcher. The first thing to show up on google for uxtheme.

    Thankfully, I never had a problem with my theme, Office looked absolutely great!

  5. Francis says:

    What complexity!

    How many users actually noticed–and appreciated–how the Office 2003 interface differed from that of XP and 2000?

    Why not ship a print of an artistic masterpiece (of the user’s choice) or a cake with Office? Users can mount it on a pedestal by their monitor and stare and drool at it when they have a hankering for the rich and polished.

  6. Christian says:

    You DO know that there are faaar more themes than "Blue, Olive, and Silver", do you?

    The first thing that goes on every installation of XP or terminal server is the Uxthememultipatcher. The first thing to show up on google for uxtheme.

    Thankfully, I never had a problem with my theme, Office looked absolutely great!

    Why would customers accept the XP-team’s decision of crippling theming capabilities?? Of course this needs to be patched!

  7. Christian,

    the first thing that goes on any XP installation of mine is FireFox. I had never even heard of this uxtheme thingy until your post. Your comment does not reflect ALL XP installations, but maybe just all of yours.

  8. Koms Bomb says:

    How many people like the flowery themes?

    Office is not media player or IM program, maybe it’s better to leave it just as the OS is.

    I personally don’t like the flowery themes.

    Is there any statistic to show the users preference, eg, the percent of users like the themes and the percent don’t like?

  9. I have always been really interested in UI designs and outcomes. Jensen Harris has just posted the first…

  10. Lex says:

    Personally I use Royale (sometimes called Electric Blue) which is one of the few official themes out there (it doesn’t require patching etc… and ships with Media Center and as a free download).

    Despite it being an official theme however programs like in Office (that assume only 3 themes exist) think I’m running classic – and look frankly rubbish.

    Which brings up another point what does Office look like on classic? The grey theme?

  11. MSDNArchive says:

    Users should not have to set their color preferences in multiple places.  If I’ve set white text on a black background already, I want all my applications to respect that.

    I’m aware of the high contrast feature, but that can be overkill.  I would just like to have Office acknowledge that I’ve already made a choice as far as color and to use it.

  12. Centaur says:

    Office does *not* need 1500 colors. Windows provides all necessary tools to paint title bars, toolbars, windows and dialogs.

  13. I was reading this post, really getting into it, ready to learn how they’ve tackled this problem in Office 2007…

    …tune in next time to find out

    D’oh! 🙂

  14. Tom Servo says:

    Sorry, but this sounds like a load of crap. Looking at the Office 2007 UI, it looks more than easy enough to clone it in Photoshop with multiple multistop gradients and layers. Nothing which couldn’t be done in code. Hell, that sort of stuff is the one of points of WPF.

  15. (yeah ok, I haven’t quite figured out what innovation means to me yet. I’m still thinking about it.) Jensen Harris had an interesting post on his blog yesterday about what it took in Office 2003 to maintain the color schemes…

  16. Nathan says:

    Personally I like the way Office 2003 handled the colors on XP. As a developer, and UI designer I always try and match the OS as closely as possible. Which is what Microsoft Windows guidelines tell you to do. My irritation comes when programs like Windows Media Player and Windows Messenger differ from this.

    Also the fact that MS wants you to use nice new Vista icons, yet you aren’t allowed to use THEIR icons. That’s crap if you ask me. With as much talk of "consistancy" as they use, not being able to use the key graphics makes it almost impossible.

  17. Oh, geez, you’ve just brought up another thing for me to worry about. Despite reading about the blue/black/silver color schemes, I hadn’t thought about how all this "theming" might affect the part of the UI I *do* customize in Windows (with application to every app): the window color. My window color is set to 255/255/225, which is a restful ivory. I hope I’m not going to have to live with stark white as my "paper color" in Word 2007.

  18. C. Moya says:

    Consistency has fallen by the wayside in recent years. Look at Office *XP* which didn’t use the themed buttons and look and feel of Win *XP*. Why did this have to wait until Office 2003???

    Loading up Office XP for the fist time was horrid (although I do still prefer the "quiet" restful toolbar in Office XP to the super-gaudy annoying one in 2003). Each time I loaded it up it was just an "eye shock" because it was so DIFFERENT than everything else in WinXP.

    MS Office often tries to "set itself apart" using *eye-candy* as if the superiority of its functionality weren’t enough (I guess it isn’t!).

    Here’s a hint that *used* to be uber-important to classic Windows developers before the recent class of (horrible) developers at Microsoft: CONSISTENCY IS KEY. It’s one of the most important things behind USER INTERFACE theory… not just within Suites (which even Office fails at… look at the unweildy MDI differences between Office apps), but across the ENTIRE PLATFORM.

  19. steveg says:

    C. Moya: thank the marketing department, dude.

  20. !!! says:

    Top 3 rules of UI design:

    1.Consistency

    2.Consistency

    3.Consistency

    Office 2003 did it (somewhat) well, but Office 2007 is falling apart in this matter.

  21. Mike Dunn says:

    I absolutely hate the way 2003’s toolbars look. Aside from being an eyesore, it always struck me as MS’s GDI guys showing off (not to mention the sillyness of rewriting the dang toolbars with every rev of Office).

    2007’s black theme is almost perfect, I just wish the highlight color followed the user prefs. I don’t like the whacky orange highlight that matches exactly zero of my theme/system colors.

  22. Patrick Schmid says:

    Totally unrelated, but here is a nice gallery of screenshots of UIs from 1984 onwards: http://r-101.blogspot.com/

  23. C. Moya says:

    I also hate Office 2003’s toolbars… especially in Silver mode (my preferred style). They made it into Visual Studio 2005 and I can’t stand it. The restful and clean toolbar of Office XP/2002 were great.

    MS’s UI design teams (especially the Office guys) are going insane. If Office 2007 doesn’t obey system colors and settings I am going to be severely disappointed. Possibly the final straw in my book.

  24. PatriotB says:

    I have Royale installed on my machine.  And I love it.

    The main reason?  When using Royale (over Luna Blue), Office 2003 *stops* with the blue toolbars and goes back to using the system colors.  Thank goodness.  (Who EVER came up with the blue toolbars?!?!)

    Visual Studio 2005 opted to use the same tubular-style gradient toolbars, but they always base them on the system gray, not on the blue.  Which makes them look much better and more consistent with the OS.

    Strangely, VS2005’s corresponding .NET 2.0 uses the blue toolbars.  Arrrgh!

  25. david3864 says:

    Colors are nice, but so is basic functionality…

    I’ve been searching for some way to give Microsoft a simple suggestion for Word. All I can find is support options that cost big bucks! I know this isn’t relevant to your blog, but perhaps you will be a kind person who will send this suggestion to the proper place for me.

    Anyway, my suggestion is very simple: Microsoft Word needs a new command-line option to open a file in read-only mode! It should create a read-only shortcut that uses it, when installed. More complex designs involving access rights might not be understood by new Office users or perceived as user-friendly.

    (Sorry this isn’t on the cutting edge, but I think protection from changing the contents of a document has its place.)

    David

  26. C. Moya says:

    Off topic, I know… but, david3864, here’s your shortuct…

    just create a batch file:

    @echo off

    xcopy "mydoc.doc" "%USERPROFILE%Local SettingsTempmydoc.doc" /Y

    attrib +r "%USERPROFILE%Local SettingsTempmydoc.doc"

    "%USERPROFILE%Local SettingsTempmydoc.doc"

  27. Jeff says:

    Hi;

       Downloaded B2TR; and I switched that nasty blue; to the dark "graphite"

    color.

    Anyway; all the Office 2007 apps switched; except Office Picture Manager.

       It stays that ugly blue. I can’t figure out how to get it to be the same

    UI color as the rest of the apps in Office 2007.

    Is this a bug?

       Or; am I missing something here?

    Help PLEASE- blue stinks- I love the black ribbon.

    Correction;

    Looks like the core apps; word;excel;outlook;pp changed to the black

    ribbon;but eveything else is still that blue. Bummer

    Any plans to fix this?

    Jeff