NEW PERSPECTIVE

Color Theory for Today’s Digital

Strategic ways to drive business results with color

I’m a storyteller, and I like to work in metaphors. I believe it makes for entertaining reading, and provides a sense of simplification. With that being said, please bear with me.

When I was younger, I had few specific things that really captured my attention. Growing up in the 90’s, I was naturally captured by MJ, and the Chicago Bulls movement, like most. I also had a big family that needed everyday help, so I quickly learned to embrace cooking, and pitch in when I could.

This resulted in me receiving a Michael Jordan spatula for Christmas, lol.

The whole point of this micro story is just because I like cooking and basketball, does not mean I want or need a Michael Jordan spatula. The same argument can be made for color, I am naturally drawn to blue hues paired with a complimentary yellow in a branding environment. It’s something I have noticed over the years, perhaps it’s the male in me. But this does not mean I want or need a blue and yellow house or car. Am I now the blue and yellow man?

In connecting this to our work, it is important to remember that the blue and yellow that I may be drawn too, is not necessarily the design option for all projects.

Many of us have a strong sense of color, it surrounds us in every way, every day. Green means go, red means stop. We see this with the clothes we wear, the walls we paint, and cars we drive. We subconsciously compartmentalize the placement of color, in a way, it’s predetermined. So, where does that leave us?

Phillip Padilla

hello@philpadilla.com

"Color is a power which directly influences the soul."

Wassily Kandinsky \ Abstract Artist

It’s time to disregard our subconscious influence on the colors we select, and to adopt the perspective of our targeted demo. The key is to abandon your predetermined bias towards colors, and to apply intellect and strategy in the business space.

When it comes to branding and user flow in a digital environment, the process of color selection can run much deeper than an outsider might think. Color plays a significant role in purpose driven design, when done well, it is goal oriented, and used sparingly, much like a garnish on a fancy plate.

The key to creating a harmonistic design system that employs color more effectively, is to gain a better understanding of how the colors are formed, and how they relate with one another. So let's have a look at the color spectrum, and break down the emotional triggers that are associated with each hue.

Red - the color of warning, passion and warm energy. It is the most dynamic color in our spectrum and can trigger contrasting emotions, hence the passion/danger. Red has been heavily associated with hunger, and increases the heart rate in heavy doses. It delivers on the excitement chart and can be used strategically to showcase a problem. Some big brands that truly showcase the strength of red, and its association with hunger: McDonald’s, Wendy’s, and Coca Cola to name a few. These businesses marketing budgets are through the roof, and we all know them well. They play a heavy hand in the red department, and it’s not a coincidence, it’s a strategy.

Orange - makes one feel energized, enthusiastic and warm. Like red it draws attention and displays movement but not in an overpowering way. It is known as being aggressively balanced, it radiates energy, inviting, and friendly. Often associated with proceeding with caution like yellow, and used in Call-to-action’s, to tone down the urgent red approach. Some brands that utilize the inviting, friendly strengths of orange: Amazon, Home Depot, and Nickelodeon.

Yellow - commonly associated with happiness and spontaneous freedom. It is often grouped with appetite, and it's the most energetic of the warm color group. Be warned, yellow has a high reflection rate, suffering in poor contrast in the incorrect environment. When contrast is provided, it can be very powerful in small doses, and instantly demand ones attention. Think of the National Geographic yellow frame they are known for.

Green - healthy, optimistic and refreshed. It symbolizes a lot of great things, wealth, health, new beginnings. Green is very easy on the eyes, offers balance and a relaxed setting. It is commonly associated with healthy living, growth, security, health, and natural categories. The green list is a long one. Here is the top contenders that come to mind: Subway, Starbuck’s, John Deere, Tropicana, and Whole Foods.

Black - the king of balance and luxury. It offers sophistication, and seriousness to a design when used well. It can evoke raw power, elegance, neutrality, professionalism and simplicity. In some cultures it can be associated with death and sadness, just like white.

Blue - makes you feel safe and relaxed. Heavily used in corporate branding because it is considered the most gender balanced color in our spectrum. It evokes feelings of calmness, trust, and security. Ask Facebook and Twitter. The blue spectrum dominates branding in a corporate environment, mainly due to its gender free accessibility. Besides the social giants mentioned above, here is a few more to make my point: General Electric, AT&T, Intel, Hewlett Packard, Ford, Nokia, Samsung, Philips, PayPal, Nivea, Visa, BOA. This list could truly go on for days, and you’d be amazed at how widely blue is used in brand categories across the board. Kudos to its gender free relatability.

Pink - playfully romantic, pink represents femininity, sensitivity and things that we hold close to our heart. Pink can be sweet, cute and charming. It’s an interesting color because it’s so suggestive. Many will think of brands such as Victoria Secret’s Pink, Barbie, or Cosmopolitan. But the brands that lean the other direction such as: T-Mobile, Lyft, LG, or Pepto Bismo are the ones that raise my eyebrows. Pink can be gentle, and it can pop, which is the exact point of allowing pink to sit in the driver’s seat. It demands attention in our attention economy.

Purple - bring on the creativity. Purple is associated with royalty, wealth and mystery. Lighter hues are commonly used to soothe and bring a calm sense to design. Often used in the beauty industry, high luxury and where romance is needed. Prime example, Crown Royal, the exact definition of royalty and wealth projection.

Brown - can be a contrasting emotion. Often associated with health, natural, stability and support. It's a warm friendly color that represents the old times and well-established entities. This one may make you think for a moment, besides the usual suspects of UPS and Hershey. It’s heavily used in the indulgence sector: Cracker Barrel, M&M’s, Dreyer’s, Godiva, Nespresso. Makes sense the more you think about it. UPS is due to the relation with cardboard, might not mean much today, but when they started, cardboard represented a whole new approach to mail.

White - brings simplicity and minimalism to the design. It offers a simple clean look. In some cultures it can be associated with negativity. Most commonly the color of innocence.

Next, we’ll dive into sharpening our color toolbox to improve conversion and advance usability.

So, let's talk about the ‘how’.

The emotional perception of color has high emphasis in branding, but other aspects must be considered. Let's take McDonalds for instance, their strong red and yellow has been proven to stimulate an appetite, but does the appetite stimulation still exist when the logo is black & white? Not so much.

In a digital environment, color wears many hats. While branding sees color as mood and perception, UX design sees color as a consistent system across all digital platforms. It has a job to do. Use cases and specifications dictate and determine its primary function, its purpose in the system is job specific. Form follows function, if it doesn't have a purpose within the system, then remove it.

When selecting a color palette beyond branding, it's important to think through several key components, such as UI Semantics and Call to Action (CTA’s) systems that can stand on their own. Meaning it should compliment or accent the primary palette, not be part of it. For instance, McDonalds would be best served not using red or yellow as their primary CTA color system, it competes too heavily with the logo. Particularly in a small, mobile environment. Just ask Boeing Employee’s Credit Union (BECU), who recently resolved that issue in their app. The BECU logo is button shaped, and the CTA’s used to be the exact same color. In a mobile setting things start to get tricky, and banking CTA’s need to be crystal clear.

Color plays a heavy role in establishing a framework within a design system. The use of subtle color, typically 10% or less opacity of a primary brand color, which starts to shape out our accent colors. They compliment the color system, not clash. Framework colors help tremendously with content hierarchy and organization, it offers compartmentalization to the layout.

Color also offers an opportunity for an unconventional approach, which can be a key differentiator and a nice change of pace. When selecting accent colors, the easiest place to start is with color tints on the 10s. 90%, 80%, 70% etc etc. This follows the Material UI color system when applying accent colors. It establishes rules, and a consistent system for color application on all platforms.

I like to utilize the 60-30-10 rule. “Google it”. It is a simplistic theory of color combinations, ratios and balance. This rule helps nurture a well balanced visuals, and if you follow this golden rule you can avoid the rabbit hole of color.

Color is a power which directly influences the soul.

Phillip Padilla

hello@philpadilla.com

Color Theory for Today’s Digital

Phillip Padilla

Phillip Padilla

The Power of Typographic Influence

The Creative Process

Nailing the Discovery Phase

Color Theory for Today’s Digital

Phillip Padilla

Phillip Padilla

Related Posts

The Power of Typographic Influence

The Creative Process

Nailing the Discovery Phase