Color Theory

Introduction

Color is a crucial aspect of any interface as it sets the tone, evokes emotions, and influences user perception. As such, the choice of color can impact usability and the overall user experience. With that said, there is a common misconception that the choice of colors for UI depends on the designer’s aesthetic preferences and appeal. This article serves to debunk the misconceptions surrounding this notion and show that the decision-making process for generating and designing these visual elements has more layers to it than it seems.

Importance of Color on User Experience

Color psychology is the study of how colors affect perception and behaviors, whether that be under the user’s conscience or not. The moment our eyes perceive color, they connect with the brain which gives signals to release hormones responsible for the shifts in mood and emotions; research has shown that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. As such, color psychology forms the basis of how designers choose colors for a product based on what we want to convey.

Meaning of Colors and Association to Design

Every color is associated with an emotion that it elicits. In this documentation, I will cover the 6 main colors - red, yellow, green, blue, black, and white - and their effect on the product.

• Red: evokes passionate, powerful, or intense emotions and is linked to both positive and negative states of mind, such as love, confidence, passion, and anger. In design, incorporating red can effectively capture users’ attention. However, red should be used in moderation to prevent potential adverse reactions. For example, Tinder incorporates a lot of red in its design, to elicit love and passion.
• Yellow: evokes inspiration and confidence and is the easiest color to visibly see. Yellow is also known as the color of happiness which symbolizes joy and warmth, serving as a powerful psychological cue. In design, too much yellow could bring negative reactions of feelings of anxiety or fear.
• Green: evokes calming and renewing energy, as well as correctness and positivity. Green also evokes envy and jealousy, as it is associated with notions of wealth and materialism. In design, the context should be considered when using green in combination with other colors.
• Blue: evokes feelings of trust and reliability. In design, it can be used to convey trust but should be incorporated in moderation as it is also associated with feelings of distance and sadness. Examples of applications that use blue to convey a sense of trustworthiness and reliability are Facebook, IBM, and Twitter.
• Black: has many meanings; it is associated with mystery, and death, and can convey meanings of tradition, seriousness, or modernness. Context and color combinations determine the vibe it gives off. In design, black goes well with everything hence is largely used as background color. It is also often used to set contrasts. For example, Uber follows a very black and white color scheme for a modern feel.
• White: has meanings of purity, innocence, and clarity. White can symbolize newness and motivate people to generate new ideas, yet too much can cause feelings of isolation and loneliness. In design, white is commonly used as a background color to enhance readability.

Nuances of Color Choice

While colors can take on general meanings, as shown above, designers have to keep in mind that perception is bound to differ among individuals. In particular, factors such as age, gender, and culture can work to shift people’s perceptions.

• Age: Mental and physical changes across our lifetime can shift our preferences and attraction to colors. For example, yellow is a color that is liked by many children, but less shared among adults. Faber Birren also explains it in his work: “With maturity comes a greater liking for hues of shorter wavelength (blue, green, purple) than for hues of longer wavelength (red, orange, and yellow)”.
• Culture: Cultures define and interpret colors differently. The meanings listed above are related to Western perceptions of color, which may differ from countries across the world. For example, while white may be associated with purity in Western cultures, it denotes connotations of death and mourning in numerous Asian cultures.
• Gender: Different genders may favor different colors, a phenomenon whose roots can be traced back to evolutionary biology and psychology. For example, research has shown that females evolved to prefer pinkish/reddish color because of their role in foraging ripe fruits and caring for the young.
• Trend: Similar to fashion trends, there are “it” colors that pop up every season. Designers should think about the longevity of these trends, and ask themselves, will the colors make a brand outdated in a year?

Other factors to consider are personal experience, mood, status, and so on. The important point to recognize is that there are multiple forces acting on one another that contribute to how an individual perceives color, and that it is crucial to understand the target user group and tailor your design to the group to create a successful product.

Color Harmony

Color harmony describes the arrangement of the colors in a way that is the most attractive and harmonious for a user’s perception. When colors are organized, feelings of pleasantness and calmness arise, while chaos and disgust result from disharmony. Designers have formulated some basic color schemes that work effectively, which will be highlighted in this section.

This is the color wheel, which will be helpful in our analysis of color schemes.

Monochromatic

Monochromatic is based on a singular color, with various shades and tints of it. It is hard to fail with a monochromatic scheme since you are only manipulating the saturation and brightness of the same color.

Analogous

Analogous colors are three colors next to each other on the color wheel, which are composed of a dominant color, a supporting color, and a third color which is a mix of the two first colors. Analogous color schemes are often found in nature and create a calming display with no tension in the palette. This color scheme is used in design where contrast is not required, such as the background of images or banners.

Complementary

Complementary colors are drawn from two colors on the opposite side of the color wheel. The result is a high-contrast color combination that’s bright and that pops, opposing analogous schemes. An example would be red and green. In design, complementary colors are used for emphasis as they focus the attention on a particular object.

Triadic

Triadic colors are three colors that are equidistant on the color wheel, such that there is no clear superiority of one color. To use a triadic harmony successfully, the colors should be carefully balanced such that one color dominates and the other two are used for accent, adhering to the 60-30-10 rule. In design, triadic schemes are used to curate a lively and cheerful space, suitable for playful or colorful user interfaces.

Short Analysis of Successful Products

CTA (Call-To-Action) Buttons

The goal of call-to-action buttons is to stand out and capture the user’s attention. Using the ideas of color harmony and color theory, we know that using complementary colors or bright colors on a white background can help draw the user’s attention. In particular, we want to bring out two different kinds of contrasts:

• contrast between the button and the background
• contrast between the button and the text

We also want to pick colors that denote the appropriate feelings that the associated actions represent.

Example

Since creating a repository is something that is incentivized by GitHub, their objective is to draw users’ attention to the button as much as possible. GitHub uses the color bright green to show contrast against the otherwise white background, directing users’ focus toward the button. The color green also evokes feelings of correctness and positivity, which encourages the users to click on the button.

On the other hand, deleting a repository is not something that is necessarily encouraged, and can have negative consequences. GitHub portrays this idea by using the color red to evoke feelings of caution and negativity, and to alert the users that this action is dangerous. In addition, the deletion buttons do not stand out from the background as much as the green button (shown above) did, as they had less contrast to the background. This is to prevent drawing the users’ attention to these potentially dangerous and consequential actions.

Screens for Mobile Games

Mobile games usually have the intention of telling a cohesive story, hence often benefit from having harmonious color schemes. In this example, we will briefly explore the game Candy Crush and its considerations on color theory in design.

From the beginning, Candy Crush creates a sweet and kind feeling (like candy!), through its generous use of the color pink. It uses various shades of pink to create a harmonious scheme, as well as the color green that is somewhat opposite to pink on the color wheel to create a contrast in the maps. To draw the user’s attention to the instructions, the game darkens the background and uses a bright color to create contrast and effectively signify a call to action. In the game, the colors of the candies are picked such that they use a tetradic color scheme, that is, selecting two sets of complementary colors from the color wheel. This allows users to distinguish between the various objects, which can help facilitate their thinking.

Tips for Color Decision

• Be mindful of the colors you choose – they can have a psychological impact on the users.
• Ensure that your design and its color palette effectively communicate the intended message and atmosphere.
• Learn your target audience. The color preferences and meanings may depend on factors such as age, gender, and culture.
• Remember that color theory is part science and part art; just because a color is associated with a particular feeling does not mean it can not be perceived in other ways in combination with other colors, or other design elements.
• Call-to-action buttons perform well under complementary color schemes that bring out their contrast.