© V.I. Shuvanov
Light and color are essential for effective advertising. Psychologists believe that light challenges a person and calls him to action. Shades of lighting evoke different moods in him. The combination of various lighting elements should provide such a play of light and shadow as to help show the product in a more favorable light, and vice versa, to weaken the perception of its least effective attributes.
Psychological studies have shown that a store window with lighting of 800 lux aroused the interest of 5 out of 100 passersby, with illumination of 1,200 lux, 20 people “lingered,” and illumination of 2,000 lux attracted the attention of 25 passers-by. It has been established: the weaker the light source, the thicker the shadow it causes, which results in the visitor’s fatigue in his efforts to examine the light and dark sides of the advertised product.
When preparing a poster, booklet or other printed advertising, it is very important to think through the design well: position the text correctly, find an effective picture and choose the one color scheme, against which the product advertisement will be perceived in the best possible way.
According to the results obtained in the course of numerous psychological experiments, scientists concluded that color in a certain way influences a person’s perception of body weight, room temperature and assessment of the distance of an object.
Thus, red, yellow, orange colors visually bring the object closer, increasing its volume and, as it were, “warming up” it. Light blue, blue, violet, black - visually move the object away, make it smaller and “cool” it. Therefore, when choosing a particular color to advertise a product, you should evaluate it in terms of these parameters.
The perception of color depends on the emotional state of a person. This is precisely what explains the fact that a person, depending on his emotional state, is attracted to some colors, indifferent to others and does not accept others. These patterns were discovered by Max Luscher in the middle of the 20th century. When creating his color test, Luscher proceeded from the fact that a person’s perception of color was formed as a result of lifestyle and interaction with environment over a long period of historical development.
At first, human life was determined mainly by two factors that were not subject to arbitrary change: night and day, light and darkness. Night meant conditions when vigorous activity could cease. The day required active action - searching for food, basic arrangement. Hence, the dark blue color was associated with the peace of the night, and yellow with the sunny day and its worries. The red color was reminiscent of blood, flame and related situations that required high mobilization and activity.
The attitude towards color was determined by the nature of life activity of many generations, gaining stability, and any manifestation of life activity, in turn, was always accompanied by one or another emotional state. Therefore, the attitude towards color has always been and remains emotional.
In addition, Luscher made another important conclusion for the advertising industry - color not only causes an appropriate reaction in a person depending on his emotional state, but also shapes his emotions in a certain way.
Semantics of color
Red - instills determination, is able to evoke in a person a strong desire to perform one or another action and, in relation to the topic of our conversation, to make an energetic effort and buy, for example, the advertised product. This color, like no other, can quickly attract attention and fix the eye on the subject of advertising. The semantics of this color is “attention, don’t pass by, act for the sake of action: boldly, thoughtlessly, give in to your first feelings.” The color red also has a certain sexual charge. This is especially necessary to take into account those who advertise products addressed to men, for whom red has always been a symbolic color.
However, do not overestimate this color: it is good in moderation. Thus, a small detail of an ad or catalog highlighted in red will be appropriate and will immediately attract attention, while its excessive use can cause aggressiveness and even irritation with the subject of the advertisement in the consumer.
Orange - helps to induce a surge of vitality, gives an optimistic tone. The ancients considered it the color of health and creativity. This color is best used in advertising medicines, children's products, as well as health and education services. Orange color adds activity, but at the same time gives a feeling of inner balance and spiritual harmony.
Yellow - sets up communication skills. This is the color of openness and sociability. It also helps to bring balance to runaway emotions, find inner peace, and calm emotional unrest. In addition, yellow can “endow” an object with intelligence, therefore, for example, advertising of high-tech products is best done in yellow. This color will be successful in advertising children's products, services of travel agencies, as well as advertising and PR agencies.
Green - softens everything, relieves the severity of experiences. This color has a healing, relaxing effect. And it will be appropriate and effective in advertising medicines, water purification systems, dental clinics and pharmacies, veterinary hospitals, health and environmental protection centers.
Pink - an excellent assistant in the field of personal relationships: it enhances feelings, makes us more attentive, affectionate and sensitive. The range of use of this color can be the widest: from advertising perfumes, products for women and children to the services of marriage agencies and family centers.
Blue - also tunes in to the area of feelings, but more sublime, more platonic than mundane. This is the color of friendly affection, kinship of souls. Blue is the color of peace and universal harmony. It makes it possible to feel an invisible connection with the Universe and is able to give the subject a holistic appearance, and the issue or matter - globality and a favorable outcome.
Blue - helps you concentrate on what’s most necessary: don’t get lost in details, don’t get scattered. A blue detail in a catalog or advertising brochure will immediately attract attention and, unlike red, will never cause negative emotions.
Violet - the color of inner concentration. This color promotes internal deepening: it will help to abstract from everything unnecessary in this moment and concentrate on the main problem. Another interesting detail is that purple stimulates the brain well and promotes solving creative problems. It is no coincidence that purple is so loved by creative people. Therefore, if you are advertising a product with which you want to emphasize the creativity of the product or are focused on providing services to the creative elite, a detail in purple will be simply necessary!
Black - the color of self-immersion: it helps to isolate yourself from everything, isolate yourself and concentrate on solving a particular problem. At the same time, this color can induce melancholy and despondency. In black comes a feeling of loneliness and isolation from the outside world. That is why it is better not to use this color in print advertising. This recommendation, of course, does not apply to fonts and tables. It is in relation to them that, with rare exceptions, it is better not to experiment.
White- the color of complete openness, readiness to perceive the world in all its diversity. This color is also good because it does not cause any unpleasant sensations. One has only to note that the mono-use of this color in print advertising can create a neutral effect when the advertising consumer is simply informed of information about the product, without establishing any emphasis or priorities.
It is interesting that each country has its own attitude towards color, and even has its own national and cultural specifics, which must be taken into account when developing an advertising campaign in a particular country.
In America, red is associated with love, yellow with prosperity, green with hope, blue with loyalty, white represents purity, tranquility, peace, and black is a symbol of complexity and emergency. In Austria, the most popular color is green, in Bulgaria - dark green and brown, in Pakistan - emerald green, and in Holland - orange and blue.
In general, the closer to the East, the more importance is attached to the symbolism of color. Thus, in China, red means kindness and courage, black means honesty, and white, unlike the symbol of purity and holiness generally accepted by Europeans, is associated with meanness and deceit. Therefore, when developing an advertising campaign, say, in China, you need to choose the right color scheme, otherwise there is a chance of being misunderstood.
As for Russia, our favorite color has always been red, which from time immemorial has been associated with wealth and love. Until now, the key colors that decorate the Russian flag remain red, white and blue (a symbol of purity and spiritual improvement).
The symbolism of color in Japan is interesting, although here everything is somewhat more complicated due to the fact that a lot depends on the shape color image. Very interesting data regarding the influence of color and graphic solutions on human emotions. It is generally accepted that vertical or horizontal straight lines are associated with calm, clarity and even solidity, while curved lines are associated with grace and ease. However, this is only true under certain conditions. For example, the more often vertical and horizontal lines and the more contrasting the colors chosen to depict them, the more unpleasant sensations they produce.
Simple and symmetrical forms are “read” much faster than others. The most difficult to perceive are fantastic, sophisticated forms, devoid of obvious associations. They attract attention, but can cause an unpredictable attitude.
It has been established that the symbolism of the reflection of the form corresponds to real sensations. For example, a zigzag line “^” conveys the impression of a sharp change, concentration of force, rapid release of energy. This is how all nations graphically depict lightning. Unbalanced forms cause feelings of discomfort; a person strives to mentally complete and complete unfinished forms.
The strong emotional impact of certain shapes and color combinations was noticed and mastered in ancient times. Color and shape were purposefully used for psychotherapeutic purposes. The perception of color and emotional attitude towards it depends mainly on the emotional state of a person. It turned out that certain emotional states of a person correspond to his stable relationship to color and color combinations: one color is preferred, another does not evoke any special emotions, and a third is completely rejected.
| Color | Symbol of visual-sensory perception | ||||
| Distance | Size | Temperature | Spiritual mood | Hygienic impact | |
| Green | far | reduces | neutral, very cold | very calm | fresh |
| Red | close | increases | warm | annoying, disturbing | - |
| Orange | very close | increases | very warm | exciting, exciting | - |
| Yellow | close | - | very warm | exciting, exciting | - |
| Brown | very close | - | neutral | - | filthy |
| Violet | very close | - | cold | aggressively anxious, discouraging | - |
Color theory in web design is a broad topic that requires a lot of practice to understand the features of its application. The choice of color also depends on the environment and the specifics of the web designer’s work, since we look at colors and shades somewhat differently than illustrators and artists.
We have already partially devoted our materials to color in web design and Photoshop. But today we want to talk and look at colors and color palettes a little in general terms, where and how it is easier and more convenient to select their combinations, what to pay attention to and more. In general, we have collected several resources for selecting colors, found interesting ready-made palettes, and also want to delve a little deeper into some aspects of color theory.
Color theory in a few paragraphs
When designing a website, we have 16.8 million colors to choose from. And all of them have to be combined and selected, and if you imagine how many options for such combinations exist, then... it’s almost endless. But the colors have meaning. Imagine you are given your favorite thing. You are pleased, you are happy. Now imagine that a thing is a thing, but its color is the one you hate the most. For example, a shade of mixing green, yellow and gray. Oh, you will be excited, you will be strengthened, but the joy will fade away.
The colors have meaning. They give tone and have an emotional impact in the same way that font has a huge impact on human psychology.
Primary colors are the main ones for shades. The human eye perceives three basic colors: cyan, yellow and magenta. Any color that you see in front of you now consists of a combination of these three, but in different amounts of brightness, shades and other things. Yes, yes, printing takes place in these colors.
On the Internet, on the contrary, RGB (red, green, blue) and its hexadecimal values are used.
RGB (59, 89, 145) or #3b599b - blue Facebook
RGB (0, 0, 0) or #000000 - black
Every two characters in the 16-digit code indicate a primary color: red - 3b, green - 59, blue - 9b.
Cold-warm
Colors also range into cool (lots of blue and green) and hot (lots of red and yellow) shades. Hot colors in web design evoke feelings of warmth and passion. They are aggressive and bold, but they also symbolize that some things need to be stopped, so they are used for critical messages, icons and other things.
Cool colors bring coolness, suitable for winter, night, sad or aquatic themes. They carry loneliness and cold, fear. But at the same time, they are non-aggressive and calming.
Temperature
The temperature of the images can also be changed, which changes the level of orange. Thus, we turn the picture into a warmer and more joyful one. Just as the world looks happier when the sun casts its yellow-orange rays on it. A decrease in temperature, on the contrary, makes the image colder and less attractive, as if conveying nature on a cloudy day.
Shades and shadows
Shades are created by adding white to a color, similar to how you add black to create a shadow. Tints and shadows allow you to create monochromatic colors and palettes by adding varying amounts of white and black.
For example, let's take the base color #8dbdd8 (light blue). The images below show a monochrome palette in which the two shades on the right and left are the result of adding different amounts of black and white.
Saturation, Hue, Light
Colors are also distributed according to saturation, hue and luminosity. Saturation allows you to make the color richer and darker. When we say "light blue" or "dark green" we mean saturation.
The color tone determines the difference from the main color of the rainbow (there are seven of them). That is, for example, “greenish-blue”. Neither this nor that, but just the tone.
Luminosity determines a color in relation to pure white, how bright or dull it is. Something similar to saturation, but depends on a different parameter.
Color schemes
If we look at color schemes, there are only four of them: monochrome (shades of the same primary color), complementary (from two colors that are on opposite sides of the color wheel), analog (three colors that are next to each other on the color wheel), triad or triadic ( three colors that are at the corners of the triangle drawn on top of the color wheel).
Designing a flower layout
This is a brief theory and subsequently we will simply refer to this material. But also when starting to learn web design, it is this theory that is important, although often your eyes may realize that something looks completely different from what is described in the numbers. It looks blue, but you feel like it's not saturated enough. These are already features of the nature of development of each person. This is why many web designers dedicate themselves to color palette design, much like how some dedicate themselves to studying typography. They test different shades, saturations, temperatures in combination with other variations and see when, what and how it works.
However, when it comes to web colors, there is a concept called "web safe colors". It appeared when displays could not reproduce 16 million colors. But if there are such safe colors, why do you need anything else? But, you see, it’s nice to know why they exist at all and how they influence the choice of colors in general.
It is worth understanding that because we can use any colors, the best web projects are obtained by using the main group of colors. And yes, trust your eyes. If they don't like what they see, then try changing it.
When help is needed
If you have design difficulties at the zero stage, then ideas for color solutions can always be found on the Internet. Just visit a site with color palettes and customize it, then collect the colors you want and work with them in Photoshop. For example, explore webdesign-inspiration or awwwards, sort by color and find inspiration.
Color explorer
It is a library and workshop for creating a color palette. The library has sets of palettes for print and web. You can choose a color and see multiple shades and variations of tones.
Сolor son th eweb
Selects all colors and shades for the color you specify. In addition, the resource offers colors for combination and combination, a monochrome palette, analogue, variations in saturation, tones, luminosity and more.
Copaso
Allows you not only to select a color using several parameters at once, but also to then assemble a palette according to a given color. In the first version we created color, and in the second we created a palette and a range of color shades and tones.
Сolorotate
This is one of the few mobile applications, which allows you to work with color palettes on your smartphone or tablet. But there is also a version for the PC browser. A special feature of the project is working with color in 3D. We are offered a cone of flowers. Each point for mixing the shade moves within the limits of its own triangle, and the cone itself can be rotated as conveniently as possible.
In addition, there are sets of ready-made palettes for Christmas, monochrome, modern, citrus and others.
Сolourlovers
The site has been a catalog of custom color schemes for a long time. As a rule, it includes colors flat design, as well as numerous patterns, textures, backgrounds that are freely available.
Color palettes can be selected from photographs and images. We have already talked about this and about resources for this too. The idea as a whole is interesting and very useful, read it at your leisure.
Color profiles
But meanwhile, choosing a palette is not so bad. The most current topic in web design is the choice of color profiles. We touched on this topic a little earlier (link at the beginning of the material), but here’s what we want to note now. Each monitor can be calibrated to a specific color profile. This is done, for example, in Windows 10 -> Control Panel -> Color Management. Accordingly, certain colors may appear differently on different monitors.
The topic, as we have already said, is confusing and therefore many web designers are not always sure whether they have chosen the right color. SRGB is recommended more often, but is not necessary or absolutely the best solution and choice. This also applies to images that are saved with built-in profiles, and website layouts. In other words, this topic can take a long time to understand.
But, meanwhile, many designers try not to think about them at all and do their work with the default settings on the computer and in Photoshop. And this is also true, because even If you coordinate colors with the customer/client, you still won't be able to influence the colors on the end users' monitor.
Material UI Colors
Google, when creating rules for material design, also described in detail the provisions on color. However, the rules are so simple overall that they can easily be applied to any interface, which is what made them popular.
When it comes to color choice, the Material design follows a similar style flat design. Material designs for applications and websites are freely available on the Internet, and therefore you can see sets of colors with your own eyes, create palettes and much more.
If you decide to work only with Google's color set, we recommend testing both tools to see how and how they can complement each other. Then you can additionally use the resource 0to255 , to select colors based on brightness and saturation.
Conclusion
Color on the Internet is mostly simple and doesn't take more than a couple of weeks to understand its basics and theories. But if you decide to dig deeper into this very color theory, then you will learn very, very many complexities, features, patterns, influences and solutions. Perhaps some of you will feel “dizzy” from the abundance of information; someone will decide that " he doesn’t need to know that, he poked the logo with an eyedropper and colored the site" But someone will decide to look into the theory again, and again; decides to rummage through the “basket of flowers” and shades, decides to start experimenting.
We just hope that our materials on color will help you a little in the future with your projects. They will help you find that simple way to understand how web colors work through practice, repetition, and trusting your eyes.
There are many resources for selecting color palettes, as well as sites for inspiration, but when you sit down to “draw” your own project, your head somehow... becomes empty. You sit and think: “ What blue shade should I take... a little darker or a little lighter... eh... but the customer didn’t want to think about such trifles... for him, that, of course,... trifles..."
New Year's days and leisure time are a good occasion for creativity, light imagination for your own pleasure, when, for example, you no longer have the strength to party and have fun.
08/18/16 28.2KThe task of choosing a color scheme for a website may seem overwhelming, especially if you are not well versed in color combinations:
If everything goes well, your site will look harmonious. If not, you will get a horror movie style picture!
If you avoid using color at all on your website, it will look dull and quickly become forgotten. If you overdo it with color, the site will appear tacky.
You need to choose the right template and color palette for your future website. These two tasks can be perhaps the most difficult when creating a website.
Knowing just a few rules will make choosing colors less difficult.
After reading this article, you will learn how to:
- Choose the most suitable color for your website and personal brand;
- How to combine tones to achieve a harmonious color scheme;
- Choose the most successful one background color;
- Use color accents only where necessary.
How does color affect the perception of your website and brand?
If I ask you to think of Coca-Cola, what would be the first thing that comes to your mind? Most likely, the red Coca-Cola logo will pop up in your imagination:
It's quite difficult to think about this drink and not associate it with the color red. Red is so strongly associated with the brand that it is as important as the famous drink itself.
Red in a color scheme conveys two important messages:
- The bright red labels stand out from the rest on the soda aisle.
- Each color evokes certain emotions. When we see red, we have a feeling of excitement, love and passion on a subconscious level. These are the feelings Coca-Cola wants to evoke with its drinks:
85% of buyers admit that the main reason for purchasing a product was its color.
Brand recognition increases by 80% when using color.
3 Steps to Using Color Correctly on Your Website
When developing a website design you need:
- Choose a dominant color for your brand;
- Choose several accent shades to create a color scheme;
- Choosing a background color to create a complete design.
1. Choosing the predominant color
Is your brand's predominant color red, like Coca-Cola? It will help evoke the necessary emotions in visitors to the resource, provokes in people a feeling of excitement, love and passion.
This color is the first thing that should come to people's minds when they think of your company. If you already have a logo, make sure it contains your brand's primary color.
How to choose the right color
It is not by chance that large companies choose this or that color scheme for their website. This is a conscious choice that is part of branding and marketing.
Each color attracts its own group of buyers, and can even influence their choice:
Red-orange, black and bright blue attract impulsive buyers. These color schemes can often be found in fast food chains, clothing stores and bargain sales.
Dark blue and turquoise attract buyers with a limited amount of money. These colors can be found in banks and large department stores.
Raspberry, azure and pink attract classic buyers. Distributed in clothing stores.
To attract the customers you want, use combinations of different colors.
We have specially created a visual infographic for selecting color schemes to make it easier for you to choose the dominant color for your brand:
What color should you use for your website?
Green represents wealth, health, tranquility and nature. This color is most easily perceived by the eyes and, as a result, relaxes. Green is the second most favorite color for both men and women.
Yellow is a symbol of youth, optimism and cheerfulness. Often used to attract attention. Yellow can also cause tension, so use it in small quantities.
Orange is associated with friendliness, excitement and creativity. Stimulates activity in people. For example, it encourages you to buy a product or subscribe to a newsletter. This color attracts impulsive buyers.
Red symbolizes passion, excitement, energy and danger. Often used to create an urgent need for a purchase in people's perceptions. Causes strong emotional reactions. In restaurants it is used to increase appetite.
Pink is feminine, sweet, innocent and romantic. Often used in offering private services and products to girls and women.
Purple is a symbol of greatness, wealth, success and wisdom. Often present in cosmetics. It has a calming effect on people.
Blue is an indicator of reliability, security, stability, peace and tranquility. Often used by banks and large companies. Blue color is most pleasant for both men and women.
Gray in a color scheme represents neutrality, simplicity, calm and logic. It is associated with technology, production, precision, control, competence and even experience.
Black is the color of influence, luxury, experience and elegance. Often used to promote luxury goods, it is associated with professionalism, strength and precision.
Are your target audience young and energetic shoppers? Or more experienced people with solid earnings? Is your product (service) aimed more at men or women? Is it only suitable for a certain age group?
Not every color is suitable for representing your business. For example, if you sell yoga mats, purple ( wealth and greatness) and black (strength and luxury) are not the most best options. Green will suit you ( health, peace), grey ( simplicity, tranquility), blue ( peace, tranquility), or maybe even red ( passion, energy).
Differences in color perception between men and women
Who is your site primarily aimed at, men or women? Or maybe both?
Bright and muted color schemes for the site
Men prefer bright colors, while women prefer muted colors.
The experiment showed that, in general, men and women react equally to light and dark shades. But it turned out that women gravitate more towards muted shades, and men - towards bright ones.
Achromatic colors
As a rule, men like achromatic colors more than women. Achromatic colors are white, black and all shades of gray.
Light and dark shades
Women prefer light shades. The reason for this is their enhanced perception of certain colors.
Women
Blue, purple, green.
Orange, brown, gray.
Men
Most preferred colors: blue, green, black.
Least preferred colors: brown, orange, purple.
By combining and using colors that appeal to men, women, or both, you can influence their subconscious perception of the brand.
According to color scheme research, both men and women like green and blue. Both of them don’t like orange and brown. If you want to attract the attention of both men and women, you need to use blue or green as the main color.
The color choice for your brand or product can also depend on the impression your customers want to make on others.
Often people buy certain products or services to make a specific impression on others.
Many decisions are a reflection of what a person thinks about himself and how he wants to appear to others. This is what will come to mind when other people think about this person:
So if you want people who love nature to buy your product, use green in your HTML color scheme. Do you want to attract people who feel young and confident? Use yellow. If you are interested in people who want to look distinguished and rich, use black.
It is now clear?
Think about your ideal target audience. How does he want to appear to other people?
Yes, it affects psychology. But you need to understand this to create a successful brand.
How to use a main color on your website
Now that you have decided on the main color of your site, you need to understand how to use it correctly. Color attracts a lot of attention, so don't try to use it everywhere you can.
Use the dominant color only in those places where you want to draw users' attention or encourage them to take a specific action.
For example, call phone number, fill out the form, subscribe to updates, etc.
The predominant color should catch the eye, highlighting those details that you want to draw users' attention to:
Where to use the dominant color on the site?
- Logo;
- Menu tabs;
- “Call” button;
- Important information;
- Headings and titles;
- Buttons.
2. Choosing accent colors
To make your design more interesting and professional, you need to use accent ready-made color schemes for the site. They can highlight important parts of your site: quotes, buttons or subheadings.
Many people are afraid to use several colors at once because it is not always intuitive whether they go well together. People think that in order to learn how to combine them, one must not only thoroughly study color theory, but also make a lot of mistakes.
There is an easier way available to everyone. This is a color matching program that will help you choose color schemes just like the pros do!
How to use a program to select accent colors
Once you've decided on a dominant color, it couldn't be easier to choose accent colors using programs like Adobe Color CC Tool:
Here's a short tutorial that will show you how to create a color scheme in one of two ways:
- Based on predominant color
Step 1: First, find out the code for your predominant color. For example, on the site ColorPicker.com. The color code is indicated in the rectangle directly above the color palette square.
After copying the code from ColorPicker.com, paste it into the " NOT X» Adobe Color tool. Make sure you paste the code in the middle column:
Paste the code for your site's dominant color into the box IN THE MIDDLE.
Once you specify a color, Adobe Color displays it on the screen along with other complementary colors.
Step 2. On the top left side you will see a rectangle with the following color schemes:
- Consistent;
- Monochrome;
- Triangular;
- Complementary;
- Composite;
- Shades.
Experiment with different color schemes to see which one is right for you. All colors suggested by the program go well with each other.
Step 3. Make your color scheme even more thoughtful by moving one of the color picks.
It's important not to move the short pointer located in the middle so that your dominant color remains constant:
CMS and website builders allow you to insert color codes ( HEX) to highlight any part of your site:
Copy the color codes ( HEX) for your color scheme for the site.
- Based on your favorite photo
Sometimes it’s easier to look for color solutions on the Internet and get inspired by them.
You can upload any photo you like into Adobe Color and the program will automatically generate a color scheme based on it.
Step 1. Upload a photo:
Click on the camera icon to upload an image.
Step 2. Choose one of five color moods:
- Colorful;
- Bright;
- Muffled;
- Saturated;
- Dark.
Experiment with color moods to see which one suits you best:
Choose a color mood.
Step 3: Make the color scheme even more thoughtful by moving one of the color picks across the image:
Move the pointers if you want to select other complementary colors.
Step 4. The suggested color palette is located below the image. Here's how to choose a color scheme for your web design.
To see the codes ( HEX) colors, click on the color wheel located in the upper right corner:
Click on the color wheel to see the color codes:
Copy the color codes ( HEX) for your color scheme.
Where to place auxiliary colors
Site details highlighted in secondary colors are not the main accents. But they still stand out. For example, you can use auxiliary colors to highlight subheadings, additional buttons, dialog boxes, fill the background, etc.
Choose one or two additional colors. If there are more of them, it will be difficult for users to focus on one thing:
Where to use supporting colors on your site?
- Active menu button;
- Subheadings;
- Highlighting secondary information.
- Selecting a background color
Have you ever had to paint the walls in your home?
If yes, then you have some experience and you know that choosing color schemes is not easy.
The color should be calm enough so that you can stay in the room for hours and the color does not overwhelm you. At the same time, you don't want the color to be dull and the room to look hospital-like.
Choosing a background color for your website isn't much different than choosing paint for your room!
How to choose the right background color
If you were choosing paint for a modern clothing store and a country house, would you choose the same color?
Obviously not. These two rooms serve different purposes.
For example, for a clothing store, it is better to use bright colors to attract customers' attention to the racks of clothes. It is necessary that the color of the walls contrasts with the color of the shelves with clothes, so that when customers enter the store, they immediately understand what to pay their attention to.
And for comparison: when you arrive at your country house, you probably plan to relax. You want the color of the walls and the design of your home to have a calming and relaxing effect.
The background color of your website depends on what you want users to notice.
Simply put, the background color directly depends on the goal you are pursuing when creating a website.
Type 1 – Resources with a lot of content or e-commerce
Have you noticed that information resources and online stores often use white or neutral color schemes for their websites?
This is all because the purpose of these resources is to promote ideas or products.
In such cases, the focus should be on the product or service rather than the website design. The background color is just a basis to make the content more visual and readable.
For information resources and online commerce, it is best to use a light background, bright dominant and auxiliary colors. The brightness of the predominant and accent colors guarantees the uniqueness of the site and allows details to stand out. At the same time, a neutral background in the color scheme for a sales website helps the user focus only on the content or products.
Type 2 – Corporate websites and services
When creating a corporate resource, one goal is pursued - promotion of goods or services.
Depending on what the purpose of your site is, the background color should be different.
Brand promotion
If you want to create a memorable company image, use different shades of the dominant color or brand color for the background.
This is because color directly affects brand recognition ( remember the example about Coca-Cola?) When you use different shades of your brand color as a background, you enhance it and make it more memorable to customers.
If the dominant color of your site is provocative, then using it as a background may negatively affect the user experience. In such cases, use shades with the lowest intensity:
Service promotion
If your goal is to draw attention to a service or portfolio of your work, use a white or neutral background color.
As is the case with information resources, you don’t need to overload the site and distract users’ attention from the content you want to convey. By using a white or light background in the color scheme of the site, you will focus attention on the content:
Type 3 – Stylish and creative sites with lots of graphics
If you are going to create a website related to creativity ( fashion, design, restaurant business, beauty, etc.), there are no restrictions for you.
For these types of sites, there are no rules for using a background color. You can make the menu bar black to add drama. Or create a background using all the colors of the rainbow to cheer up resource visitors:
Try to always stick to one rule: Never choose a background color that makes the text on it difficult to read.
The ideal background color allows the content to stand out and blends harmoniously with the dominant and supporting colors. The right background color makes the user's experience on the site pleasant.
When in doubt, use a white or light gray background. They may not be the most inspiring, but you will be sure that your content is clearly visible.
Conclusion and results
You should not be guided by personal preferences or instincts when choosing a color scheme for your site.
Use colors that your potential audience likes, and then the resource will stay in people’s memories for a long time. This will set you apart from your competitors.
The choice of color palette should never be random. This is a set of actions that need to be taken:
- Choose the correct predominant color for the site;
- Choose the correct auxiliary colors for the dominant color;
- Select the appropriate background color.
This publication is a translation of the article “ How to Choose a Good Color Scheme For Your Website", prepared by the friendly project team
Good bad
Guys, we put our soul into the site. Thank you for that
that you are discovering this beauty. Thanks for the inspiration and goosebumps.
Join us on Facebook And In contact with
The way we react to this or that color, the analysis of these reactions and associations help us to know ourselves and determine our attitude to the world around us. Favorite color can also tell a lot about a person. That is why leading psychologists and scientists are actively studying the topic of color, including experts from the Pantone Color Institute, a world authority in this field.
website I decided to figure out exactly how basic colors and their shades affect us from the point of view of psychology and physiology.
Red
The color red is never shy, no matter what its shade. Warm red shade - passionate and romantic. Cold is associated with maturity, power and authority. Red stimulates appetite, improves the sense of smell, sharpens taste, and can increase sexual and hormonal activity. Research suggests that the color red has an stimulating effect on the brain.
Personality and red. Red is preferred by self-confident, powerful, active people with strong energy, courage, and a thirst for life. Lovers of the color red are, as a rule, extroverts; they constantly need to solve new problems and tasks.
People, those who reject red, experience a lack of vital energy, and this irritates them. All this can be a consequence of fatigue, physical weakness, and in some cases even heart failure.
Pink
Pink combines passion with purity, it is touching, it is associated with love and innocence. Light pink tones are perceived as soft and gentle, romantic. The exception is bright shades: fuchsia, phlox. They can be classified as defiant, they are persistent and more aggressive, perceived as energetic and attention-grabbing.
Observations by Alexander Schauss, a doctor at the American Institute of Biological Research, showed that the color pink can significantly reduce the level of human aggression, reduce blood pressure, pulse rate and heartbeat. His research was put into practice at a Seattle prison, where newly arrived prisoners were held in a pink cell for 15 minutes before being sent to the main unit. During this time and at least for the next half hour, the prisoners did not show aggression.
Personality and pink. People who prefer pink are not as energetic as those who like red, but this does not mean that they are slow. They combine both passion and purity, they are gentle, romantic, soft, talented, but devoid of ambition. Pink lovers are extremely fickle.
Of people, who don't like pink, irritates the naivety and sweetness that he conveys. They consider such qualities to be a sign of weakness; they lack the assertiveness and passion that is found in red.
Yellow
In Jungian psychology, yellow is a symbol of intuition. As shown by research, the results of which Dr. Max Luscher published in his book, yellow is most often associated with fun, freedom, open expression of feelings, light, self-realization, it is perceived as friendly, energetic and open. This is a color to lift your spirits.
Although yellow is associated with fun, joy and energy, it can also have the opposite meaning. This applies to greenish and dirty sulfur shades of yellow; in many cultures they are associated with deception, betrayal, and guilt.
Personality and yellow. Lovers of yellow have original thinking, rich imagination and excellent intuition. They have a highly developed creativity. Connoisseurs of yellow are charged with optimism and activity, they are attracted to everything new and unusual, they are impulsive and strive for joy. These are people who know how to keep other people's secrets. They are reliable friends.
Usually, don't like yellow realists, practical people who are skeptical of new ideas and prefer a bird in the hand. Negation yellow color may indicate that a person feels alienated, his hopes and dreams have collapsed.
Orange
Orange combines red and yellow, so this color carries the characteristics of both. Orange is the only color that does not have cold undertones. This color is strongly associated with the most delicious juices and fruits.
Bright shades of orange are associated with energy, sociability, and fun. Many people consider this color flashy and vulgar. But deep brownish-orange tones look more acceptable.
Orange increases appetite, which is why it is often used in food packaging design. It has the ability to instantly attract attention, evoke joy, and stimulate activity, making it an ideal color for decorating fast food restaurants. Delicate shades of orange are used by owners of expensive restaurants.
Personality and orange. People who like the color orange are great enthusiasts, prone to adventure, they are almost always in a good mood and regularly come up with original ideas. Orange lovers are equally good at working and relaxing. They are stubborn, persistent, love to be among people, easily compromise, and are non-aggressive. Charming, cheerful fans of orange have no problems achieving success at work.
Those who doesn't like orange, often have a reputation for being unsociable, they avoid noisy companies, do not show off their personal details, and find it difficult to get along with people. If they find a friend, it is for life, and their circle of acquaintances consists of a small number of close people.
Blue
Blue color is perceived as comfortable, safe, reliable, and calming. It evokes a sense of harmony in people, gives them a sense of control and responsibility. At the same time, an excess of blue can cause melancholy and mild depression.
Blue has a calming effect: blood pressure decreases, heart rate and sweating decrease. Of the entire blue range, only its brightest shades do not have a calming effect.
Personality and blue. Love for the color blue is often fanatical and lasts a lifetime. Blue lovers are trustworthy and can be relied upon. Vulnerability is often hidden behind external confidence and coldness. People who love the color blue value trust, sincerity, and loyalty. They have a heightened sense of responsibility, they strive for excellence and can be overly demanding.
Those, who doesn't love blue, usually energetic and restless, cannot stand routine and monotony. They seek variety and hate it when the burden of responsibility falls on them. For such people, the color blue symbolizes melancholy and depression.
Green
Green color has a wide range, so it can evoke a wide variety of associations - positive and negative. This may be due to the fact that the human eye perceives green tones most of all.
Most people associate green with nature, green leaves, the color of the forest, fresh mint and lime. The least popular of the green family is a dirty, yellowish-green, sulfurous hue that most often causes a negative reaction, as it is associated with nausea and poor health.
Green color soothes the eyesight, especially after prolonged contact with red. That's why surgeons' uniforms are often green. Green also has a calming effect on the psyche of people. This is well known to casino owners - tables are usually covered with green cloth, which helps reduce the level of excitability of players.
Personality and green. Most often, green lovers are stable, balanced people, kind, generous, reliable, and scrupulous. He values the respect and admiration of others. They prefer proven methods of action; they are distinguished by high level intelligence and the ability to quickly grasp new concepts.
The same, who doesn't like green, not very sociable, unfriendly, they do not like to look and act the way the majority does. You rarely see such people at a party, this is not for them.
Violet
Purple is the most complex and mysterious of all colors. It combines the passion of red and the cold calm of blue. The mood that it will convey depends on which of these colors predominates in the composition of the purple hue. It is not surprising that purple is the color preferred by artists, designers, performers - creative, eccentric people.
Color therapists claim that violet light helps cure coughs, lower blood pressure and eliminate insomnia problems. Purple has an ambiguous psychological meaning; people find it difficult to perceive its shades. This causes ambivalence and reaction to it.
Personality and purple. Like the color violet itself, its lovers are mysterious, have a developed creativity and are very receptive to various kinds of spiritual ideas and mysticism. It is preferred by people who consider themselves different from others. Lovers of purple are generous by nature, they can be very charming, they are witty, observant, but at the same time they are characterized by mood swings, vanity and increased sensitivity and secrecy.
Those, who doesn't loveviolet color, feel the need for sincerity, honesty, these are open, fair people who expect the same attitude from others.
Brown
Brown has a deep psychological effect on the human mind. Even those people who claim that they do not like this color easily surround themselves with brown furniture, make wooden floors and feel quite comfortable surrounded by this color. And all because brown symbolizes refuge and allows a person to feel calm and safe.
He also has an irresistible associative connection with chocolate and other luxurious confectionery products: pastries, cakes, fondants.
Personality and brown. Brown lovers have a sense of duty and responsibility. They are stable and reliable, loyal friends, understanding, at the same time decisive and ready to defend their point of view. These people love and value comfort, simplicity, harmony, they are attached to home, and safety is important to them. Carelessness and spontaneity are not characteristic of brown lovers, but at the same time they often rebel against dullness and routine. Losing control over the situation, such people become very nervous and stressed.
The same, who doesn't like brown, love to fantasize and get involved in risky situations, they are generous, witty and impetuous. Routine, like homebodies, drives such people crazy.
Grey
Depending on the shade, gray can symbolize detachment and suppression of feelings, be elegant and sophisticated, boring and neutral, calm and safe, a symbol of longevity and strength, intelligence. Gray serves as an excellent background for bright, rich colors.
Personality and grey. People who prefer gray to all other colors are absolutely neutral in life. For such people, the priority is calm, safety, and balance. They prefer to contemplate what is happening rather than actively act. They often make compromises, try not to attract attention to themselves, and are ready to work hard and persistently, doing routine work. They are focused, conservative and reliable people.
Personality and white. True lovers of white color are very neat, they are distinguished by ideal taste both in clothing and in the design of their home. Such people are characterized by scrupulousness and excessive criticality.
Those, who doesn't like white, are not slobs at all. But this is a clear sign that order is not the main thing for them. These are balanced and calm people with whom it is pleasant to spend time.
Black
Some people think black is a magical and ominous color, while others are sure that there is no more refined color. In any case, black is unlikely to be ignored. It contains enormous inner strength; now it is the color of chic and good taste. Black looks best in elegant combinations and on expensive textures.
Residents of big cities often prefer black both in clothing and in home decoration. They believe that it helps them feel less vulnerable, protected, and provides some privacy. But psychologists are sure that abandoning the rest of the colors of the rainbow in favor of black often leads to depression.
Personality and black. The essence of black lies in the negation of color as such. Therefore, lovers of black are extremely contradictory and prone to rebellion. Such people can be sophisticated, conservative and simple, or they can consider themselves serious intellectuals or extremely sexual people. Black lovers have a complex but noble character, most of all they value intelligence, wit, personal security and prestige.
For those, who doesn't like black, this color is a symbol of mourning and death, an eternal mystery, a road to nowhere, it is uncomfortable for them.
At different periods of life, the attitude towards a particular color may change. What color is your favorite today?
Guys, we put our soul into the site. Thank you for that
that you are discovering this beauty. Thanks for the inspiration and goosebumps.
Join us on Facebook And In contact with
Scheme No. 1. Complementary combination
Complementary, or complementary, contrasting colors are colors that are located on opposite sides of the Itten color wheel. Their combination looks very lively and energetic, especially with maximum color saturation.
Scheme No. 2. Triad - a combination of 3 colors
A combination of 3 colors lying at the same distance from each other. Provides high contrast while maintaining harmony. This composition looks quite lively even when using pale and desaturated colors.
Scheme No. 3. Similar combination
A combination of 2 to 5 colors located next to each other on the color wheel (ideally 2–3 colors). Impression: calm, inviting. An example of a combination of similar muted colors: yellow-orange, yellow, yellow-green, green, blue-green.
Scheme No. 4. Separate-complementary combination
A variant of a complementary color combination, but instead of the opposite color, neighboring colors are used. A combination of the main color and two additional ones. This scheme looks almost as contrasting, but not so intense. If you are not sure that you can use complementary combinations correctly, use separate-complementary ones.
Scheme No. 5. Tetrad - combination of 4 colors
A color scheme where one color is the main color, two are complementary, and another one highlights the accents. Example: blue-green, blue-violet, red-orange, yellow-orange.
Scheme No. 6. Square
Combinations of individual colors
- White: goes with everything. The best combination with blue, red and black.
- Beige: with blue, brown, emerald, black, red, white.
- Grey: with fuchsia, red, purple, pink, blue.
- Pink: with brown, white, mint green, olive, gray, turquoise, baby blue.
- Fuchsia (deep pink): with grey, tan, lime, mint green, brown.
- Red: with yellow, white, brown, green, blue and black.
- Tomato red: blue, mint green, sandy, creamy white, gray.
- Cherry red: azure, gray, light orange, sand, pale yellow, beige.
- Raspberry red: white, black, damask rose color.
- Brown: bright blue, cream, pink, fawn, green, beige.
- Light brown: pale yellow, creamy white, blue, green, purple, red.
- Dark Brown: Lemon Yellow, Blue, Mint Green, Purple Pink, Lime.
- Tan: pink, dark brown, blue, green, purple.
- Orange: blue, blue, lilac, violet, white, black.
- Light orange: gray, brown, olive.
- Dark orange: pale yellow, olive, brown, cherry.
- Yellow: blue, lilac, light blue, violet, gray, black.
- Lemon yellow: cherry red, brown, blue, gray.
- Pale yellow: fuchsia, grey, brown, shades of red, tan, blue, purple.
- Golden yellow: gray, brown, azure, red, black.
- Olive: orange, light brown, brown.
- Green: golden brown, orange, light green, yellow, brown, gray, cream, black, creamy white.
- Salad color: brown, tan, fawn, gray, dark blue, red, gray.
- Turquoise: fuchsia, cherry red, yellow, brown, cream, dark purple.
- Electric blue is beautiful when paired with golden yellow, brown, light brown, gray or silver.
- Blue: red, gray, brown, orange, pink, white, yellow.
- Dark blue: light purple, light blue, yellowish green, brown, gray, pale yellow, orange, green, red, white.
- Lilac: orange, pink, dark purple, olive, gray, yellow, white.
- Dark Purple: Golden Brown, Pale Yellow, Grey, Turquoise, Mint Green, Light Orange.
- Black is universal, elegant, looks in all combinations, best with orange, pink, light green, white, red, lilac or yellow.
Loading...
