How should the colors match?

Color is the most sensitive thing for human vision. If the color of the home page is handled well, it can be icing on the cake and achieve twice the result with half the effort. The general application principle of color should be "overall coordination and local contrast", that is, the overall color effect of the homepage should be harmonious, and only local and small areas can have some strong color contrast. In the use of color, you can use different main colors according to the needs of the home page content. Because colors are symbolic, for example, tender green, emerald green, golden yellow and taupe can symbolize spring, summer, autumn and winter respectively. Secondly, there are professional logo colors, such as olive green for military police and white for medical care. Color also has obvious psychological feelings, such as cold and warm feelings, advance and retreat effects, etc. In addition, color is also national, and different ethnic groups have great differences in color preferences due to the influence of environment, culture, tradition and other factors. Making full use of these characteristics of color can make our home page have profound artistic connotation, thus enhancing the cultural taste of the home page. Here are some common color schemes:

1. Warm color. That is, the collocation of red, orange, yellow and ochre. The use of this hue can make the home page present a warm, warm and enthusiastic atmosphere.

2. Cool colors. That is, the collocation of cyan, green and purple. The use of this hue can make the home page present a quiet, cool and elegant atmosphere.

3. Contrast tones. That is, colors with completely opposite colors are collocated in the same space. For example: red and green, yellow and purple, orange and blue, etc. This kind of color collocation can produce a strong visual effect, giving people a bright, lively and festive feeling. Of course, if the contrast color is not called well, it will be counterproductive and produce tacky and dazzling adverse effects. We should grasp the important principle of "great harmony and small contrast", that is, the overall tone should be unified and harmonious, and there can be some small strong contrast in local areas.

Finally, consider the depth of the background color of the home page. Here, I borrow a term from the photography industry, which is called "high-profile" and "low-profile". Light background color is called high-profile; The deep background color is called low-key. If the background color is dark, the text color is light, and the light content (text or picture) is set off with a dark background; Conversely, if the background color is light, the text will be dark, and the dark content (text or picture) will be set off by the light background. This change in depth is called "lightness change" in chromatics. On some homepages, the background color is black, but the text is also dark. Because the brightness of colors is close, readers will feel very tired when reading, which will affect the reading effect. Of course, the brightness of the color can't change too much, otherwise the brightness contrast on the screen is too strong, which will make the reader's eyes unbearable.

Color matching of web pages

The color of a web page is one of the keys to building a website image, but color matching is a headache for netizens. What color should be used for background, text, icons, borders and hyperlinks ... and what color should be used to best express the expected connotation? Ajie talks about some experiences here, hoping to inspire you.

First, let's learn some basic knowledge of color:

1. Color is produced by the refraction of light.

2. Red, yellow and blue are three primary colors, and other colors can be mixed with these three colors. The expression of colors in the html language of web pages is expressed by the numerical values of these three colors. For example, red is the color (255,0,0), hexadecimal representation is (FF0000), and white is (FFFFFFFF). We often see that "bgcolor = # FFFFFFFF" means that the background color is white.

3. Colors can be divided into achromatic colors and colored colors. Achromatic color refers to the system colors of black, white and gray. Color refers to all colors except achromatic colors.

4. Any color has the properties of saturation and transparency, and the change of properties produces different hues, so at least millions of colors can be made.

Is it better to use color or non-color in web page making? According to professional research institutions, the memory effect of color is 3.5 times that of black and white. In other words, generally speaking, color pages are more attractive than completely black and white pages.

Our usual practice is: the main content text is achromatic (black), and the borders, backgrounds and pictures are colored. In this way, the whole page will not be monotonous and the main content will not be dazzling.

● non-color matching

Black and white is the most basic and simple collocation. White words on black background, white words on black background are very clear. Gray is a common color, which can be matched with any color, and can also help the harmonious transition of two opposing colors. If you really can't find the right color, try gray, and the effect will never be too bad.

● Color matching

Colors are ever-changing, and the collocation of colors is the focus of our research. We need to learn some color knowledge further.

1. color ring. We will press "red->; Huang-> Green->; Blue->; "Red" gradually changes, and a color ring can be obtained. The two ends of the color ring are warm and cold colors, and the middle is medium color. (as shown in the figure below)

Red, orange, orange yellow, yellow-green, green, turquoise, turquoise, blue, violet, purple, red.

|___________| |____| |_________| |_________| | | | |

Warm color neutral system cold color neutral system

Second, the psychological feeling of color. Different colors will give tourists different psychological feelings.

Red is an exciting color. Stimulation can make people feel impulsive, angry, enthusiastic and energetic.

Green-between the two colors, it looks harmonious, quiet, healthy and safe. You can use gold and light white to create an elegant and comfortable atmosphere.

Orange is also an exciting color, which has the effects of lightness, joy, warmth and fashion.

Yellow-with happiness, hope, wisdom and lightness, with the highest brightness.

Blue is the coolest, freshest and most professional color. It is mixed with white, which can reflect a soft, elegant and romantic atmosphere (just like the color of the sky:)

White-has a white, bright, pure and clean feeling.

Black-has a deep, mysterious, silent, sad and depressed feeling.

Gray-has a sense of moderation, mediocrity, gentleness, humility, neutrality and elegance.

A slight change in the saturation and transparency of each color will produce different feelings. Take green as an example. Yellow-green has a youthful and energetic visual artistic conception, while blue-green is quiet and gloomy.

● The principle of webpage color matching

1. Brightness of the color. The color of the web page should be bright and easy to attract attention.

2. The uniqueness of color. With distinctive colors, people have a strong impression on you. (Refer to the standard color section of the second website CI)

3. The color is right. In other words, the color matches the atmosphere of your expression. For example, pink reflects the flexibility of women's websites.

4. Correlation of colors. Different colors have different associations, such as blue associated with the sky, black associated with the night, red associated with happy events and so on. The choice of color should be related to the connotation of your web page.

● The process of mastering the colors of web pages.

With the accumulation of web page making experience, there is such a trend that we use colors: monochrome->; Colorful-> Standard color->; Monochrome at first, because of the lack of technology and knowledge, we can only make simple monochrome web pages; With a certain foundation and material, I hope to make a beautiful web page and pile up the best pictures and the most satisfactory colors I have collected on the page; But after a long time, I found that the colors were in a mess and there was no personality and style; Relocate your website for the third time and choose the color that suits you. The website launched is often successful; When the final design concept and technology reach the peak, it will return to the original, and simple and exquisite sites can be designed with a single color or even colorless.

○ Web page color matching skills

The article is written here, and some impatient netizens want to ask: "What color is good?" Can you recommend some color schemes? "Don't worry, here are some tips to help you become a master of color mixing quickly:)

1. Use a color. Here is to select a color first, and then adjust the transparency or saturation (in layman's terms, lighten or deepen the color) to generate a new color for the web page. Such a page looks uniform in color and distinct in layers.

2. Use two colors. First choose a color, and then choose its contrast color (press ctrl+shift+I in photoshop). My homepage is blue and yellow, that's how it's determined. The whole page is colorful but not too expensive.

3. Use a color system. Simply put, it is to use a sensory color, such as light blue, light yellow and light green; Or khaki, khaki, khaki. There are different ways to determine the color. I press the foreground color box in photoshop, select "Custom" in the pop-up color picker window, and then select from the Color Library:)

4. Use black and one color. For example, a red font with a black border feels "jumping".