Natalia Fedorova, Regional Coordinator

1 October 2020

Color Theory 101: Color Symbolism and Color Relationships

Even though UI/UX designers do not make clothes or highly seasonal marketing materials, they should have a solid grasp of the color theory. Apply it well to catch the client’s attention, and they will be happy to let you try and captivate the customers. Let’s look at the key aspects: color symbolism, color relationships, and color palettes.

Color Symbolism

Color Perception

Color symbolism dates back to much more than design. After all, colors are one of the primary tools in the literature. Metaphors involving blood and wine have been around since before most people would be able to read them. For UI/UX purposes, we will stick to visual arts.

Color theory practitioners manipulate people by evoking emotions and feelings that we associate with particular colors—while attaching those feelings to a brand. Most insurance services utilize green since we associate that with security. For similar reasons, green has been a popular choice for companies in the recycling industry. 

Color Warmth

This one is not to be confused with color temperature measured in Kelvin scale. When we talk about calm and warm colors in color theory, they are just our interpretation of how these colors compare with natural light. 

Warm colors are basically on a sunshine scale. They include red, orange, and yellow. Those colors do not necessarily have positive connotations: after all, sunsets may invoke quite mixed feelings.

Cold colors are reminiscent of cloudy, overcast, or outright rainy days. They are violet, blue, and green. Cold colors are not necessarily negative either: as I mentioned, green is a popular choice for various feel-good businesses.

Color Meaning

Red is perhaps the most polarizing color. It embodies both love and hate, passion and rage, power and danger. No wonder you see Tinder trying to capitalize on the contrast.

Orange conveys excitement, freedom, adventure. This is an inviting cover especially appealing to extraverts. Coca-Cola often utilized the sense of community in their ads, so orange was the natural choice for the Fanta logo.

Yellow is as close to sunshine as it gets so joy, happiness, and optimism are the natural associations. Speaking of sticking close to nature, National Geographic has a yellow logo. 

Violet draws to royalty, spirituality, reflection. This proved to be a perfect fit for the Premier League's new logo, with the lion, king of animals, wearing a crown. 

Blue is the color of calmness, intelligence, wisdom, loyalty. It is a popular choice in banking and finance: VISA, PayPal, American Express all use blue as their primary color. Blue was a smart choice by Boeing as well: they are certainly up there in the sky. 

Green is about harmony, freshness, rejuvenation, growth. A lot of clinics and other medical institutions turn to green. Actually, the new Starbucks owner Howard Schultz introduced green to the branding as he wanted to convey these very emotions. 

Color Relationships

Unless branding and promotional materials have no text at all, a UI designer will now get away with using just one color. You would at least have to give texts a different color because it has to contrast with the background. Naturally, color relationships are a major aspect of color theory. Let’s take a look at the relationships observed on the color wheel.

Complementary Colors

Complementary colors are opposite each other on the color wheel. A combination of two complementary colors creates high contrast and draws attention. Take a look at the Mountain Dew Logo. 

Analogous Colors

Analogous colors are three colors next to each other. They work great when a designer wants to stick to a particular color group but still have room for contrast or content segmentation with similar colors. A prime example here is Mastercard with overlapping red and yellow circles.

Triadic Colors

Triadic colors are three colors with the same distance between them on the color wheel. This is a very popular choice in interior design but there’s an international company using a triadic color scheme as well. It is Burger King.

Split-Complementary Colors

Split-Complementary Colors are a variation of triadic colors. It features two colors with a gap between them and the color which is opposite the gap on the color wheel. You can see that on the 7-Eleven logo, where orange and red contrast with the green.

User Experience and User Interface design are much more than just colors and their combinations. If you want to learn typography, composition, prototyping, visual hierarchy, and more, we’ve still got a few spots left for the Fall course