Color, Color, What Color Do You Choose?

In November this year, Twitter changed its star icon indicating favorites to a lovely heart. While folks at Twitter called them likes, many twitter users started calling them hearts.  Akarshan, the product manager who led this effort at Twitter, “We want to make Twitter easier and more rewarding to use, and we know that at times the star could be confusing, especially to newcomers. You might like a lot of things, but not everything can be your favorite. The heart, in contrast, is a universal symbol that resonates across languages, cultures, and time zones. The heart is more expressive, enabling you to convey a range of emotions and easily connect with people. And in our tests, we found that people loved it.” Check out this video to see how the new like/heart feature works:

Around same time, Google and HP changed their logos, and key players like Myntra, Flipkart and others changed their color schemes. Colors like  ‘Red’, ‘Blue’ and ‘Yellow’ became prominent for several mobile apps. It left me wondering about  why we obsess with colors?

What's in a Color?

Color is an engaging and powerful form of communication. Color piques emotional interest in products. Many times, even the best design gets trumped if appropriate colors are not used. For designers, color is about expressing their emotions and bringing in certain emotions in users. For users, color is a key to creating perception about brands. For e.g. the color red might remind us of McDonalds, Pizza Hut or Virgin Atlantic.

Color Wheel

A color wheel, also known as color circle is an abstract representation of different colors around a circle that shows relationships between primary colors, secondary colors, tertiary colors etc. 

Newton's asymmetric color wheel, that correlates colors with musical notes and planetary symbols.

In 1666, Sir Isaac Newton’s work with white light led him to the discovery of the visible spectrum of light. So, the first color wheel dates back to Newton’s period (displayed in picture above). Newton’s experiments led to the theory that red, yellow and blue were the primary colors from which other colors are derived. Since then, several variations of this concept have evolved with time. A short history of the color wheel is represented in the picture below:

Image Credits : www.colormatters.com

The Color Theory

Image Credits : www.colormatters.com

According to color theory, there are three primary colors: red, blue and yellow. These cannot be mixed or formed by any combination of other colors. Mixing two primary colors together creates the secondary colors: green, orange and purple. Tertiary colors are formed by mixing a primary and a secondary color. E.g., blue-green, yellow-green, red-orange, red-purple and so forth. These days, color experts have come up with unique names for secondary and tertiary colors.

Color Harmony

In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order, a balance in the visual experience. When something is not harmonious, it's either boring or chaotic. Color harmony delivers visual interest and a sense of order.

www.colormatters.com has this to say about harmony between colors: There are many theories for harmony. The following illustrations and descriptions present some basic formulas:

1. A color scheme based on analogous colors

Analogous colors are 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 predominates. Analogous colors are excellent for creating color schemestry using three or four of them together, such as red, orange, and yellow, or blue, green, and yellow. 

2. A color scheme based on complementary colors

Complementary colors are any two colors which are directly opposite each other, such as red and green and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid. These opposing colors create maximum contrast and maximum stability. Although they have been used by artists for centuries, care should be taken when using complementary colors together. Although they will make each other vivid, used together they can also be difficult to focus on. 

3. A color scheme based on nature

Nature provides a perfect departure point for color harmony. In the illustration above, red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for color harmony.

The Role of Color in Visual Interface Design

Color plays many roles in Visual Interface design. These are the prominent ones:

Visual Cues

Colors, in their simplest role, provide visual cues to evaluate a situation or perform an action. Consider an example of a traffic signal – Red means ‘Stop’, Green means ‘Go’ and so forth. This rule is applied on mobile devices as well for Incoming Calls, where tapping on Red icon disconnects the call while tapping on Green, connects the receiver to the caller.

Relationships between Heterogenous Objects

Color can be used to establish relationships between similar and dissimilar objects. For example, buttons on a website or app could all be one color. Tab bar items or navigation links could be in another color and so forth.

Priority / Importance

Important / Critical items can be colored in strong, highly saturated shades to grab attention from users. For example, a highly saturated red button on an otherwise white background with light colored UI elements will attract users easily.

Book My Show app's approach to Colors

Book My Show's overall branding had Red as prominent color, mostly in header section on landing screen and other generic screens.

One striking thing is the method Book My Show has used to created memorability on the app. Movies are represented in sky blue, Events in orange, Plays in green and Sports events in Purple. If a user enters 'Sports' section, purple becomes a prominent color mostly for 'Action' buttons. For a user who has used the app a couple of times, it becomes easier to relate to specific events by associating them with colors. Note that this association works well if there are fewer items - in this case, there are 6 prominent colors. If there are more categories, adding too many colors to differentiate them might become an overhead. 

Closing Thoughts

Dan Saffer, in his book ‘Designing for Interactions’ states, “Knowing basic principles of the Color Wheel will help designers avoid clashing colors. The painter Josef Albers noted that a color doesn't exist until it meets another color. Designers should look at the edges of colors and see how they work together. White backgrounds tend to darken, and can even deaden, colors. Black backgrounds tend to lighten colors. Try backgrounds that aren't pure white or black, such as light gray. Very pale yellow backgrounds with black type are good for older eyes. Care should be taken to avoid an effect called chromostereopsis, which occurs when two colors side by side seem to cause both colors to vibrate. Red and blue together for instance, blue text on a red background will often create this effect, irritating viewers' eyes. In general, colored text on a colored background is difficult to execute well.”

The Button Color A/B test goes on, to prove how critical role, colors play in deciding the likeability of products. Concepts from color wheel helps designers create interesting palettes by applying underlying principles of color theory. Designers should become familiar with the color wheel which is helpful not only for choosing a color scheme, but also for avoiding color-related problems. 

So, the question to you, like the color game we used to play as kids is: "Color, Color, What Color Do You Choose?"

References

• http://www.colormatters.com/color-and-design/basic-color-theory
• Book : Designing for Interactions by Dan Saffer

Addendum on 1st Jan 2016

Added 'Book My Show' app's approach to colors.