System Colors – Don’t Believe Your Eyes

Apr 29th, 2010 by Christina in LabVIEW, User Interface

What color is the fill area in the tank in the picture below?

VI with a tank control

This is, of course, a trick question. There is no way, looking at this image, that you can tell what color that is. It looks like blue, right? Now let’s use the Color tool in LabVIEW to inspect the color. [Video demo].

The color is System Highlight color. It’s a symbolic color whose current value is defined by the Operating System and user-selected theme.

That means the actual value of the color is defined completely outside of LabVIEW. Let’s change the system theme to High Contrast Black. [Video demo].

Now our tank is filled with purple!

There are times when you want your user interface to conform to the system theme and times when you don’t. Modal dialogs that convey information to the user or ask her to make simple selections probably should match the system. In these cases, build your VIs using system controls and system colors.

But if your tank represents a real tank of water, you probably want it to stay blue regardless of the user’s display theme.

Let’s talk a little bit more about the six System colors available in the LabVIEW color dialog:

  • Panel & Object
  • Panel & Object Text
  • Window
  • Window Text
  • Highlight
  • Highlight Text

There are actually quite a few more system colors, but these are the six that LabVIEW provides simple, cross-platform access to.

As you can see, there are three pairs in this list, each comprised of a color and a corresponding text color.

System themes are designed such that the text color and its paired color are never the same color. Black text on a black background is difficult to read! (This happens often in High Contrast Black theme when people mistakenly put black text on a background that’s colored Panel & Object. This situation always reminds me of the Disaster Area stunt ship in the Hitchhiker’s Guide to the Galaxy).

So, what are these three system colors for? On Windows, they map (in most cases) to these system colors:

  • Panel & Object = COLOR_3DFACE
  • Window = COLOR_WINDOW
  • Highlight = COLOR_HIGHLIGHT [Note: I had this wrong in my original version of this post. Sorry!]

Microsoft explains these colors as:

  • COLOR_3DFACE – Face color for three-dimensional display elements and for dialog box backgrounds.
  • COLOR_WINDOW – Window background.
  • COLOR_HIGHLIGHT – Item(s) selected in a control.

I’ve always found “Window” color to be particularly confusing, because it’s not the color for “dialog box backgrounds” (which is Panel & Object color). So it’s usually not the color you want for your panel, even though you might think of your panel as your window. The way I keep this straight in my mind is that “Window” color is the color of the text entry area in Notepad.

Now, back to something I mentioned in my previous post. Why didn’t we ship the “System compatible” controls that we made for our custom probes?

The problem is that the operating system does not give us the system colors we need to do these controls correctly. For example, there is no set of graph background and plot colors defined by the system theme. That forces us to use some colors that are not system. I’ll call them RGB colors, because they are specific color values that do not change from system to system.

You may recall that I advised you not to mix system and RGB colors. Why? Because it’s really difficult to get working correctly. At every boundary (where system and RGB colors are adjacent), you have to consider what will happen if the system color changes to match the RGB color (thus making that boundary invisible).

It is possible, in specific UIs, to get reasonable results. However, I never felt that we could provide a general-purpose solution to System themed graphs, tanks, etc. that wasn’t unreasonably error-prone. And thus we’ve never put them in the palette.

8 Comments

  • Christina, good to hear that you can devote more time to these bits of interface design.

    So what gives on the Mac OS X? All I get for “system colors” are 5 boxes that alternate black and white! Not the most useful. OS X has system highlight colors but LabVIEW doesn’t seem to be smart enough to grok them.

    How does this translate to linux?

    And lastly the whole thing seems to imply that in any complex UI design where you need more than just a couple of colors that the system colors are really more trouble than they are worth. You might with a lot of restriction make a UI that would look just like a system box but it is very restrictive.

    Actually on OS X just having the little gum drop window control buttons and some of the usual shiny blue “OK”, and red “Cancel” buttons would be a great addition. I have seen how to make these in photoshop but until LV allows user created vector UI elements it means to make them look professional one has to generate bit maps at all sizes.

    It is still hard to make a very clean, OS styled UI that is cross platform.

  • hi Christina, thanks for some more background info. This inspired me to write some info on these colors on the LabVIEW Wiki: http://www.labviewwiki.org/Color

  • Scott – let me check our bug tracking system and get back to you. I’m pretty sure things used to look better on Mac OS X a few years ago. It’s possible we haven’t kept up with Apple’s API changes. I haven’t used the Linux version much, so I’ll need to check on that one, too. Overall, I agree that it is very difficult to make a UI that both adapts to system appearance and looks good cross-platform. It’s something we’d like to make easier some day, but it’s a challenging problem.

    Ton – It’s good to see the WIKI is alive and well! I went ahead and added the corresponding text colors. Now, I should provide the caveat that I found these values by quick code inspection and I’m not sure they’re always these colors. (For example, it looked like the highlight colors might be changeable with config tokens, but I didn’t test it).

    Thanks for reading!

  • Scott,

    You’re right, the “Highlight” and “Highlight Text” are incorrectly black and white, respectively. I believe this has been there since we ported to Mac OS X. I’ll file a CAR on that.

    The first “white box” under System (Panel & Object) actually has a cool effect. If you make the background of a window that color, it will have the subtle (too subtle too see on my cheap LCDs) horizontal striping. I believe that the stripes are more prominent on 10.4. This makes the window look like a dialog, as I recall.

    Another issue about the system buttons … Apple changed their behavior in 10.5. If you change the height of a System button from 23 to 22 or smaller, it will be a rounded button. 23 and higher (LabVIEW drops them at 23 pixels high) will be a square button.

  • Thanks for the info, Marc! For those of you who don’t know him, Marc Page is also in LabVIEW R&D and has his own blog called The MacView.

  • Scott,

    As a workaround, if you take a u32 number 0x1000013 and wire it to a color, it does the right thing. You would have to probably use VI server to set the color of the object you are trying to set to the Highlight color. Oh, and currently Christina has the CAR on her plate to fix this 😉

  • Oh my, thanks for putting me on the hot seat, Marc! :-

    Looking at the code again, I’m less certain about the highlight color I had determined before (COLOR_MENU). It might actually be COLOR_HIGHLIGHT. Also, I guess now I should blog about all the secret system colors that you’ve casually revealed. 🙂

    [Edit: Yes, I got the color wrong. Sorry! I have fixed the post and the WIKI.]

  • Scott Hannahs

    Well glad to see that this is now a CAR. I had always seen that group of black and white system colors and my mind had just blanked it off as a non-interesting part of the color palette and not looked at it again.

    Interesting trick about shrinking the button one pixel. I hope that changing the default to either make it drop at 22 pixels or to change the criteria that transfoms it from rounded to square. Is that using system code for the button or is that LV code? I would like a bunch of the red and yellow buttons as well for cancel, stop, warning etc.

    Is the color series 0x10000YY the system colors? 0×1000013 gives me a color that is darker than the highlight color.

 

Comments have been closed for this post.