Color Analysis when Designing for Mobile Devices, Part 1: Color Theory

Color Analysis is the process of selecting a color scheme that matches your project by determining the colors that best suit the brand, style and reflect the intended purpose of the application. Whether you are designing an app for the Android, BlackBerry, iOS or Windows Phone 7, choosing the proper color scheme is a crucial part of development. The success or failure of the application can in fact be partly attributed to this stage of the design process. It’s easy to blow past this level because so many developers and designers already have a ‘good’ sense of design and color matching. This can deliver an adequate app and all can go home semi satisfied and happy with meeting the status quo. Though to get your designs to stand out, win awards, to achieve the level excellence in your applications that you’re looking for, a little work is required and there are a lot of free tools & resources on the web to help you achieve your goal. The best part.. it’s not difficult and can be done for free.

Color is the most relative medium in art
– Josef Albers

 To start things off knowing some basic Color Theory will help. Proper use of basic color theory can help you decide what colors match, as well as how each color makes people feel or what messages the colors may be communicating through the app you are building.

Color is the perceptual characteristic of light described by a color name. Specifically, color is light, and light is composed of many colors-those we see are the colors of the visible spectrum: red, orange, yellow, green, blue, indigo and violet.

Objects absorb certain wavelengths and reflect others back to the viewer. We perceive these wavelengths as color. Keep in mind that when designing for a mobile device, the color model that is used is called additive color.

The additive color model is the method of creating color by mixing various proportions of two or three projecting colors of light. The additive reproduction process starts with the absence of light or black, mixes various amounts of red, green and blue light (RGB Color) to produce other colors. Combining one of these additive primary colors with another primary color produces the additive secondary colors cyan, magenta, and yellow. Combining all three primary colors produces white.

When viewing your mobile device, the light from the pixels diffuses to overlap on the retina creating different colors. Results obtained when mixing additive colors are often counterintuitive for people accustomed to the more everyday subtractive color system of pigments, dyes, and inks which present color to the eye by reflection rather than emission. For example, in subtractive color systems green is a combination of yellow and blue; in additive color, red + green = yellow and no simple combination will yield green. Additive color is a result of the way the eye detects color, and is not a property of light. Varying the luminosity of each color eventually reveals the full gamut of colors in the spectrum.

The light source or display will vary from device to device thus altering your color choices slightly.

Most harmonious color combinations can be traced to formulas derived from the color circle. To help visualize the color spectrum and organize color hue, the color circle or color wheel gives designers an illustrated diagram showing the relationships between primary colors, secondary colors, complementary colors, and other color combinations.

Color Circle

RGB Color Circle of Tints

Color Wheel

Color Wheel of Elements

Primary Colors

Secondary Colors

Tertiary Colors

Color Names

Color Names with a Numerical Value Chart

Color Schemes or color combinations may pass unnoticed when pleasing, yet offend dramatically when compositions seem to clash. One outcome we seek in the final form or composition, is a successful use of color.

We determine whether or not we are successful by critically assessing the visual balance and harmony of the final composition-balance and harmony are achieved by the visual contrast that exists between color combinations. Planning a successful color combination begins with the investigation, and understanding, of color relationships.

Monocromatic Color Relationship

The monochromatic color relationship uses variations in lightness and saturation of a single color. This scheme looks clean and elegant. Monochromatic colors go well together, producing a soothing effect. The monochromatic scheme is very easy on the eyes, especially with blue or green hues.

Analogous Color Relationship

The analogous color relationship uses colors that are adjacent to each other on the color wheel. One color is used as a dominant color while others are used to enrich the scheme. The analogous scheme is similar to the monochromatic, but offers more nuances. They usually match well and create serene and comfortable designs.
Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
Make sure you have enough contrast when choosing an analogous color scheme.
Choose one color to dominate, a second to support. The third color is used (along with black, white or gray) as an accent.

Complementary Color Relationship

The complementary color relationship consists of two colors that are opposite each other on the color wheel. This scheme looks best when you place a warm color against a cool color, for example, red versus green-blue. This scheme is intrinsically high-contrast. The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.
Complementary color schemes are tricky to use in large doses, but work well when you want something to stand out.
Complementary colors are really bad for text.

Split Complementary Color Relationship

The split complementary color relationship is a variation of the standard complementary relationship. It uses a color and the two colors adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme. This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension.
The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up.

Triadic Color Relationship

The triadic color relationship uses three colors equally spaced around the color wheel. This scheme is popular among artists because it offers strong visual contrast while retaining harmony and color richness. The triadic scheme is not as contrasting as the complementary scheme, but it looks more balanced and harmonious. Triadic color schemes tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.
To use a triadic harmony successfully, the colors should be carefully balanced – let one color dominate and use the two others for accent.

Tetradic (Double Complementary) Color Relationship

The tetradic color relationship is the most varied because it uses two complementary color pairs. This scheme is hard to harmonize; if all four hues are used in equal amounts, the scheme may look unbalanced, so you should choose a color to be dominant or subdue the colors.

Achromatic Color Relationship

The achromatic color relationship uses variations in lightness and darkness of black, gray and white. This scheme depends on contrast. It also looks clean and elegant but produces a stark, harsh effect, often meant to portray surrealism. Sometimes just a dash of one color is added as an accent.

Warm vs Cool Colors

The temperature of a color is based on its connection with physiological and psychological feelings rather than actual temperature. For example: a warm orange feels cozy like a crackling fire or a cool blue can feel as calming as a sea breeze.

When designing for a mobile device, it is important to keep in mind how your app will be used. The dominate color temperature will be decided by evaluating the feeling that needs to be conveyed and determining what is appropriate for the project.

Generally speaking, warm colors express emotions from basic optimism to extreme violence. The warmth of red, yellow, pink, or orange can create excitement or even anger. The neutrals of black and brown also carry attributes of warm colors.

Cool colors tend to have a calming effect. At one end of the spectrum they are cold, impersonal, antiseptic colors. At the other end the cool colors are comforting and nurturing. Blue, green, and the neutrals white, gray, and silver are examples of cool colors.

More to come . . .

Increase your knowledge of color theory. Below are some of the sites that I used to retrieve a lot of the information. Studying these sites will help you gain a better understanding of color theory:

http://www.pixel77.com/color-psychology-web-design-color-schemes-big-websites/

http://www.worqx.com/color/index.htm

http://kathkwilts.com/lessons/colorwheel.html

http://www.colormatters.com/color-and-design/basic-color-theory

http://www.vanseodesign.com/web-design/color-theory/

http://www.uxbooth.com/blog/creating-consistently-colorful-user-experiences-part-1-theory/