Color is one of the most powerful tools in a designer's toolkit. With its help you can attract attention, create a certain mood, influence emotions, perception and behavior.
Did you know that among the reasons that motivate customers to purchase a certain product, 90% are due to color? Or that color magazine ads are 26% more likely to be noticed than black and white ones?
The conclusion is clear: using the right color will help you achieve success. But a natural question immediately arises: how to choose the right color? To answer this, you will have to analyze several important aspects:
- color associations
- differences in color perception between men and women
- problems associated with color vision impairment.
Black
Black is another very versatile color. It can be modern or traditional, exciting or relaxing. But if you use black as a contrasting color, that is, in a ratio of 1:6, 1:8 to the main one, you risk introducing drama and sadness into the perception of visual advertising materials by your clients.
Here is an example of a landing page well thought out in terms of colors - what do you associate these colors with? — https://cashflow-igra.ru
Psychology of Color
Color not only helps to provide more objective information about a product, it can also have a powerful psychological effect. The same colors can act differently - in particular, it depends on the nationality and place of residence of the person. Let's dwell on color associations among people of the Western world.
Red color in psychology: danger, importance, passion
Red is the color of fire and blood. One of the most powerful colors in terms of impact, which is associated with both love and war. The well-known expression to see red (literally translated from English as “look at red”) means to become enraged, to lose one’s temper.
This color has a strong emotional impact. It may raise your blood pressure or increase your breathing rate.
Red color is energetic and impulsive. It is associated with speed and strength. This is why Netflix and YouTube use it as their dominant color.
The ability of red to attract attention is well known. In design it is often used as a powerful accent color. Similar to red carpets at awards shows, the color red can be used to highlight important details on a website page.
Orange color in psychology: confidence, energy, optimism
Orange is a very energetic color - like red, it excites, but to a lesser extent. It has an energetic aura, but without the aggressiveness inherent in red. Can create a joyful atmosphere.
On the home page of Hipmunk, a flight search engine, the orange search button immediately catches your attention.
Like red, orange has the ability to attract attention, so it can be used to highlight important details such as a call to action (CTA) button. Some people think this is too simple a solution, but many apps and websites often use this trick, which is “cheap” in a good way.
Yellow color in psychology: sun, happiness, attention
Oddly enough, yellow is associated with both joy and anxiety. It is often used to focus attention. An example would be warning signs. The color yellow can be associated with danger, but to a lesser extent than red.
Yellow color immediately attracts attention when contrasted with black. The Breitling watch brand used this property when developing its official website.
The combination of yellow and black works especially effectively. A striking example of this is the New York taxi.
Green color in psychology: nature, development, success
The color green is naturally associated with nature. It is associated with vitality and growth, as most plants on earth are green in color.
Green call to action button.
In design, this color is often used to create balance and harmony. However, to achieve balance, designers should consider color saturation.
Rich green shades attract attention due to their energetic, stimulating effect. This is why they are often used for call to action buttons.
Blue color in psychology: comfort, relaxation, trust
Blue is the color of the sea and sky. One of the most significant and frequently used colors in user interface design. At the same time, the visual perception of design developments will largely depend on the correct choice of shade:
- The light blue shade is associated with coolness, freedom and tranquility. Calmness can develop into trust, which is why this shade is often used in jars.
- Dark blue shades are great for projects where stability and reliability are very important.
The color blue is often associated with stability.
Purple color in psychology: luxury, spirituality, creativity
The natural color purple is rarely found in nature, so it has a special role in design.
Historically associated with royalty, the color purple is still associated with luxury today. It subtly hints at the high quality of the product or site (even if it is not).
Most young people consider purple to be the color of happiness.
Interestingly, 75% of children prefer purple to all other shades.
Black color in psychology: strength, grace, sophistication
Black is the most powerful of all colors. It immediately attracts attention, which is why it is most often used for texts and accents.
The black “Get started” button is one of the first things you see when you visit the Squarespace website.
When used as a dominant color - for example, to create a background - black can evoke original associations. With its help, it is easier to achieve a sense of sophistication and mystery in design.
White color in psychology: health, purity, chastity
The color white is often associated with purity, purity and virtue. By using white associations with health or the development of innovations, you can emphasize the safety of a promoted product from the field of medicine or high technology.
White areas create space around design elements, helping to highlight or separate them from each other.
In design, white perfectly sets off the colors adjacent to it, making it popular as a secondary color. Proper use of white margin is a powerful design tool. Consider, for example, the Google search page. White color gives more expressiveness to other shades.
Gray: formality, neutrality, professionalism
Gray is a symbol of neutrality. It matches easily with other colors. As a main background, gray creates a feeling of formality, which is not always a bad thing. Like white, gray background sets off other colors well.
Gray is usually paired with brighter color accents. On the Dropbox website, gray is used to highlight call-to-action buttons.
Gender and color
There are no definite norms yet regarding which colors are considered purely feminine and which are masculine. There are only the results of studies conducted over the past eight decades, which allow us to make some generalizations. And while the data is mixed, one conclusion is undeniable: men and women have different color preferences.
Most Favorite Colors
Least favorite colors
- Blue is the most popular color among both men and women. At the same time, men are much more likely than women to use variations on the theme of blue.
- The most unpopular colors among men and women are brown, orange and yellow. Gray is the least favorite color for women, while purple is the least favorite color for men.
- When it comes to shades and tones, men generally prefer bold colors, while women tend to choose softer shades.
- Most people think that pink is the color that all women adore, but this is not true. The number of his fans is a small percentage. Thus, although pink is associated with femininity in color psychology, it is not at all attractive to all women.
Blue
Blue helps to divert attention from unnecessary details and concentrate it on the main thing. At the same time, unlike red, blue is not aggressive and never causes irritation, allowing it to attract the attention of consumers with almost 100% results when used in advertising and catalogues.
However, it is worth considering that blue carries a connotation of professionalism, so it is not worth using it to advertise children's products or, say, perfumes.
What the Research Says
The perception of color depends on personal preferences, upbringing and cultural characteristics of a person, but when it comes to shopping and interaction with a brand, there are also universal points:
- for 80% of users, color affects brand recognition;
- 90% of customers decide to buy based only on the color of the product.
Color helps a brand stand out and be remembered from its competitors. It awakens memories and affects a person’s emotional state. And each in his own way. Let's figure out what email marketers can do about it.
Color wheel
The idea of creating a color wheel dates back to the early 1700s. It was used to illustrate different permutations of colors based on changing shades.
Rice. 17. Color wheel
Choosing colors that go well with others or that provide good contrast can be difficult, but adjusting your color wheel can take some of the guesswork out of it.
It is important to pay attention to the shades of the colors you choose. Mixing warm and cool, especially when they may conflict with each other, can ruin the message you want to convey.
Finding color harmony is an important factor - not only the harmony of the colors, but also the harmony of the message represented by the colors.
While color psychology can't guarantee the success of a design solution, if you do your research and identify your audience, it can give you an edge.
Purple - adds mystery, but not too much
Associated with luxury and secrets. The color purple motivates a person to solve pending tasks and problems, and most importantly, it evokes a desire to create.
Online clothing stores use light shades of purple to emphasize romance, while cosmetics brands convey mystery with darker shades. Try to use this color in moderation without distracting from the main thing, as NYX does.
Red
Red is an active and even aggressive color. It encourages a person to act and requires a certain determination. In addition, red helps to attract short-term attention - it is the first thing a casual glance falls on. Therefore, this color is considered the color of the first feelings - it requires immediate action. Because of this aggressiveness, red has a particularly strong effect on men, which is why it is used to promote goods and services for the stronger sex.
But when using red, you should remember that this color is an accent color; if there is too much of it, it will begin to irritate and lead to a negative perception.
Color in marketing and business
The role of color in creating a corporate identity
When developing a brand philosophy, color takes center stage among other factors. Every color we see directly or indirectly implies something, and this helps influence the perception of a particular brand. Some colors go beyond individual brands, symbolizing entire industries, for example, blue for the tourism business, green for healthy eating, red for fast food.
There are no clear rules for choosing colors when developing a corporate identity. Some use colors that are familiar to their industry, while others, on the contrary, prefer to go against tradition, believing that this helps to attract attention more effectively. For example, Virgin America decided to change the traditional concept when developing its website and application. And although this may not be exactly what users expect from an airline website, it nevertheless attracts attention.
There's not even a hint of blue in the Virgin America iOS app.
Thus, an unexpected color choice can be an effective technique to attract users' attention to your company.
Color and Conversion Rate Optimization
How can you use knowledge of color theory and psychology to encourage people to click? Choosing the color of your call to action (CTA) button is one of the oldest aspects of the conversion versus optimization debate. For every person who argues that red is the best color for a button because it attracts the most attention, there is someone who argues that green is the best color because it is associated with safety and encourages action.
HubSpot presented the results of its marketing research (A/B test), which shows how the choice of color for the call-to-action button affects the number of registered users.
A/B testing is the most effective and frequently used marketing research method.
Although it was initially expected that the green button would perform better, test results showed that the red button received 21% more clicks. At the same time, HubSpot warned its users that the test results were somewhat subjective - perhaps the audience preferred red because it was the only saturated color on the site page.
The color of a button in itself does not affect its absolute effectiveness - what works well on one site may be ineffective on another. The claim that one color converts better than another is false because there is no universal best color. However, there are still some rules based on practical experience that help you effectively use color to your advantage. One of them is the use of a psychological principle known as the “isolation effect.” According to this principle, people remember better an object that stands out from the rest “like an eyesore.”
For example, if your website or app has a lot of green in its design, users will likely not pay attention to the green button, even though A/B test data has proven its effectiveness at another company.
Evernote web service. Their “It's Free” CTA button is buried because it blends in with the background. It gets lost on the page and users don't notice it.
Sometimes you need to change the visual hierarchy of colors on a page to highlight your call to action button. Contrast plays a very important role - if the color of the button does not attract the attention of a potential client, then there will be no registrations/sales.
A call to action (CTA) button really attracts users' attention when it contrasts in color with the rest of the page elements.
Color and usability
Design involves not only beautiful design, but also functionality and usability - perhaps the two most important principles for the work of any UX designer.
Color is a tool that helps direct the eye to the desired objects. Choosing the right color when designing an interface not only attracts users, but also improves the efficiency of the user interface.
Limit the number of colors
When using different colors in your design, you should strive for balance. The more colors you use, the harder it is to achieve balance. Using too many colors is a common mistake developers make. They may be trying to influence users in this way and convey as much information as possible, but this can be very confusing for people visiting the site.
No matter what color shades you use, too many colors create an unfortunate visual effect.
Interior designers follow a simple rule of 60–30–10, which also works well when designing websites. This timeless technique will help you choose a balanced color scheme: 60% should be the dominant color, 30% the secondary color and 10% the accent color. This ratio guarantees color balance and a comfortable transition of the gaze from one object to another.
The formula 60% + 30% + 10% is the key to balancing the colors used.
Availability of color perception
People perceive colors differently. Approximately 8% of all men and 0.5% of all women suffer from color blindness to some degree. The combination of red and green suffers most from color vision impairment. The only way to avoid problems is to try not to use this color combination.
Many colorblind people have difficulty distinguishing red from green.
Let's take a common situation as an example. Have you ever received a message that a form was filled out incorrectly - something like “Fields marked in red are required”? While this is not a big problem for users with normal vision, people who are colorblind may find this message upsetting.
Website developers use only two colors to fill out forms: red and green. But colorblind people cannot distinguish between the fields highlighted by these colors.
As stated in the W3C guidelines, colors should not be used as the sole visual tool for the following purposes: conveying information, prompting action and response, or highlighting a visual element. Following these recommendations, site developers should pay attention to some points: the response message about errors should be more informative, for example, like this: “The email address you entered is not available”; or perhaps you should add an icon next to the fill field to attract the user's attention.
Additional visual cues and built-in error checking help highlight an incorrectly filled field.
Are there a few ways you can test your UI for accessibility?
- The WebAIM service will help you check color combinations.
- Using the Adobe Photoshop graphic editor will help you correct images using Color Universal Design. This will ensure accessibility of graphic information for people with color vision impairment, including color blindness.
