Would you like to tell us how we are doing?

You bet No thanks

Color

BlackBerry 10 UI design follows a specific color palette that all apps use by default, but you can brand your app with a signature color. This use of color can be a dramatic statement because all of the core screen components can be colorized, except for text selection and fine cursor controls.

Only a single primary reference color is needed to colorize an app. A color algorithm calculates matching base and highlight colors from that single color value so that your app has a polished look and appealing gradients throughout. If you want more control over the palette, you have the option of explicitly specifying the base color yourself.

Look at the palettes below for some good color choices that look nice in both the dark and bright visual themes. The default BlackBerry 10 primary color is Sky Blue, which is prominently displayed in the action bar's signature action button.

Background, font, primary, and base color selections shown in the dark theme.

Background, font, primary, and base color selections shown in the bright theme.

Best practices for choosing colors

Consider the bright and dark themes. If your app is designed to run in both themes, your choice of colors should look good across themes.

Don't go to extremes. Choosing a color that is too dark or too bright might make it difficult for your users to see screen elements against the black or white background due to lack of contrast.

Think of accessibility. Some of your users might be color blind, which could limit the range of colors they can see on the screen, making it difficult to see and use certain controls.

Be careful with the base color. In most cases, it is best to define only the primary color and let the system calculate the base color. Going with the calculated base is a good way to ensure that your intended colors are retained in future versions of the user interface. If you do want to define a base color, make sure that it is a similar hue but slightly darker version of your primary color (as shown in the sample palettes).

Keep the default font colors. The white or black font colors should be retained in almost all circumstances to maintain readability on components such as buttons and title bars.



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus