Color in web design: how to cause the user desired emotion

Throughout human history, the master-artists received universal recognition due to the ability to work with color. In today's world do not receive less recognition specialists, who are able to combine colors in the commercial and business purposes - in advertising and web design.

The ability to use colors can be pumped up to infinity. It's a real depth of opportunities for human exposure.

We will tell you about the basics of color theory and color scheme, and then talk about the emotional impact of certain colors.

color theory

color theme, you can devote a whole book, so we will not take it entirely, and confine ourselves to useful information, which can be used in the development of interface design.

It can be divided into color theory into three parts:

Contrast

Each shade is the opposite, so to speak, of its "sworn enemy", which is the greatest contrast with this color. To find a color, you can use the color wheel. Simply select the color on the opposite side of the circle.

Addition

These colors do not always conflict with each other. Complementary colors emphasize each other, unlike the contrast. In the color wheel, such colors are to each other, such as complementary colors of purple - blue and pink.

Resonance

Each color is a certain mood. Bright warm colors (red, orange, yellow) filled with human energy, awaken it, cold dark colors (green, blue, purple), on the contrary, relax and soothe.

For example, BBC News Use the red navigation bar, to awaken the reader, to strengthen its excited state. Given the specificity of the site - a sensational news - red is a logical solution.

theory of color in web design - is more than just decoration. Color can change the perception of your site, and play a crucial role in your business.

Emotional perception of color

No one will deny the close interaction of color and emotion. And, of course, any web designer wants to use this effect to create a certain atmosphere for each site.

On the basis of several studies - analysis, published on the website Vandelay DesignAnd post about the colors in the Smash Magazine - we explain how colors affect emotions and help create UX-design.

It is important to remember that different cultures around the world have different perceptions of color. We will describe the emotional associations that are unique to Western culture.

Red

Emotions and associations: the power, importance, youth.

The most stimulating color, so energetically charged, it may even increase blood pressure. Red represents passion and power, it more than other colors attract attention, so often used for important warnings and announcements.

For example, red is very suitable site No Way NSAWhose purpose - to prevent the alleged threats.

Use a lot of red in the top of the page - this is a great solution because it calls attention to important information in the message. At the same time, people tend to quickly leave the "danger zone" of red color and scroll down. This, in turn, allows the user to show more content.

But this color can work against you, because it can cause aggression or overstimulation. If you want to create a more relaxed atmosphere, try to use red moderately and choose lighter shades of red.

Orange

Emotions and associations: friendliness, energy and uniqueness.

As the quietest of warm tones, orange can cause the whole spectrum of diverse emotions. As the basic color, it may be of interest and the brace, and as secondary - preserve these properties, but in a non-intrusive manner.

In addition, Orange helps create a sense of movement and energy. For example, it looks great on the cartoon website FantaWhich is suggestive of youth and movement. Color is associated with creativity, while maintaining a sense of the familiar brand.

Yellow

Emotions and associations: happiness, enthusiasm, archaism (darker colors).

This is one of the most versatile colors and the emotions that it causes, are dependent on the shade to a greater extent.

Bright yellow color adds energy, but without the severity and harshness, which is present in red. Medium shades of yellow colors evoke a sense of comfort, though still vigorous. Dark shades (including gold) provide a sense of antiquity, fill the space timelessness, wisdom and curiosity.

For example, on the main page of the web design agency Flash Media darker yellow tone exude energy, curiosity and authority. This color is perfect for companies that earn their consultations and they want to emphasize their professionalism.

Green color

Emotions and associations: growth, stability, finance topics surrounding the theme of the environment.

Green - a bridge between the warm and cool shades, but leans more to the cold. This means that green has a relaxing effect blue color, but also has a bit of vigor from yellow.

As a result, it creates a very balanced and stable atmosphere. Darker shades of green create the impression of wealth and abundance, both online Ameritrade.

Blue color

Emotions and associations: peace of mind, security, openness (lighter shades), reliability (darker shades).

As in the case of the yellow color, the effect is highly dependent on the blue hue. All shades of blue are versatile in terms of relaxation and security, but the bright colors associated with friendliness, and dark - with sadness.

Social networks like Twitter and Facebook are used more light and medium shades of blue, and corporate sites prefer darker shades of strength and reliability.

A great example - event design agency Van Vliet & Trap. Using blue color as the background, they are visually hinted at their knowledge and skills in floral design, but also created a sense of reliability and trust.

This is of great importance, as they work with the events, which is important for visual portion, for example with weddings.

Violet

Emotions and associations: luxury, romance (light shades), mysticism and mystery (dark colors).

Purple color has historically been associated with the royal grandeur, hints at luxury. Purple shades reflect the generosity and wealth as a whole, which makes them an excellent choice for fashion and luxury goods (even chocolate, for example, CadburyWho chose his brand color).

Lighter shades such as lavender (purple pink with addition) evoke thoughts about romance, whereas the dark hues appear more elegant and mysterious.

The black

Emotions and associations: power, sophistication, nervousness.

The most powerful of the neutral colors - black - appears on virtually any website. It can cause different associations depending on the accompanying color or dominate them, if used excessively.

The strength and neutrality of black makes it an excellent choice for large blocks of text, but the main color it can create a feeling of nervousness or even be associated with evil.

For most sites, black is used to create a sense of elegance. The combination of black and white minimalist design gives the impression of elegance and style, both on site Dream and Reach Company BOSE.

White

Emotions and associations: purity, simplicity, goodness.

In Western culture, white is associated with purity, goodness and innocence. This color is often used for the background of minimalist and simple sites.

In addition, none of the colors will not allow to draw so much attention to the other colors like white. For example, in website Awwwards Kloina winner Toshev all his works are laid out on a white background, which only allocates illustrations, and creates the impression of an elegant gallery.

Grey colour

Emotions and associations: neutrality, formality, melancholy.

Despite the fact that in some situations the gray can create a gloomy and melancholy atmosphere, it is still often used by professional designers.

The thing in shades: alternating them, you can get all the emotions caused by both in black and white. In general, the gray - is a powerful tool in the right hands.

But in combination with more vivid colors in gray background design it seems modern but not bleak, such as Awwwards.

Beige

Emotions and associations: it conveys the character of the other colors.

By itself, beige rather dull and expressionless, but he has a remarkable property: beige takes on the character of colors that surround it. Therefore, if it is intended not to express restraint beige serves as a background or the second color.

Darker shades of beige create a sense of tradition and mundane, give a sense of the texture of paper and lighter shades seem fresher and more modern.

For example, on-site restaurant Dishoom light beige color around the names and darker edges give the impression that this restaurant - a fresh perspective on traditional cuisine.

Ivory

Emotions and associations: comfort, elegance, simplicity.

Ivory and cream produce almost the same emotions as the white. However ivory warmer (or less sterile) than white, which creates a greater feeling of comfort, while maintaining minimalism.

You can use ivory instead of white to soften the contrast between it and the darker colors. For example, the site Art in My Coffee brown-orange elements are placed on an ivory background (which looks grayish) that retains a feeling of warmth.

Color spectrum

Each site has a range of colors, in which the primary colors used to fill a larger space. As we said before, the use of these colors affects the mind and mood mostly subconsciously. So choose them carefully.

Despite the fact that there are many ways to combine the colors, we will focus on the three most successful and commonly used.

Triad (triple harmony triangle)

Triad - the main and most balanced system of three colors. It uses resonance and addition of colors, but there is a complex contrast, because of what the triad is the most reliable range.

On a color wheel of 12 colors, choose any three, located in 120 degrees from each other: one color for the main background and two for content and navigation bar.

Double complementary system

This range is more difficult to implement, but it may be cost-effective solution. It used four colors: two contrasting and two additional.

See how the page looks remarkably Florida Flourish, based on such a scheme. Red and green color contrast in plants and blocks of text, and blue background and orange desert effectively complete the picture.

Analogs (sequential system)

Gamma similar colors mainly uses complementary colors. This allows most clearly emphasize some qualities and cause certain emotions.

For example, a combination of red, orange and yellow highlights the vigor and vitality. Use of such scale is very simple, but it's hard to choose which color will be included in the combination. Their effect will be exaggerated, so it can not be wrong.

For example, the use of blue, turquoise and green colors in the design of the site Blinksale It created an atmosphere of peace and tranquility. Notice how the yellow color used to emphasize important points.

This is just the basics of color theory, which can help to create an impressive custom design, and there is no limit to how far you can go in terms of the colors on your site.

Tools helper to select a color

Fortunately, there are several tools that help bring color theory into practice. Try these palettes to not have to start from scratch in the creation of his:

1. Adobe Color CC, Formerly known as Adobe Kuler. This is one of the most reliable tools in choosing colors.
2. Paletton. If you need a simple tool for quick color selection, Paletton is perfect.
3. Flat UI Color Picker. The perfect tool to select the user interface colors.

And if these instruments do not suit you, here's another 28 sites with palettes and different tools for color selection.

A direct relationship between color and emotions

Remember, users rarely notice and appreciate the color of the background, navigation bar, individual parts, but it does not mean that the color is not affected by them. Just this happens subconsciously.

User experience any emotion, is the relationship to the site or brand, it makes certain actions: scroll down to click on buttons that prompt for action, or, conversely, not notice them. And color plays in all of this a huge role.

If you have your advice on the use of color in web design, please share in the comments.