How to create the right emotions with color in web design

Across human history, master painters and other artists have earned global recognition for their ability to manipulate colors. In the modern era, the artform now opens up a lot of new commercial and business applications, first in advertising, and now in web design. With an almost bottomless depth, the skill of color usage can be improved and refined endlessly.


Let's explore the emotional effects of certain colors.

(Scroll down or pick color in the menu)

Red

Promotes: power, importance, youth

The most stimulating color, red is so energizing it has been used to increase blood circulation. Representing passion and power, red is the color that will attract the most attention, which is why it is commonly used for warnings and important notices.

Red is very good to use when your purpose is calling alarm to a perceived threat. Clever trick is using red in the first section of the single-page site, because it calls attention to the primary message while physiologically inducing people to “get out of the danger zone” by scrolling downwards. This, of course, only makes the user engage with more content.

However, this could work against you, as red can incite anger, or at least overstimulation. If you’re going for a more relaxed atmosphere, use it sparingly (or at least in a lighter shade) or not at all.

Orange

Promotes: friendliness, energy, uniqueness

As the most muted of the warm colors, orange is uniquely versatile. As a primary color it can be engaging and energizing, and as a secondary color it also retains these properties in an unobtrusive way. Orange also helps to create a sensation of movement and energy.

Yellow

Promotes: happiness, enthusiasm, antiquity (darker shades)

Yellow is one of the more versatile colors, depending on the shade.

A bright yellow is the most energetic of the colors, without the severity of red. Middle shades of yellow give a sense of comfort while still feeling invigorating. Darker shades (including gold) can give the impression of antiquity, and lend an air of timelessness, wisdom, and curiosity.


Darker shades of yellow exudes energy, curiosity, and authority.

Green

Promotes: growth, stability, financial themes, environmental themes

Green bridges the gap between warm and cool colors, though tends to be more of a cool color. This means green has the same relaxing effects of blue, but still retains some of the energizing qualities of yellow. As such, it creates a very balanced and stable atmosphere. Darker shades give off more of the money/affluence feelings

Blue

Promotes: calm, safety, openness (lighter shades), reliability (darker shades)

Like yellow, blue’s meaning varies greatly depending on the shade. All blues are universally relaxing and safe, but the lighter shades will seem more friendly while the darker ones seem more somber. Social media sites like Twitter and Facebook take advantage of light and medium shades, while corporate websites prefer dark shades’ tones of strength and reliability.

Purple

Promotes:luxury, romance (lighter shades), mystery (darker shades)

Historically associated with royalty, purple retains the tone of luxury, even to the point of decadence.

Purples suggests lavishness and wealth in general, making it a popular choice for fashion and luxury goods. Lighter shades like lavender (with pink hues) are considered romantic, while darker shades seem more luxurious and mysterious.

Black

Promotes: power, edginess, sophistication

The strongest of the neutral colors, black exists on almost every website.

It can take on varying characteristics depending on its supporting colors, or dominate all of them if used in excess. Its strength amidst neutrality makes it the color of choice for long blocks of text, but as a primary color can give the impression of edginess, sophistication, or even evil.

For most websites, black is used to create an instant feeling of sophistication and timelessness. The feeling of elegance is especially strong well when paired with white font and set against a minimalist layout,

White

Promotes: cleanliness, virtue, simplicity

White is the color most associated with virtue, purity, and innocence in Western cultures.

Minimalist and simplistic sites most often use it as a background. By drawing the least attention of all the colors, white is the best for accenting the other colors on the page.

This works particularly well for the portfolios of artists and photographers. The white background draws attention to  artworks, while creating an art-gallery aura of elegance.

Gray

Promotes: neutrality, formality, melancholy

While in certain situations it can seem brooding or sad, gray is nonetheless a popular choice for looking traditional or professional. However, one of the greatest advantages of gray lies in varying its hues — changing the shade can give you a customized mix of properties from white and black, a powerful tool in skillful hands.



When paired with brighter colors and presented in a flat UI, the grey background feels much more modern than it does somber.

Beige

Promotes: traits of surrounding colors.

Beige is the wildcard of the colors, as its main use is in drawing out other colors. On its own, beige is dull, though this can be used to symbolize humility. However, it will take on the characteristics of the colors around it, making it an interesting design tool. For these reasons, beige is almost always a secondary or background color.

Darker shades of beige will create an earthy and almost paper-like texture, while lighter shades feel fresher. In this case, the lighter shade around the brand name, which darkens outwards, help create the feeling that the restaurant is a fresh modern take on earthy cuisine.

Please note that different cultures around the world perceive colors differently.
Here described emotional associations that are most relevant to Western cultures.
Resource: http://tnw.to/a4hmr