Color is the first and most lasting factor to give visitors a website image. You and I both know the importance of color harmony. How to do color matching well? Below I summarized several key points of practical color design, hoping to bring help to everyone.
First, determine the main color.
Follow the master-slave relationship, which is the most stable principle in dealing with colors.
In fact, every word such as red, yellow, green, blue and purple represents a specific color, that is, hue. Refers to the appearance of color, which is a name that distinguishes color types. On the page, the widely used color except white as the background is the main color of this page. If you use multiple colors in the same page, if you don't grasp it well, you can't determine which is the main color. Because the area of other colors can't be too large, it follows the master-slave relationship.
Second, similar colors.
Choose colors with similar colors, which are very good to match.
Explanation: If white is added to the red, the red will be brighter and brighter, and the brightness will be improved. With the appearance of black, red becomes darker and darker. The brightness decreases. Then the lightness of a color refers to the brightness of any color.
If you add black, white, gray or other colors to the blue, it will make the blue impure and no longer bright. Then the purity of color refers to the brightness of each color in the color system.
The same color system (the same hue), several colors with different lightness or purity are easy to match, for example, choosing several different shades of green to match, the general page will not have much problem; Try not to have more than four colors on the same page. The color matching of hyperlinks also follows the above principles. The collocation of text colors should be separated from the background. There is a small way: open Dreamweaver's color box (as shown below). If it is a group of six colors, each group is good. The color scheme is very high-key. In fact, if you have difficulty in matching colors, you can call different color systems in the color panel to see their adjacent colors, or match every other color. It is absolutely not difficult to find the right color for your page.
Third, color balance.
It is a relatively safe principle of complementary color matching. When multiple colors exist at the same time, it is not easy to grasp and must be coordinated and unified.
For example, using the phenomenon of color illusion, weight illusion is very useful in practical design. That is, the light bright color with high lightness looks lighter, and the dark dark color with low lightness looks heavier.
Then, if you use more colors with higher brightness in web design. For example, in Figure 3, the left side is light or bright, which can be decorated with black or a small area of dark color with the same hue, so that the page will not be too light and the color will be balanced. Balanced colors are more in line with the color psychology of most people. According to your situation, if you choose black, it may appear serious and solemn, while if you use dark colors of the same hue, it will appear lighter and looser.
Fourth, the use of black and white ash.
In fact, black, white and gray are all treasures, and we must not underestimate them.
If you are troubled by color, you can increase white and gray in a large area; Add black to a small area to adjust other colors. When using high-purity colors, such as pure blue, pure yellow, etc. This kind of collocation will be very bright and the visual experience will be more exciting. Using gray and white to increase or decrease the brightness of such a color is also an adjustment method.
Five, color psychology and emotion
Choose a color that suits the style of the content.
1. The color is warm and cold. For example, children's websites should not use cool colors, and the colors should be richer.
2. The colors are soft and hard. Uniform color tone, high brightness and soft touch. If the lightness is low, there will be a sense of hardness. Choose soft light pink or high-grade gray for women's sites, and brown and dark blue for men's sites.
3. From the perspective of hue, warm colors give people a gorgeous feeling; From the perspective of lightness, the feeling of high lightness is gorgeous; From the perspective of purity, high-purity colors give people a gorgeous feeling. Therefore, elegant coffee and golden yellow can be used in jewelry places, and light green or light blue with high brightness can be used in perfume places.
4. Association of colors. Association with abstract main color (omitting specific association):
Red: enthusiasm. Orange: warm and happy. Yellow: bright and happy. Green: quiet and fresh. Blue: peaceful, calm and rational. Purple: elegant, noble, solemn and mysterious. Black: terror, death. White: pure, sacred and pure. Gray; Humility and so on.
Such as game websites, suitable for black, dark color is more mysterious. For tourist attractions, you can choose grass green with yellow. Government websites can use red and blue. Fashion places can choose high-grade gray and purple to highlight the elegant atmosphere. Campus venues are also suitable for greening. Technology is suitable for deep blue. News is suitable for crimson, or black, with advanced gray and so on.
5. The brightness of color is related to sound. Strong colors, such as bright yellow and bright red, have a distinct and high sense of music. Dark and turbid colors such as navy and dark gray have a deep sense of music. Modern audio-visual art adopts the method of combining visual and auditory multimedia, showing rich and novel audio-visual effects.
6. according to the taste of the color. Green and yellow-green are immature fruit colors with sour and astringent taste. Orange, light yellow, light brown and pink are reminiscent of ripe melon and fruit colors, producing a sweet taste. The design of catering websites can follow the above principles.
Sixth, the color distribution of the page.
1. Web content is information storage space, which requires bright background, dark text and high contrast. It's usually black on a white background. If it is black, it can also be gray. You can use very light colors, so light that people can ignore them.
2. The header is where the logo and main information are placed. It's usually dark. It has a high contrast, so users can easily see their position on the website. The title usually has a different "look" from the rest of the page, and it can use a font or color combination that is very different from the content of the page. You can also use the reverse color of web page content.
3. The area where the navigation menu is located. Set the background color of the menu deeper, and then accurately distinguish the different uses of the web page content and the menu by means of higher color contrast, stronger graphic elements or unique fonts.
4. Sidebar, although not all web pages use sidebar, it is still a useful way to display additional information. It should be clearly distinguished from the content of the web page and easy to read.
5. Footer, which is the least important, should not be a bit of a guest. Consider the same color as the sidebar, or press it deeper.
6. Use some jumping colors in color matching to guide the line of sight. For example:/Grey brown is the theme color. Use jumping oranges to navigate, and buttons to guide the direction of sight.
;