Since the Middle Ages, scientists have documented the emotional effects of colors. It should be no surprise that different colors evoke different emotions, seeing how it has seeped into our everyday language (“feeling blue,” “seeing red,” etc.).

To master a naturally visual medium like experience design, you must also master colors. Unfortunately, not everyone has the time to dive into the technicalities of color theory or art.

To get you started, we’ve compiled a quick reference guide that covers the basics of each color’s unique effects, and how they relate to UX design.

Red

Aggression, Importance, Passion

One of the most powerful colors, attributed simultaneously with love and war, red offers the proven physiological effects of increasing blood circulation, quickening breathing, and raising metabolism. Red elements are more noticeable, adding a sense of importance, whether good or bad.

Just think of the red carpet.



Source: Playtika

Use red carefully, as a little goes a long way. It’s a great highlight for individual elements that need attention, but in excess it will inhibit relaxation. Light red draws out its energy, good for themes like youth and love (see the entry for Pink below), while dark red emphasizes power and durability, like blood or bricks.

Orange

Energy, Playfulness, Affordability

As you might have guessed, colors vary in degrees by the placement on the spectrum, so colors like red, orange, and yellow (“warm” colors) have similar effects but different levels. Orange shares red’s stimulating aspects, but to a lesser degree. This gives it an energetic aura without red’s aggression.

Source: Epic Creative Agency

Orange is a playful, upbeat color, great for casual sites but not always the top choice for enterprise sites. You’ll find many different interpretations of orange: some say it encourages impulsivity, others say it increases appetite (for culinary sites), while still others say it denotes cheapness, for better or worse.

Yellow

Friendliness, Happiness, Attention

Oddly, yellow represents both happiness and anxiety, activating both in the brain.

Like other warm colors it’s generally energetic and upbeat, but brighter shades dial up this effect, making it a color often used for warning signs.

Source: Lunar Gravity



If you use yellow, you can try softening its brightness for a more mellow experience. Light yellow reminds users of sun and happiness, and dark shades (like gold) are more serious and also give the impression of antiquity.

Green

Growth, Nature, Success

The most obvious associations with green are plants (and by extension, nature).

But more than that, green bridges the gap between warm colors and cool colors (blue and purple), making it the most balanced color.

Source: Massis Tea

Green’s balance lends itself to calls-to-action, using the visibility of warm colors by the relaxing qualities of cool colors. Its nature connotations give it a sense of growth and prosperity, moreso in the Western world for its association with money.

Blue

Trust, Comfort, Relaxation

Without a doubt, blue is one of the most important colors in UI design, and one of the most frequent. This is partially thanks to its range, where light blue and dark blue offering different characteristics.

Its associations with water gives it a calming effect, which leads to friendliness that “invites” users into a site.

It’s no coincidence that the two biggest social media outlets Facebook and Twitter both use blue as their core color. This relaxing friendliness also translates into inherent trust, which is why it’s often used by banks — think of the branding for CitiBank, Chase, and Capital One.

Source: Evolve Wealth

Light blue accents the friendly qualities and can even be energizing if bright enough, while dark blue is more somber, emphasizing the security and trust aspects (which is why dark blue suits are popular in the business world).

While blue offers a wealth of benefits, it comes with one distinct limitation: it’s a proven appetite suppressant.

Purple

Luxury, Romance, Mystery

Historically linked to royalty, purple retains this air of luxury today. Purple insinuates that a product or site is high-end, even if it’s not — the opposite effect of orange.

Source: WooView App

Because purple cycles back to red on the spectrum, it shares some of red’s romantic features, especially lighter shades like lavender. Deep purple, on the other hand, brings to mind mystery, and more sensual undertones.

Pink

Femininity, Innocence, Youth

Extending outside of the primary colors, pink is both unique and common enough to make it worth mentioning.

Pink is most known for its associations with femininity, although it has strong ties to youth and the innocence that goes with it. However, lately it’s being used independently of gender-targeting.

Source: No Divide Studio LTD

Pink is often the color of sugary sweets, so the color gives an air of playfulness, almost childishness. As a shade of red, it also can be used for romantic themes, leaning towards “young love” rather than more classic romance. Pink doesn’t always mean feminine.

In fact, overusing pink for its “feminine qualities” can easily irritates users by pandering to traditional gender roles.