Web page color matching skills_html/css_WEB-ITnose

Generally speaking, the background color of a web page should be softer, plainer, lighter, and paired with dark text to make it look natural and comfortable. It may be more suitable for beginners who make web pages. You are used to using some beautiful pictures as the background of your web pages. However, if you browse large commercial websites, you will find that they use more white, blue, yellow, etc. to make the web pages look elegant, generous and warm. More importantly, this can greatly speed up the speed at which viewers open web pages.

Generally speaking, the background color of a web page should be softer, plainer, and lighter, coupled with dark text to make it look natural and comfortable. For a more eye-catching visual effect, use a darker color for the title. The following is my experience in matching the background color and text color of web pages when I was making web pages and browsing other people's web pages. These colors can be used as the background color of the text or the background color of the title. When paired with different fonts, there will definitely be something. Nice effect, I hope it will be useful to everyone when making web pages.

BgcolorΚ″#F1FAFA″???The background color for the main text is good and elegant
BgcolorΚ″#E8FFE8″???The background color for the title is better
BgcolorΚ″#E8E8FF″?? ?The background color for the main text is better, the text color is black
BgcolorΚ″#8080C0″???, and yellow and white text is better
BgcolorΚ″#E8D098″???, light blue or blue Text is better
BgcolorΚ″#EFEFFDA″??? is better with light blue or red text
BgcolorΚ″#F2F1D7″??? with black text is elegant, if it is red, it will look eye-catching
BgcolorΚ ″#336699″???It looks better with white text
BgcolorΚ″#6699CC″???It looks better with white text, you can use it as a title
BgcolorΚ″#66CCCC″???It looks better with white text, you can Make a title
BgcolorΚ″#B45B3E″??? It looks better with white text, you can make a title
BgcolorΚ″#479AC7″??? It looks better with white text, you can make a title
BgcolorΚ″#00B271″ ??? looks better with white text, you can use it as a title
BgcolorΚ″#FBFBEA″??? looks better with black text, usually as the body text
BgcolorΚ″#D5F3F4″??? looks better with black text, generally As the main text
BgcolorΚ″#D7FFF0″??? looks better with black text, usually as the main text
BgcolorΚ″#F0DAD2″??? looks better with black text, usually as the main text
BgcolorΚ″#DDF3FF″ ??? looks better with black text. Generally, as the main text

light green background with black text, or white background with blue text are both eye-catching, but the former highlights the background and the latter highlights the text. A red background with white text, and a darker background with yellow text are very effective.
This article just serves as an "introduction". Everyone can use their imagination to match more innovative and eye-catching colors to make the web page more attractive

Nowadays, the Internet is becoming more and more popular. In recent times, Internet surfing has gradually become an indispensable part of our lives. The online world is colorful, and a large number of excellent and beautiful web pages have emerged. The presentation of a large amount of network information is nothing more than text, images, Flash animations, etc. Among them, text is the most important design element in a web page. For beginners in web design, it is particularly important to understand and master text layout design in web design. The author would like to talk about his personal opinions below.
Formatting of text

Font size, font, line spacing

Font size can be calculated in different ways, such as points #quotel.quoter# or pixels ( Pixel). Because printing based on pixel technology needs to be converted to points, it is recommended to use points as the unit.
The most suitable font size for displaying the main text of a web page is about 12 points. Many comprehensive websites now usually use a font size of 9 points due to the large amount of content that needs to be arranged on one page. Larger fonts can be used for headings or other areas that require emphasis, and smaller fonts can be used for footers and supporting information. It should be noted that small font sizes tend to create a sense of integrity and refinement, but are less readable.
Web designers can use fonts to more fully embody the emotions they want to express in their designs. Font selection is an emotional, intuitive act. However, no matter what font is chosen, it must be based on the overall design of the web page and the needs of the viewer. For example: bold fonts are strong and powerful, with masculine characteristics, and are suitable for content in the machinery, construction industry, etc.; thin fonts are elegant and meticulous, with feminine characteristics, and are more suitable for content in clothing, cosmetics, food and other industries. On the same page, if there are fewer types of fonts, the layout will be elegant and stable; if there are many types of fonts, the layout will be active and colorful. The key is how to grasp this proportional relationship based on the page content.

From the perspective of enhancing platform independence, it is best to use the default font for text content. Because the browser uses the font library on the local machine to display the page content. As a web designer, you must consider that most browsers only have three font types and some corresponding specific fonts installed on their machines. The font you specify may not necessarily be found on the viewer's machine, which brings great limitations to web design. The solution to the problem is: where it is really necessary to use special fonts, the text can be made into an image and then inserted into the page.

Changes in line spacing will also have a great impact on the readability of text. In general, line spacing settings close to the font size are more suitable for body text. The normal ratio of line spacing is 10:12, that is, if the characters are 10 points, the line spacing will be 12 points. This is mainly due to the following considerations: Proper line spacing will form an obvious horizontal blank band to guide the viewer's eyes, while excessive line spacing will cause a line of text to lose good continuity.

In addition to its impact on readability, line spacing itself is also a highly expressive design language. In order to enhance the decorative effect of the layout, line spacing can be consciously widened or narrowed to reflect unique aesthetic interest. For example, widening the line spacing can reflect a relaxed and relaxed mood, and is appropriate for entertaining and lyrical content. In addition, through careful arrangement, wide and narrow spacing can coexist, which can enhance the spatial hierarchy and flexibility of the layout and show unique ingenuity.

Line spacing can be set using the line-height attribute. It is recommended to use points or a percentage of the default line height as the unit. For example: {line-height: 20pt}, {line-height: 150%}.

The overall arrangement of text

The main text part of the page is a group composed of many individual words arranged. It is necessary to give full play to the shape of this group in the overall layout of the page. effect. From an artistic point of view, font itself can be regarded as an art form, which has a great impact on people's personality and emotions. In web design, the processing of fonts is as critical as the processing of other design elements such as color, layout, graphics, etc. In a sense, all design elements can be understood as graphics.

1. Graphical text

Fonts have two functions: one is to realize the function of word meaning and semantics, and the other is aesthetic effect. The so-called graphicalization of text means emphasizing its aesthetic effect, expressing symbolic text as graphic elements, and at the same time strengthening the original function. As a web designer, you can either set fonts in a conventional way or design them artistically. No matter what, everything should focus on how to achieve your design goals better.
Graphicalizing and imaging text can express deep design ideas in a more creative form, which can overcome the monotony and plainness of web pages and impress people's hearts.

2． The overlay of text

The overlay between text and images or between text and text can produce a sense of space, jumping, transparency, noise and narrative, thus becoming the center of the page. An active, eye-catching element. Although the overlay technique affects the readability of the text, it can create a unique visual effect on the page. This expression technique, which does not pursue readability but deliberately pursues "noise", embodies an artistic trend. Therefore, it is not only widely used in traditional layout design, but also widely used in web design.

3. Title and text

When arranging the title and text, you can first consider arranging the text into two columns, three columns or four columns, and then place the title. The purpose of dividing the text into columns is to obtain space and flexibility on the page, and to avoid rigidity in the columns and singleness in the way of inserting titles. Although the title is the title of the entire paragraph or article, it does not necessarily have to be placed at the beginning of the paragraph. It can be arranged in the center, horizontally, vertically or on the side, and can even be directly inserted into word groups to break the old rules with a novel layout.

4. Four basic forms of text arrangement

The main text part of the page is a group composed of many individual words arranged. It is necessary to give full play to the role of this group shape in the overall layout of the page.
Both ends are even: the length of the text from the left end to the right end is even, and the character group forms a square surface, which looks upright, rigorous, and beautiful.
Centered arrangement: When the word spacing is equal, arrange the text with the center of the page as the axis. This arrangement method makes the text more prominent and creates a symmetrical formal beauty.
Left-aligned or right-aligned: Left-aligned or right-aligned makes the beginning or end of the line naturally form a clear vertical line, which is easy to match the graphics. This arrangement method is loose and tight, empty and solid, jumping and elegant, creating a formal beauty of rhythm and rhythm. Left alignment conforms to people's reading habits and appears natural; right alignment is rarely used because it does not conform to reading habits, but it appears novel.
Arrange around the image: Arrange the text around the edge of the image. If you insert the base image into the text, it will feel harmonious and natural.

Emphasis of words

1. Emphasis at the beginning of the line
The first word or letter of the text is enlarged and decorated, and embedded at the beginning of the paragraph. This is called "drop style" in traditional media layout design. The invention of this technique can be traced back to medieval scribes in Europe. Because it attracts attention, decorates and activates the layout, it is used in the text layout of web pages. The range of the drop should span the range of one complete line of text. As for the amount of magnification, it depends on the web page environment.
2． Emphasis on citations
When arranging web page text, you will often encounter outlining text, that is, citations. A quotation summarizes the main idea of ​​a paragraph, a chapter, or the entire text, so it should be given special page position and space for emphasis in the layout. Quotations can be arranged in various ways, such as embedding them on the left and right sides, above, below or in the center of the text, and can be changed in font or size to differ from the text.
3. Emphasis on individual words
If you regard individual words as the focus of the page, you can consciously strengthen the visual effect of the words by bolding, adding boxes, underlining, adding indicator symbols, italic fonts, etc., so that the visual effect of the words can be enhanced. It looks outstanding and eye-catching on the page as a whole. In addition, changing the color of some text can also make this part of the text emphasized. These methods actually use the law of contrast.

Text color

In web design, designers can choose various colors for text, text links, visited links and currently active links. For example, if you use the FrontPage editor, the default settings are as follows: the normal font color is black, the default link color is blue, and it changes to purple after the mouse is clicked. Using text of different colors can make the part you want to emphasize more eye-catching, but it should be noted that the color of text can only be used in a small amount. If you want to emphasize everything, nothing will be emphasized. Moreover, using too many colors on a page will affect the viewer's ability to read the page content, unless you have a special design purpose.

In addition to emphasizing special parts of the overall text, the use of color can also have an impact on the emotional expression of the entire copy. This involves the emotional symbolism of color, which will not be discussed in depth here due to space limitations.

Another thing to note is the contrast of text color, which includes contrast in brightness, contrast in purity, and contrast in warmth and coldness. These not only affect the readability of text, but more importantly, you can achieve the desired design effects, design emotions and design ideas through the use of color.

1. Color processing
　
Color is the most sensitive thing to human vision. If the color of the home page is well handled, it can be the icing on the cake and achieve twice the result with half the effort. The general application principle of color should be "overall coordination, 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 colors, different main colors can be used according to the needs of the homepage 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 colors, such as olive green for military and police, white for medical and health care, etc. Color also has obvious psychological feelings, such as cold and warm feelings, advancing and retreating effects, etc. In addition, colors also have national characteristics. Due to the influence of environment, culture, tradition and other factors, various ethnic groups also have large differences in their color preferences. Making full use of these characteristics of color can make our homepage have profound artistic connotation, thereby enhancing the cultural taste of the homepage. Here are some commonly used color schemes:

1. Warm colors. That is, the combination of red, orange, yellow, ocher and other colors. The use of this color can give the homepage a warm, warm and enthusiastic atmosphere.　　

　　2. Cool colors. That is, the combination of cyan, green, purple and other colors. The use of this color can give the homepage a quiet, cool and elegant atmosphere.　　

　3. Contrast colors. That is to match colors with completely opposite color properties in the same space. For example: red and green, yellow and purple, orange and blue, etc. This color combination can produce a strong visual effect and give people a bright, colorful and festive feeling. Of course, contrasting tones, if used incorrectly, can be counterproductive and produce tacky, eye-catching effects. This requires grasping the important principle of "major harmony, small contrast", that is, the overall tone should be unified and harmonious, and there can be some small strong contrasts in local areas. ​

Finally, you also need to consider the depth and lightness of the homepage background color (background color). To borrow a term from photography, it is "high-key" and "low-key." Those with light background colors are called high-key; those with dark background colors are called low-key. If the background color is dark, the color of the text should be light, and the dark background should be used to set off the light-colored content (text or pictures); conversely, if the background color is light, the color of the text should be darker, and the light-colored background should be used to set off the dark content. Content (text or images). This change in depth is called "brightness change" in color science. On some homepages, the background color is black, but the text is also in a darker color. Since the brightness of the colors is relatively close, the readers' eyes will feel very hard when reading, which affects the reading effect. Of course, the brightness of the color cannot change too much, otherwise the brightness contrast on the screen will be too strong, which will also make the readers' eyes unbearable.

Color Matching of Web Pages 　　

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

First, let’s understand some basic knowledge of color:

1. Color is produced by the refraction of light.

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

3. Colors are divided into two categories: achromatic and chromatic. Achromatic colors refer to black, white, and gray system colors. Color refers to all colors except achromatic colors.

4. Any color has attributes of saturation and transparency. Changes in attributes produce different hues, so at least millions of colors can be produced.

Is it better to use color or non-color when making web pages? According to research conducted by professional research institutions, the memory effect of color is 3.5 times that of black and white. That is, in general, color pages are more attractive than completely black and white pages.

Our usual approach is: use non-color (black) for main content text, and use color for borders, backgrounds, and pictures. In this way, the page as a whole is not monotonous, and the main content will not be dazzling.

●Non-color combinations

Black and white is the most basic and simple combination. White characters on a black background, and white characters on a black background are very clear. Gray is a universal color that can be matched with any color and can also help the harmonious transition between two opposing colors. If you really can't find a suitable color, then try gray, the effect will never be too bad.

● Color matching 　

Colors are ever-changing, and color matching is the focus of our research. We still need to learn more about color.

1. Color circle. We can get a color ring by overgrading the colors from "red ->yellow ->green ->blue ->red". The two ends of the color wheel are warm colors and cold colors, with medium colors in the middle. (As shown below)

Red. Orange. Orange-yellow. Yellow. Yellow-green. Green. Turquoise. Blue-green. Blue. Blue-violet. Purple. Purple-red. Red

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

Warm colors, neutral colors, cold colors, neutral colors psychological feeling. Different colors will give viewers different psychological feelings.

Red---is an exciting color. The stimulating effect can make people feel impulsive, angry, enthusiastic, and energetic. Green---between the cold and warm colors, it gives a feeling of harmony, tranquility, health and security. Paired with golden yellow and light white, it can create an elegant and comfortable atmosphere.

Orange---is also an exciting color, with light, cheerful, warm, warm and fashionable effects.

Yellow---has happiness, hope, wisdom and light personality, and has the highest brightness.

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

White---has a feeling of whiteness, brightness, innocence and cleanliness.

Black---has deep, mysterious, quiet, sad, and depressing feelings.

Gray---has a feeling of moderation, ordinaryness, gentleness, humility, neutrality and elegance.

Slight changes in saturation and transparency of each color will produce a different feeling. Taking green as an example, yellow-green has a youthful and exuberant visual artistic conception, while blue-green appears tranquil and dark.

●Principles of web color matching

　1. The vividness of color. The colors of the web page should be bright and eye-catching. 2. The uniqueness of color. Have a distinctive color to make everyone's impression of you strong. (Refer to the section on standard colors for website CI in Part 2 of Design Thinking)

　3. Suitability of color. That is to say, the color is suitable for the atmosphere of the content you express. For example, using pink to reflect the flexibility of a female site.

4. The association of color. Different colors will have different associations. Blue thinks of the sky, black thinks of the night, red thinks of happy events, etc. The color you choose should be related to the connotation of your web page.

●The process of web color mastering 　

With the accumulation of web page production experience, we have such a trend in using colors: monochrome-> colorful-> Standard color->Single color. In the beginning, due to the lack of technology and knowledge, I could only create a simple web page with a single color. After having a certain foundation and materials, I hope to create a beautiful web page and pile the best pictures and the most satisfying colors I have collected on the page. ; But as time went by, I found that the colors were messy and had no personality and style; I repositioned my website for the third time and chose colors that suited me, and the launched sites were often more successful; when the final design concept and technology reached their peak, Going back to basics, you can design a simple and beautiful site with a single color or even non-color.

○Techniques for color matching on web pages

At this point in the article, impatient netizens may want to ask: "What color combinations should I use to look good? Can you recommend it?" How many color schemes? "Don't worry, here are some tips that can help you quickly become a color master:)

　1. Use one color. This refers to selecting a color first, and then adjusting the transparency or saturation (to put it more simply, it means making the color lighter or darker) to generate a new color for use on the web page. Such a page looks uniform in color and has a sense of hierarchy.

2. Use two colors. First select a color, then select its contrasting color (press ctrl shift I in photoshop). This is how my homepage was decided with blue and yellow. The entire page is colorful but not overly colorful.

3. Use a color system. To put it simply, use a color that feels like light blue, light yellow, light green; or earthy yellow, earthy gray, earthy blue. The method of determining the color is different for everyone. I click on the foreground color box in Photoshop, select "Custom" in the color picker window that pops up, and then select it in the "Color Library" :)

4. Use black and one color. For example, bright red fonts with black borders feel very "popular".

In web color matching, the taboos are:

1. Don’t use all colors, try to limit it to three colors.

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

Color Pairings

1. Red is a warm color with a strong and outgoing personality. It is a color that is highly stimulating to people. Red can easily attract people's attention, and it can also easily make people excited, excited, nervous, impulsive, and it is also a color that can easily cause visual fatigue.

　a) Adding a small amount of yellow to red will make it have strong heat and make it restless and restless.

b) Adding a small amount of blue to red will weaken its heat and make it more elegant and soft.

c) Adding a small amount of black to red will make its character calm, heavy and simple.

d) Adding a small amount of white to red will make it gentle, reserved, shy and delicate.

2. The yellow character is indifferent, arrogant, sensitive, and has a visual impression of expansion and restlessness. Yellow is the most delicate color among various colors. As long as a small amount of other colors are mixed into pure yellow, its hue and color character will change to a great extent.

　a) Adding a small amount of blue to yellow will transform it into a fresh green. Its arrogant character also disappeared, and it became a peaceful and moist feeling.

b) Adding a small amount of red to yellow will give it a distinct orange feel, and its character will change from indifferent and arrogant to a measured passion and warmth.

c) Add a small amount of black to yellow, the color feel and color properties will change the most, becoming a complex color impression with obvious olive green. His color and nature have also become mature and easy-going.

d) Adding a small amount of white to yellow makes the color softer, and the indifference and arrogance in the character are diluted, making it more reserved and approachable.

3. Blue has a sense of cynicism and a simple and introverted personality. It is a color that helps people to calm down. The simple and introverted character of blue often provides a profound, broad and calm space for those colors with active personalities and strong expansion power, becoming a friendly and humble friend that sets off the active colors. Blue is also a color that seems to maintain a strong personality even after it is diluted. If you add a small amount of red, yellow, black, orange, white and other colors to blue, it will not have a significant impact on the character of blue.

a) If there are more yellow components in orange, its character tends to be sweet, bright and fragrant.

b) Mixing a small amount of white into orange can make the perception of orange become restless and weak.

4. Green is a color with yellow and blue components. In green, the expansion of yellow and the contraction of blue are balanced, and the warmth of yellow and the coldness of blue are offset. This makes green characters the most peaceful and stable. It is a soft, quiet, smooth and beautiful color.

　a) When there are more yellow components in green, the character tends to be lively, friendly and childish.

b) Add a small amount of black to green, and its character will become solemn, sophisticated and mature.

c) Add a small amount of white to green, and its character will become clean, refreshing and fresh.

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

　a) When there are more red components in purple, the perception is depressive and threatening.

b) Adding a small amount of black to purple will make it feel dull, sad, and scary.

c) Adding white to purple can make the dull character of purple disappear and become elegant, delicate and full of feminine charm.

6. White has a bright color and a simple, pure and happy character. White is holy and inviolable. If any other color is added to white, it will affect its purity and make its character subtle.

　a) Mix a small amount of red into the white to make it a light pink, fresh and full of temptation.

b) Mix a small amount of yellow into white to create a milky yellow color, giving people a fragrant impression.

c) Mix a small amount of blue into white to give people a cool and clean feeling.

　d) Mix a small amount of orange into the white to give it a dry atmosphere.

e) Mix a small amount of green into white to give people a childish and soft feeling.

　f) Mixing a small amount of purple into white can induce people to think of a light fragrance.