Color matching in web design!

Best color matching

First, color processing.

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".

In web page color matching, the taboo is:

1. Don't use all colors, try to control them within three colors.

2. The contrast between the background and the previous article should be as large as possible (never use complicated patterns as the background), so as to highlight the main text content.

color schemes

First, the color of red is warm, strong and extroverted, which is a very exciting color. Red is easy to attract people's attention, make people excited, excited, nervous and impulsive, and it is also a color that easily causes people's visual fatigue.

Adding a little yellow to 1. red will make it hot and easy to get restless.

2. Adding a small amount of blue to red will weaken its heat and tend to be gentle and soft.

3. Adding a small amount of black to red will make its character calm and tend to be heavy and simple.

4. Adding a small amount of white to red will make its character gentle and tend to be subtle, shy and delicate.

Second, the yellow characters are indifferent, arrogant and sensitive, and have a constantly expanding and restless visual impression. Yellow is the most exquisite of all colors. As long as a small amount of other colors are mixed into pure yellow, its hue sense and color character will change to a great extent.

1. Adding a small amount of blue to yellow will turn it into a fresh green. Its arrogant character has also disappeared, tending to a feeling of peace and humidity.

2. If you add a little red to yellow, you will have an obvious sense of orange, and your personality will change from indifference and arrogance to a kind of enthusiasm and warmth with appropriate limits.

3. When a small amount of black is added to yellow, its color sense and color change is the biggest, and it becomes a multicolor impression with obvious olive green. Its color has also become mature and easygoing.

4. Adding a small amount of white to yellow will soften its color sense, dilute its indifference and arrogance, and tend to be subtle and easy to approach.

Third, blue is a cynical color, simple and restrained, and it is a color that helps people's hearts to be cynical and quiet. Blue's simple and introverted personality often provides a far-reaching, broad and calm space for those colors with active personality and strong expansibility, and becomes a friendly and modest friend who sets off active colors. Blue is still a color that seems to maintain a strong personality after fading. If you add a small amount of red, yellow, black, orange, white and other colors to the blue, it will not have a significant impact on the blue character.

1, if there are more yellow components in oranges, their characters tend to be sweet, bright and fragrant.

2. Mixing a small amount of white in orange can make the perception of orange tend to be anxious and weak.

Fourth, green is a color with yellow and blue components. In green, the yellow sense of expansion and the blue sense of contraction are moderate, and the yellow sense of warmth and the blue sense of coldness cancel each other out. This makes the green character the most peaceful and stable. It is a soft, quiet and elegant color.

1, when there are more green and yellow components, its personality tends to be lively, friendly and naive.

2. Adding a small amount of black to the green will make the character more solemn, sophisticated and mature.

3. Add a small amount of white to green, and its character will tend to be clean, refreshing and tender.

5. The lightness of purple is the lowest among color pigments. The low lightness of purple gives people a dull and mysterious feeling.

1, when there are more red components in purple, its perception is oppressive and threatening.

2. Adding a little black to purple will make people feel dull, sad and horrible.

3. Adding white to purple can make the dull character of purple disappear, become elegant, exquisite and full of feminine charm.

Six, the white color is bright, and the personality is simple, pure and happy. White is sacred. If you add any other color to white, it will affect its purity and make its character subtle.

1, white mixed with a little red, becomes light pink, fresh and full of temptation.

2. A small amount of yellow mixed with white becomes milky yellow, giving a fragrant impression.

3, white mixed with a small amount of blue, giving people a cold and clean feeling.

4, white mixed with a small amount of orange, there is a dry atmosphere.

5, white mixed with a small amount of green, giving people a tender and soft feeling. 6, mixing a small amount of purple in white can induce people to think of a faint fragrance.