Well, if you've read the first five articles in this series, you may be asking yourself: "How does all of this relate to Mobile Design?" The purpose of this introductory series is for you to add some new tools and ideas to your mobile design arsenal. This article is no different. Colors can make your application look professional and beautiful, but on the flip side, they can also make it look like your app was made by my five-year-old nephew.

I am not out to make you a professional designer in this course, but knowing the fundamentals of color theory can really help bring your apps to the next level, even if you intend to create the entire app interface in code.

When it comes to understanding color theory, what follows is the simplest way I could break it down for you.

Primary Colors

Red, Yellow, Blue. These are the three basic colors that cannot be created by any combination of other colors. All other colors are the result of mixing these three.

Secondary Colors

Green, Orange, Purple. These are the colors formed by mixing the primary colors.

Tertiary Colors

Yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green. These are the colors formed by mixing a primary and a secondary color. In other words, it fills in the rest of our color wheel.

Analogous Colors

Any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors is the dominate color.

Complementary Colors

In regards to the color wheel, complementary colors are any two colors directly opposite each other, such as red and green. Complementary colors create maximum contrast and maximum stability. Be careful when working with fully saturated complementary colors for digital interfaces: they can be straining on the eye.

Here’s another one of my little secrets that I will let you in on and also where I grabbed the graphics from. This is a great site that will help you put some harmony in your app.

Additive Colors

Additive colors are what the web, television, and mobile devices are made of. In Photoshop we create all of our app screenshots, backgrounds, and graphics in RGB format. RGB stands for Red, Green, and Blue, and these three are the additive primary colors. When various combinations of these three are mixed together, all the remaining colors are created. In Photoshop, you can manage the RGB color by double clicking the color palette. The two most common ways to adjust color in Photoshop is to either type in numeric RGB values directly in text fields or to just drag the color picker over the color palette.

On a scale from 0 to 255, every numeric increment changes the color in a subtle way. Just to get the hang of it, there is nothing subtle about the differences below!

An RGB value of 255, 255, 255 (full saturation) is the same thing as white, which also shows the hex value of #ffffff.

To the contrary, if all RGB values are set to zero, the color generated is black. This shows the corresponding hex value #000000.

Getting a little more into it, you should be able to predict what color will be generated when Red is set to a value of 255 and Green and Blue are set to 0.

Nonetheless, I couldn't resist another screen shot. With a value of 255 in Red spot, and 0 in the Green and Blue, we get a fully saturated Red color. Green and Blue change accordingly with the same values rearranged.

As an example of what happens when we start messing with multiple different values, with a value of 255 in Red and Green, we create a fully saturated yellow color with the hex value of #ffff00.

So, by solely changing the values of Red, Green, or Blue, we can create the exact color needed for the design at hand. Knowing how colors interact with each other is really going to help your applications and web sites show a little more harmony and cohesion.

Color Psychology

So now comes the fun part. With the general theory out the way, how do you know which color is best for your app? Colors can have different effects on people and can even hold different cultural meanings beyond what may be naturally intuitive. Red has been known to increases blood circulation and stimulates our body and mind. For these reasons, it is thus often associated with sex and love. Orange has been known to increase overall energy. Blue can be used to treat pain and is known as a stimulant and can often attribute to sleeplessness. Keep that in mind the next time you are staring at that little blue light on your television!

Knowing how people react to colors by nature can be an important tid-bit of information to keep in your back pocket. Color association and color psychology go hand-and-hand, and both are worth further independent research for the serious designer.

A site that you should enjoy and will speed up color-association design decisions is http://colorapi.com. Search for a word, say, bread, and you will come up with a ton of color options for that bakery app you are working on. Enjoy!

Accessibility & Color

I am a big proponent of accessibility and color plays a major role in the overall accessibility of both web sites and mobile applications. By providing enough contrast between background color and page elements, you will ensure that everyone will be able to enjoy your applications the way you intend for them to be enjoyed.

To see how your site or web application looks to the visually impaired, check out http://colorfilter.wickline.org/.

Color by Example

Here are a few apps that got it right. Take a look at the web site that you would see when visiting from a desktop computer and compare it to that of the mobile application. Both carry a consistent look, feel, and color scheme. Continuity between web site and web app is just as important as color scheme (but that discussion is for another time).

Using a blue color, gives the site a nice calming and cool looking site. Not cool as in surfer-boy slang, but cool as in temperature, thus the thermometer app. Works well.

I like this one. Cellar pulls off a nice effect using browns to give the site and app a natural and comforting feel. Like an actual wine cellar possibly with dirt floors and wooden shelves and walls -brown was really the obvious choice here.

Like the thermometer app, the mobile version of arctic.ru gives a nice cool look with the whites, blues, and grays. Depicting cool colors on a site with polar bears is always a good idea. Conversly, a site for Las Vegas or Arizona or warmer tropical climates would have more success using warm colors like reds, oranges, and yellows.

Next Time. . .

Next time we will get back into Photoshop and we'll learn how to create basic shapes and buttons. Stay tuned!