Tips for front-end color design
"If you don't book for one day, Pepsi is barren"
01 Preface
Recently I suddenly saw an article about the front-end interview, "Is there any research on color?" At first glance, is this not a question that designers should consider? The interviewer's questioning method is also within the expectation. Think about the task of the front end is to implement the designer's design drawings with code. We can also put forward opinions and opinions on the color matching problem, which is also related to the user experience.
From the perspective of color theory, the choice of color can reveal a person's personality, emotions and emotions or even memories. Therefore, when color theory is used in website design, it must be cautious, especially the design of some official websites, which must conform to products, company concepts or company characteristics.
02 Color source
All the colors are basically derived from the three primary colors, which is the RGB color matching that the front end is familiar with. The three primary colors refer to red, blue and yellow. Before we start explaining, let ’s take a look at the following information:
- Primary color intercolor three-level color
- Three roles of complementary colors and similar colors
- Scattered complementary colors
- Warm and cool colors
Primary color : RGB, which is familiar to the front end. The source of all colors is generated from the primary color. For example, the more pixels on the TV screen, the more color points are displayed, which means high resolution.
Inter-color:
Inter-color is actually a mixture of red, blue, red yellow, yellow and blue, and purple, orange and green will appear.
Three colors :
The three-level color is the fusion between the primary color and the intermediate color, which will produce a variety of colors, common blue-green, yellow-green and so on.
Complementary colors :
The two opposing colors we see from the color wheel are called complementary colors. For example, red and green, it is characterized by strong color contrast, that is, there is a sense of conflict and coordination.
Similar colors :
These are the three similar colors on the color wheel.
Three roles :
By drawing an equilateral triangle on the color wheel, the corresponding color is the three characters.
Disperse complementary colors :
Compared with the complementary color, it is actually the color on both sides of the complementary color. The colors are more contrasting and richer.
Four colors :
Draw a square on the color wheel, and the corresponding color is the square color.
Quartet complementary colors :
The square complementary color adopts a rectangular shape, and the corresponding is the square complementary color.
Light and dark colors:
It is by shading a color. The resulting colors are very rich and can be used for some text or background images, but do not want to be too obvious. Gives a sense of relaxation.
Warm colors :
Gives a warm feeling. For example, if you wear a red dress in summer, it will give people a more heated feeling.
Cool color :
Cold colors have many meanings, such as pessimism, autumn, and night. But it may be a quiet, quiet feeling.
03 Summary
What we must uphold for color matching is a principle of harmony and stability. Be cautious about using the shocking colors. For example, if the poster uses red and green contrast, it will make people dizzy. So our color matching is based on gentle elegance.
Color balance
- Single color, through shading
- Use several auxiliary colors around the main color
- High saturation with low saturation
Transition color
When you must use colors with strong contrast, such as complementary colors, you must pay attention to the use of intermediate colors for buffering, balanced transition, and give people a sense of balanced buffering.
Similar colors
The proper use of similar colors will make your page layout look very harmonious, such as the download page of QQ, giving a gentle, elegant and simple feeling.
White collocation
White gives a clean, simple feeling, I believe many people will like the simple feeling without too much modification. But you must also use auxiliary color matching, otherwise it will produce a monotonous feeling.
Case 1 : Every station of the Hong Kong subway is a color that is not used. It can be seen that they are formed by mixing primary colors with other colors.
Case 2 : The color of the Berlin Fire Station in Germany is red, and the color of the police station is green. The two complementary colors of red and green are skillfully blended together.
04 Summary
Color matching is also the content of life, such as how to match the color of clothes, indoor home design, wallpaper design, etc., these are the range of colors. Only when we can have a certain understanding of color matching, we may enrich our aesthetic inspiration.
For color design and matching issues, you can refer to the official websites of some large domestic companies, from which you will get some design inspiration. After all, writing this article is just asking to enrich your knowledge. The front end only needs to know about it. You do n’t need to study it carefully. You can leave the rest to the designer of the UI department. The division of labor of many large companies is very clear.
