A brief discussion on the color matching skills of web pages (a must-read for front-end developers)

Generally speaking, the background color of a web page should be softer, plainer, and lighter, and paired with dark text to make people look natural and comfortable. For a striking visual effect, use a darker color for the title. The following is the experience I have accumulated on the matching of background colors and text colors of web pages when 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 matched with different fonts, they will definitely have good effects. I hope it will be useful to everyone when making web pages.

BgcolorΚ″#F1FAFA″——Good background color for text, elegant
BgcolorΚ″#E8FFE8″———It is better to use it as the background color of the title
BgcolorΚ″#E8E8FF″———It is better to use it as the background color of the text, and the text color should be matched with black
BgcolorΚ″#8080C0″——It is better to match yellow with white text
BgcolorΚ″#E8D098″——Preferably with light blue or blue text
BgcolorΚ″#EFEFDA″ ———It is better to match it with light blue or red text
BgcolorΚ″#F2F1D7″——Elegant with black text, eye-catching with red
BgcolorΚ″#336699″——looks better with white text
BgcolorΚ″#6699CC″——looks better with white text, can be used as a title
BgcolorΚ″#66CCCC″——looks better with white text, can be used as a title
BgcolorΚ″#B45B3E″——looks better with white text, can be used as a title
BgcolorΚ″#479AC7″——looks better with white text, can be used as a title
BgcolorΚ″#00B271″——looks better with white text, can be used as a title
BgcolorΚ″#FBFBEA″———looks better with black text, usually used as body text
BgcolorΚ″#D5F3F4″——looks better with black text, usually used as the main text
BgcolorΚ″#D7FFF0″——looks better with black text, usually used as the main text
BgcolorΚ″#F0DAD2″——looks better with black text, usually used as the main text
BgcolorΚ″#DDF3FF″——looks better with black text, usually used as body text

A light green background with black text, or a white background with blue text are both eye-catching, but the former highlights the background while the latter highlights the text. Red background with white text and darker background with yellow text are very effective.
This article is just a starting point. You can use your imagination to match more innovative and eye-catching colors to make the web page more attractive.

Nowadays, the Internet is getting closer and closer to our lives, and surfing the Internet has gradually become an indispensable part of our lives. The Internet world is colorful, and a large number of excellent and exquisite web pages have emerged. A large amount of online information is presented through text, images, Flash animation, etc. Among them, text is the most important design element in web pages. For beginners of web design, it is particularly important to understand and master the text layout design in web design. The author would like to share his personal opinion below.
Text formatting

Font size, font, line spacing

Font size can be calculated in different ways, such as points or pixels. Because the unit needs to be converted to points when printing based on pixel technology, 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 pounds. Nowadays, many comprehensive websites usually use a 9-pound font size because they have a lot of content to arrange on one page. Larger fonts can be used for headings or other areas that need emphasis, while smaller fonts can be used for footers and auxiliary information. It should be noted that small font sizes can easily create a sense of integrity and refinement, but readability is poor.
Web designers can use fonts to more fully capture the emotion they want to convey in their design. Font selection is an emotional, intuitive act. However, no matter what font you choose, it should be based on the overall concept of the web page and the needs of the viewers. For example: bold fonts are strong and powerful, with masculine characteristics, suitable for content in the machinery, construction industry, etc.; thin fonts are elegant and delicate, with feminine characteristics, and more suitable for content in the clothing, cosmetics, food and other industries. On the same page, if there are fewer font types, the layout will be elegant and stable; if there are more font types, the layout will be lively 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 the text content. Because the browser uses the font library on the local machine to display the page content. As a web designer, you must take into account that most viewers only have three font types and some corresponding special fonts installed on their machines. However, the font you specify may not be found on the viewer's machine, which greatly limits web design. The solution to the problem is: where it is really necessary to use a special font, the text can be made into an image and then inserted into the page.

Variations in line spacing can also have a big impact on the readability of your text. Generally speaking, a line spacing setting close to the font size is more suitable for main text. The normal ratio of line spacing is 10:12, that is, if the font size is 10 points, the line spacing should be 12 points. This is mainly due to the following considerations: appropriate line spacing will form an obvious horizontal blank band to guide the viewer's eyes, while too wide a line spacing will cause a line of text to lose its good continuity.

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

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

Overall layout of text

The main body of the page is a group of many individual words that are arranged together. The role of this group shape in the overall layout of the page should be fully utilized. From an artistic point of view, fonts can be considered an art form in themselves, which has a great influence on people in terms of personality and emotions. In web design, the treatment of fonts is as critical as the treatment of other design elements such as color, typography, and graphics. In a sense, all design elements can be understood as graphics.

1. Graphicalization of text

Fonts have two functions: one is to realize the meaning and semantics of the characters, and the other is the aesthetic effect. The so-called graphics of text emphasizes its aesthetic effect, expressing symbolic text as graphic elements while strengthening its original functions. As a web designer, you can set fonts in the conventional way or design fonts in an artistic way. No matter what, everything should revolve around how to better achieve your design goals.
By turning text into graphics and images and expressing deep design ideas in a more creative form, we can overcome the monotony and dullness of web pages and touch people's hearts.

2. Overlay of text

When text and images or text and text are superimposed, they can create a sense of space, jumping, transparency, noise and narrative, thus becoming active and eye-catching elements on the page. Although the overlapping technique affects the readability of the text, it can create a unique visual effect on the page. This expression method, 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 adopted in web design.

3. Title and text

When arranging the title and text, you can first consider arranging the text into two, three or four columns, and then place the title. The main text is divided into columns to gain space and flexibility on the page, avoiding the dullness of a full-column page and the monotony of title insertion. Although the title is the title of the entire paragraph or the entire article, it is not necessarily placed at the beginning of the paragraph. It can be centered, horizontally, vertically or sideways, and can even be inserted directly into a group of words to break the old rules with a novel layout.

4. Four basic forms of text arrangement

The main body of the page is a group of many individual words that are arranged together. The role of this group shape in the overall layout of the page should be fully utilized.
Even at both ends: The length of the text from left to right is even, and the character group forms a square surface, which looks correct, rigorous and beautiful.
Centered arrangement: When the character spacing is equal, the text is arranged with the center of the page as the axis. This layout makes the text more prominent and creates a symmetrical formal beauty.
Left or right alignment: Left or right alignment makes the beginning or end of the line naturally form a clear vertical line, which is easy to match with graphics. This arrangement is loose and tight, virtual and real, jumping and flowing, creating a formal beauty of rhythm and rhyme. Left alignment is in line with people's reading habits and appears natural; right alignment is less used because it does not conform to reading habits, but it appears novel.
Arrange around image: Arrange text around the edge of the image. If the background map is inserted into the text, it will feel harmonious and natural.

Emphasis on text

1. Emphasis on the beginning of the line <br />Enlarging the first word or letter of the text and decorating it, then embedding it at the beginning of the paragraph is called "dropping" in traditional media layout design. The invention of this technique can be traced back to the manuscript copyists in medieval Europe. Because it can attract attention, decorate and activate the layout, it is used in the text layout of web pages. The amount of drop should span the upper and lower range of a complete line of text. As for how much to magnify, it depends on the web page environment.
2. Emphasis of quotations <br />When formatting the text of a web page, you will often come across summary text, namely quotations. 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 in the layout to emphasize it. There are many ways to arrange quotations, such as embedding them on the left or right side, above, below or in the center of the main text, and they can be distinguished from the main text by changing the font or font size.
3. Emphasis on individual words <br />If individual words are used as the focus of the page, the visual effect of the words can be consciously strengthened by means of bolding, framing, underlining, adding indicative symbols, italicizing the font, etc., so that the words appear outstanding and eye-catching in the overall page. In addition, changing the color of certain text can also emphasize this part of the text. These methods actually all 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 turns purple after the mouse clicks. Using text in different colors can make the part you want to emphasize more eye-catching, but it should be noted that the color of the text should only be used in small amounts. If you want to emphasize everything, you are actually emphasizing nothing. Moreover, using too many colors on a page will affect the viewer's reading of the page content unless you have a special design purpose.

In addition to emphasizing specific parts of the overall text, the use of color will also affect the emotional expression of the entire copy. This involves the emotional symbolism of color, which, due to limited space, will not be discussed in depth here.

Another thing to note is the contrast of text color, which includes contrast in brightness, contrast in purity, and contrast in cold and warm colors. These not only affect the readability of the text, but more importantly, you can achieve the desired design effect, design emotion and design idea through the use of color.

1. Color Processing

Color is the most sensitive thing to human vision. If the color treatment of the homepage is good, it can add icing on the cake and achieve twice the result with half the effort. The general principle of color application 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. When using colors, you can use different main colors according to the needs of the homepage content. Because colors are symbolic, for example: light green, emerald green, golden yellow, and gray-brown can symbolize spring, summer, autumn, and winter respectively. Secondly, there are the symbolic colors of occupations, such as olive green for the military and police, white for medical and health care, etc. Colors also have obvious psychological feelings, such as cold and warm feelings, advance and retreat effects, etc. In addition, colors also have national characteristics. Due to the influence of factors such as environment, culture, and tradition, different ethnic groups have great differences in their preferences for colors. Making full use of these characteristics of color can give our homepage a 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, ochre and other colors. The use of this color tone can make the homepage present a warm, gentle and enthusiastic atmosphere.

2. Cool colors. That is, the combination of colors such as cyan, green, and purple. The use of this color tone can make the homepage present a tranquil, cool and elegant atmosphere.

3. Contrasting tones. That is, putting colors of completely opposite colors 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, giving people a bright, vivid and festive feeling. Of course, if contrasting colors are not used properly, they will have the opposite effect and produce tacky, glaring and undesirable effects. This requires grasping the important principle of "major harmony, minor contrast", that is, the overall color tone should be unified and harmonious, while there can be some small strong contrasts in local areas.

Finally, you also need to consider the depth and lightness of the homepage's background color. Here we borrow a term from photography, which is "high key" and "low key". A light background is called high key; a dark background is called low key. If the background color is dark, the color of the text should be light, with the dark background setting off the light content (text or picture); conversely, if the background color is light, the color of the text should be darker, with the light background setting off the dark content (text or picture). This change in shade is called "brightness change" in color science. Some homepages have a black background, but the text is also written in a darker color. Since the brightness of the colors are close, the readers' eyes will feel strained 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 reader's eyes unbearable.

Web page color matching

The color of a web page is one of the keys to establishing a website's image, but color matching is a headache for netizens. What colors should be used for the background, text, icons, borders, hyperlinks... of a web page, and what colors should be matched to best express the intended connotation? Ajie would like to share some of his experiences here, hoping that they will be of some inspiration to you.

First, let's learn some basic knowledge about colors:

1. Color is caused by the refraction of light.

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

3. Colors are divided into two categories: non-colors and colors. Non-color refers to the black, white and gray system colors. Color refers to all colors except non-color.

4. Any color has the properties of saturation and transparency. Changes in the properties 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 to say, in general, color pages are more attractive than completely black and white pages.

Our usual practice is: use non-color (black) for the main content text, and use color for borders, backgrounds, and pictures. This way, the overall page is not monotonous and the main content will not be dizzying.

●Non-color matching

Black and white is the most basic and simplest combination. White text on a black background or white text on a black background are both very clear and distinct. Gray is a universal color that can be matched with any color and can also help two opposing colors transition harmoniously. If you really can't find a suitable color, then try gray, the effect will definitely not be too bad.

●Color combination

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

1. Color wheel. We can get a color ring by gradually changing the colors from "red->yellow->green->blue->red" in sequence. The two ends of the color wheel are warm colors and cool colors, and in the middle are neutral colors. (As shown below)

Red, orange, orange-yellow, yellow, yellow-green, green, cyan, blue-green, blue, blue-purple, purple, purple-red, red

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

Warm neutral colorsCold neutral colors

2. The psychological feeling of color. 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 cool and warm colors, it conveys a feeling of harmony, tranquility, health and security. It can create an elegant and comfortable atmosphere when paired with golden and light white.

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

Yellow---represents happiness, hope, wisdom and a cheerful personality, and it has the highest brightness.

Blue---is the coolest, freshest and most professional color. When mixed with white, it can create a soft, elegant, and romantic atmosphere (like the color of the sky:)

White---has the feeling of whiteness, brightness, purity and cleanliness.

Black---has a feeling of depth, mystery, silence, sadness and depression.

Gray---it represents moderation, ordinariness, gentleness, humility, neutrality and elegance.

Slight changes in saturation and transparency of each color will produce different feelings. Taking green as an example, yellow-green has a youthful and vigorous visual conception, while blue-green appears quiet and deep.

●Principles of web page color matching

1. Vividness of colors. The colors of the web page should be bright and eye-catching.

2. The uniqueness of color. Have a distinctive color to make people have a strong impression of you. (Refer to the section on standard colors for website CI in the second article of Design Thinking)

3. The suitability of color. That is to say, the color should be suitable for the atmosphere of the content you are expressing. For example, pink is used to reflect the flexibility of female sites.

4. The associative nature of colors. Different colors will produce different associations. Blue reminds us of the sky, black reminds us of the night, red reminds us of happy events, etc. The color you choose should be related to the content of your web page.

●The process of mastering web page colors

As we accumulate experience in web page production, we have a trend in using colors: monochrome -> colorful -> standard color -> monochrome. In the beginning, due to lack of technology and knowledge, only simple web pages with single colors could be produced. After having a certain foundation and materials, people hoped to make a beautiful web page, piling up the best pictures they collected and the most satisfactory colors on the page. But after a long time, they found that the colors were messy and had no personality and style. The third time they repositioned their website, they chose colors that suited them, and the sites they launched were often more successful. When the final design concept and technology reached its peak, they returned to simplicity and used single colors or even non-colors to design simple and exquisite sites.

○Web color matching skills

At this point in the article, some anxious netizens may ask: "What color combination looks good? Can you recommend a few color schemes?" Don't worry, here are some tips that can help you quickly become a color master :)

1. Use one color. Here it means first selecting a color, then adjusting the transparency or saturation (in layman's terms, lightening or darkening the color) to create a new color for use on the web page. Such a page looks unified 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). That’s how I determined the blue and yellow colors for my homepage. The entire page is colorful but not overly colorful.

3. Use a color scheme. Simply put, it is to use a color that reflects a feeling, such as light blue, light yellow, light green; or khaki, earthy gray, earthy blue. The method of determining the color is different for each person. I click 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 a black border look very "jumpy".

In web page color matching, taboo is:

1. Don’t use all the 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 Matching

1. Red has a warm color sense, a strong and extroverted character, and is a color that is very stimulating to people. Red easily attracts people's attention, and it can also make people excited, agitated, nervous, and impulsive. It is also a color that can easily cause visual fatigue.

a) Adding a small amount of yellow to red will make it hotter, more agitated and restless.

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

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

d) Adding a small amount of white to red will make its character gentler, tending to be reserved, shy and delicate.

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

a) Adding a small amount of blue to yellow will transform it into a fresh green. Its arrogant character also disappears, tending to 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 cold and arrogant to a measured enthusiasm and warmth.

c) Adding a small amount of black to yellow will produce the greatest change in color perception and color properties, creating a complex color impression with a distinct olive green. Its color and personality also become mature and easy-going.

d) Adding a small amount of white to yellow makes its color softer, and its coldness and arrogance are diluted, making it more subtle and approachable.

3. The blue color sense is cold, its character is simple and introverted. It is a color that helps to calm people's minds. The simplicity and introverted character of blue often provides a deep, broad and peaceful space for those colors with active personalities and strong expansive power, becoming a friendly and humble friend that sets off the active colors. Blue is also a color that seems to retain a strong personality even after being 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 is more yellow in orange, its character tends to be sweet, bright and fragrant.

b) Mixing a small amount of white into orange can make the color orange appear anxious and weak.

4. Green is a color that has two components: yellow and blue. In green, the expansion of yellow and the contraction of blue are balanced out, and the warmth of yellow and the coldness of blue are offset. This makes the green character the most peaceful and stable. It is a soft, tranquil, peaceful and beautiful color.

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

b) Adding a small amount of black to green will make its character more solemn, sophisticated and mature.

c) Adding a small amount of white to green will make its character tend to be clean, refreshing and fresh.

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

a) When the red component in purple is higher, the perception is oppressive and threatening.

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

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

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

a) Mixing a small amount of red into white will create a light pink color that is fresh and tempting.

b) Mixing a small amount of yellow into white will produce a creamy yellow color, giving a fragrant and greasy impression.

c) Mixing a small amount of blue into white gives people a cool and clean feeling.

d) A small amount of orange is mixed into white, giving it a dry atmosphere.

e) Mixing a small amount of green into white gives people a tender and soft feeling.

f) Mixing a small amount of purple into white can induce people to associate it with a faint fragrance.

The above article briefly discussing web page color matching techniques (a must-read for front-end developers) is all I want to share with you. I hope it can give you a reference, and I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/androidshouce/archive/2016/07/25/5702280.html