Webpage color matching skills and webpage color matching skills

Webpage color matching skills and webpage color matching skills

In general, the background color of a web page should be soft, plain, or pale, and be matched with dark text, it makes people look natural and comfortable. For beginners who do web pages, they may be more accustomed to using some beautiful pictures as the background of their own web pages. However, if you look at large commercial websites, you will find that they use more white, blue, and yellow, making the webpage look elegant, generous, and warm. More importantly, this can greatly speed up the speed of page views.

In general, the background color of a web page should be soft, plain, or light, and then be matched with dark text to make people look natural and comfortable. In order to pursue eye-catching visual effects, you can use deep colors for titles. The following is my experience on the combination of webpage background color and text color when I am doing Web pages and browsing other people's web pages. These colors can be used as the background color of the body or the background color of the title, matching different fonts will certainly have a good effect, and we hope it will be useful for you to make webpages.

Bgcolor then "# F1FAFA" --- the background color of the text is good and elegant
Bgcolor then "# E8FFE8" --- the background color of the title is better.
Bgcolor ″ "# E8E8FF" --- the background color of the text is good, and the text color is black.
Bgcolor yellow & #8080C0 & gt; top with good yellow and white text
Bgcolor yellow "# E8D098" --- the light blue or blue text is better.
Bgcolor yellow "# EFEFDA" --- better light blue or red text on
Bgcolor refined "# F2F1D7" --- with plain black text. If it is red, it will be eye-catching.
Bgcolor regular "#336699" --- nice white text
Bgcolor regular "# 6699CC" --- the white text looks better and can be used as the title.
Bgcolor regular "# 66CCCC" --- the white text looks better and can be used as the title.
Bgcolor comment "# B45B3E" --- the white text looks better and can be used as the title.
Bgcolor comment "#479AC7" --- the white text looks better and can be used as the title.
Bgcolor comment "#00B271" --- the white text looks better and can be used as the title.
Bgcolor comment "# FBFBEA" --- it looks nice with black text, generally used as the body
Bgcolor comment "# D5F3F4" --- with black text, it is generally used as the body
Bgcolor comment "# D7FFF0" --- it looks nice with black text, generally used as the body
Bgcolor comment "# F0DAD2" --- it looks nice with black text, generally used as the body
Bgcolor comment "# DDF3FF" --- it looks nice with black text, generally used as the body

Light green background with black text, or white background with blue text are eye-catching, but the former highlights the background, the latter highlights the text. Red background with white text, relatively deep background color with yellow text looks very effective.
This article serves only as an example. You can make full use of your imagination and use new and eye-catching colors to make webpages more attractive.

Today, the Internet is getting closer and closer to our lives, and surfing the internet is gradually becoming an indispensable part of our lives. The online world is colorful and a large number of excellent and exquisite web pages are emerging. The emergence of a large amount of network information is nothing more than text, images, Flash animation, etc. Among them, text is the most important design element in Web pages. For beginners of web design, it is especially important to understand and master the text Layout Design in web design. The author wants to share his own views.
Text Formatting

Font size, Font, line spacing

The font size can be calculated in different ways, such as pound # quotel. quoter # Or Pixel (Pixel ). We recommend that you use lbs as the unit for pixel-based printing.
The most suitable font size for webpage text display is about 12 lbs. Many comprehensive websites now use a 9 lb font size because there are many contents to be arranged on a page. A large font can be used for the question mark or other places that need to be emphasized. A smaller font can be used for the footer and auxiliary information. It should be noted that the small font size is easy to produce the overall and exquisite feeling, but the readability is poor.
Web designers can use fonts to fully reflect the emotions to be expressed in the design. Font selection is a kind of emotional and intuitive behavior. However, no matter What font you select, you must follow the overall idea of the web page and the needs of the browser. For example, the bold Chinese characters are strong and powerful, and have male characteristics. They are suitable for mechanical, construction, and other content. The characters are elegant and meticulous, and have female characteristics. They are more suitable for clothing, cosmetics, food, and other industries. On the same page, there are few Font types, elegant layout, and stability. If there are many Font types, the layout is active and colorful. The key is how to grasp the 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 a font on the local machine to display the page content. As a web designer, you must consider that most viewers have only three types of fonts and some specific fonts. The font you specified cannot be found on the viewer's machine, which brings great limitations to web page design. The solution is to make the text into an image and insert it into the page where it is necessary to use a special font.

Changes in line spacing also have a great impact on text readability. Generally, the line spacing close to the font size is more suitable for text. The regular proportion of line spacing is, that is, if the word is 10 points, the line spacing is 12 points. This is mainly due to the following considerations: the appropriate line spacing will form an obvious horizontal blank band to guide the viewer's eyes, and the excessive line spacing will lead to a row of text loss of good continuity.

In addition to the impact on readability, the line spacing itself is also a strong expressive design language. To enhance the decorative effect of the layout, You can consciously widen or narrow the line spacing to reflect unique aesthetic interests. For example, adding a wide line spacing can reflect a relaxed and relaxed mood and be suitable for entertaining and lyrical content. In addition, through careful arrangement, the wide and narrow line spacing coexist, can enhance the space level and elasticity of the version, show unique ingenuity.

You can use the line-height attribute to set the line spacing. We recommend that you use the lbs or the percentage of the default line height. For example, {line-height: 20pt} and {line-height: 150% }.

Overall text orchestration

The body part of the page is a group composed of many individual texts that have been arranged. You must give full play to the role of the Group shape in the overall layout of the page. From the perspective of art, we can regard the font itself as an artistic style, which has a great influence on people in terms of personality and emotion. In web design, Font Processing is as critical as color, layout, graphics, and other design elements. In a sense, all design elements can be understood as graphs.

1. graphical text

The font has two roles: one is to implement the functions of the meaning and semantics, and the other is the aesthetic effect. The so-called graphic text emphasizes its aesthetic effect, and marks the text as a graphical element, while enhancing its original functions. As a web designer, you can set the font in a regular way or design the font in an artistic manner. In any case, everything should focus on how to better achieve your design goals.
The deep design ideas can be expressed in a more creative form by graphical and visualized text, which can overcome the monotonous and dull web pages and impress people.

2. overlapping text

Between text and images, or between text and text, after overlapping, it can produce space, jump, transparency, noise, and narration, and thus become an active and eye-catching element on the page. Although the stacked hand method affects the readability of the text, it can produce the unique visual effect of the page. This kind of expression that does not pursue easy reading, but deliberately pursues "noisy" reflects an artistic trend. Therefore, it is not only widely used in traditional layout design, but also widely used in web design.

3. Title and body

When you orchestrate the title and body, you can first arrange the body in double, three, or four columns before placing the title. You can split the text into columns to obtain the space and elasticity of the page and avoid the singularity of the blank column and the insertion of the title. Although the title is the title of the entire paragraph or entire article, it is not always placed above the beginning of the paragraph. It can be used for center, horizontal, vertical or edge arrangement, or even directly inserted into the word group to break the old rules with a new layout.

4. Four Basic Forms of text orchestration

The body part of the page is a group composed of many individual texts that have been arranged. You must give full play to the role of the Group shape in the overall layout of the page.
Both ends are consistent: the length of the text from the left end to the right end is consistent, and the word group forms a positive area, which is correct, rigorous, and beautiful.
Center arrangement: if the word distance is equal, it is arranged on the axis of the page center. This arrangement makes the text more prominent and creates a symmetric aesthetic.
Left or right alignment: The left or right alignment naturally forms a clear vertical line at the beginning or end of the line, which is easy to work with the image. This orchestration method is relaxed and tight, has virtual and real, beating and elegant, produce rhythm and rhythm form aesthetic. The left alignment conforms to people's reading habits and appears natural. The right alignment is rarely used because it does not conform to reading habits, but is novel.
Arrange the text around the graph edge. If you insert the basemap into the text, it will be harmonious and natural.

Text emphasis

1. Emphasize at the beginning of the line
Enlarge the first word or letter of the text for decorative processing and embed it into the beginning of the paragraph. This is called a "downloading style" in the traditional media layout design ". The invention of this technique is traced back to the manuscript copywriter in the Middle Ages of Europe. Because it attracts sight, decoration, and active layout, it is applied to text orchestration of webpages. The downfall range should span the upper and lower ranges of a complete line. Depending on the webpage environment.
2. Citation emphasis
During text orchestration on webpages, you will often encounter outline texts, that is, citation. The citation summarizes a paragraph, a chapter, or a full text. Therefore, special page locations and spaces should be provided for tuning in the layout. Citation orchestration is diverse, such as embedding a citation in the left-right, top, bottom, or center of the text, and can be changed in a different font or font size from the text.
3. Emphasis on individual words
If some text is used as the focus of the page appeal, you can consciously strengthen the visual effect of the text by means of bold, framed, underlined, indicative, and skewed font, this makes the entire page outstanding and eye-catching. In addition, changing the color of some text can also emphasize this part of text. These methods actually use the comparison rules.

Text color

In web design, designers can select various colors for text, text links, accessed links, and current activity 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 the mouse clicks turn to purple. Text of different colors can attract more attention, but it should be noted that the color of the text can only be used in a small amount. If you want to emphasize anything, in fact, there is no emphasis on anything. Furthermore, 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 the special part of the entire text, the use of color also affects the emotional expression of the entire text. This involves the emotional symbolic issue of color. It is limited to space and will not be discussed in depth here.

In addition, you need to pay attention to the contrast of the text color, which includes the comparison of brightness, purity, and heating and cooling. These not only affect the readability of the text, but more importantly, you can use the color to achieve the desired design effect, design emotions and design ideas.

I. Color Processing
　　
Color is the most sensitive aspect of human vision. The color of the home page is well processed and can be icing on the cake to get twice the result with half the effort. The general color application principle should be "overall coordination, partial comparison", that is, the whole color effect of the home page should be harmonious, only Local and small areas can have strong color comparisons. In terms of color usage, you can use different dominant colors based on the needs of the homepage content. Because colors are symbolic, such as green, green, golden yellow, and gray-brown, they can represent spring, summer, autumn, and winter respectively. There are also professional colors, such as the olive green of the military and police, and the white color of health care. Colors also have obvious psychological feelings, such as cold and warm feelings, the effects of entering and retreating. In addition, color also has nationality. due to factors such as environment, culture, and tradition, there are also large differences in color preferences. The full use of these features of color can make our home page have a profound artistic connotation, so as to enhance the cultural taste of the home page. The following describes several common color schemes:

1. Warm colors. That is, the combination of red, orange, yellow, and yellow colors. The use of this tone can make the Home Page show a warm, warm, and enthusiastic atmosphere.

2. cold tone. That is, the combination of blue, green, purple and other colors. The use of this color enables the home page to show a quiet, cool, and elegant atmosphere.

3. Compare colors. That is, colors with the opposite color are combined in the same space. For example, red and green, yellow and purple, orange and blue. This color combination can produce a strong visual effect, giving people a bright, bright, and festive feeling. Of course, if the contrast tone is not used well, it will be counterproductive and produce cheesy and dazzling adverse effects. This requires us to grasp the important principle of "Big reconciliation, small comparison", that is, the overall tone should be unified and harmonious, and there may be some small strong comparisons in some parts.

Finally, we need to consider the depth and depth of the background color (background color) of the Home Page. Here we use a term in photography, that is, "high-profile" and "low-profile ". The light background is called a high profile; the deep background is called a low profile. The background color is deep, and the text color should be light. The light content (text or image) should be set against a dark background. On the contrary, the background color is light and the text color should be deeper, use a light background to set off dark content (text or images ). This kind of variation is called "brightness change" in colorology ". On Some homepage, the background color is black, but the text also uses a deep color. Because the brightness of the color is relatively close, readers will feel very hard during reading, this affects reading performance. Of course, the brightness of the color cannot change too much. Otherwise, the brightness contrast on the screen is too strong, which will also make the reader's eyes unable to stand.

Webpage Color Matching 　　

The color of web pages is one of the keys to building a website image. color matching is a headache for netizens. The background, text, icon, border, hyperlink... of a webpage, what colors should be used, and what colors should be used to best express the expected connotation? Alibaba Cloud is here to talk about some experiences and hope to inspire you.

First, let's take a look at some basic color knowledge:

1. The color is produced by the refraction of light.

2. Red, yellow, and blue are the primary colors. Other colors can be blended with these three colors. The color expression in the html language of the webpage is represented by the values of these three colors. For example, the red color (, 0, 0) hexadecimal representation is (FF0000) and the white color is (FFFFFF ), we often see that "bgColor = # FFFFFF" indicates that the background color is white.

3. The color is divided into non-color and color. Non-color indicates black, white, and gray system colors. Color refers to all colors except non-color.

4. Any color has the property of saturation and transparency. attribute changes produce different colors, so at least millions of colors can be created.

Is it good to make webpages in color or non-color? According to professional research institutions, the color memory effect is 3.5 times that of black and white. That is to say, in general, color pages are more attractive than full black and white pages.

Our common practice is: Non-color (black), border, background, and image color for the main content text. In this way, the page is not monotonous and the main content will not be dazzled.

● Non-Color Matching 　

Black and white are the most basic and simple combinations. Black and white characters are clear and clear. Gray is a universal color. It can be used together with any color, and can also help the harmonious transition between the two opposing colors. If you can't find a proper color, try it in gray, and the effect will never be too bad.

● Color Matching 　　

Our research focuses on the ever-changing colors. We still need to learn more about colors.

1. Color Ring. We will change the color by "red-> yellow-> green-> blue-> Red" to an excessive gradient to get a color ring. The two ends of the color ring are warm and cold, medium colors. (For example)

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

| ___________ | ____ | _________ |

 

Warm, neutral, cold, neutral

2. The psychological feeling of color. Different colors give different psychological feelings to viewers.

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

Green-the color between warm and warm colors appears harmonious, peaceful, healthy, and safe. It is a combination of golden and pale colors, which can produce an elegant and comfortable atmosphere.

Orange is also an exciting color, with a brisk, joyful, warm, warm, and fashionable effect.

Yellow-with happiness, Hope, wisdom and brisk personality, it has the highest brightness.

Blue --- the most cool, fresh, and professional colors. It is a mixture of white and soft, elegant, and romantic atmosphere (like the color of the sky :)

White --- white, bright, pure, and clean.

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

Gray: has a moderate, ordinary, gentle, modest, neutral, and elegant feeling.

Each color is in saturation, and a slight change in transparency produces a different feeling. Taking green as an example, yellow and green have youthful and vigorous visual artistic conception, while blue-green is quiet and overcast.

● Principles of web page color matching

1. the freshness of colors. Web pages must be colorful and easy to attract attention.

2. uniqueness of color. You must have different colors to make everyone have a strong impression on you. (Refer to design considerations. Part 2: Standard Color of website CI)

3. suitability of colors. That is to say, the color is suitable for the content and atmosphere you express. For example, the flexibility of female sites is shown in pink.

4. Association of colors. Different colors may have different associations, blue may think of the sky, black may think of the night, red may think of happiness, and so on. The colors selected must be associated with the connotation of your web page.

● Webpage Color Control Process 　

With the accumulation of Web Page production experience, we have a tendency to use colors: monochrome-> colorful-> standard color-> monochrome. At first, due to lack of technology and knowledge, we could only make simple web pages with a single color. After some basics and materials are available, we hope to make a beautiful web page and collect the best pictures we have collected, the most satisfied colors are stacked on the page. However, after a long time, we find that the colors are messy, with no personality or style. The third time, we reposition our website and choose our own colors, the launch of the site is often relatively successful; when the last design philosophy and technology reached the peak, it is easy to return to the truth, with a single color or even non-color can be used to design a simple and exquisite site.

○ Webpage color matching skills

The article was written here, and some impatient netizens asked: "What colors are used for good looks? Can you recommend several color schemes ?" Don't worry. Here is a bit of skill that can help you quickly become a color guru :)

1. Use a color. This refers to first selecting a color, then adjusting the transparency or saturation, (in plain words, fade or deepen the color), to generate a new color for the web page. Such a page seems to have a uniform color and a sense of attention.

2. Use two colors. Select a color, and then select its contrast color (press ctrl + shift + I in photoshop ). My homepage is determined in blue and yellow. The entire page is rich in color, but does not take a long time.

3. Use a color system. Simply put, it is a sense of color, such as light blue, light yellow, light green; or earth yellow, Earth gray, Earth blue. The method for determining colors varies from person to person. In photoshop, select "Custom" in the pop-up Color Picker window, and then select "color library :)

4. Black and a color. For example, the red font with a black border feels like a "Hop ".

In the webpage color scheme, the taboo is:

1. Do not use all colors. Try to keep them within three colors.

2. The comparison between the background and the previous article should be as big as possible (do not use complicated patterns as the background) to highlight the main text content.

 

Face Color Matching

1. The red color is warm, strong, and extroverted. It is a very irritating color to people. Red is easy to attract people's attention, and it is also easy to make people excited, excited, nervous, impulsive, or a color that is easy to cause human visual fatigue.

A) adding a small amount of yellow to the red color will make the red color more intense and restless.

B) adding a small amount of blue to the red will weaken the heat and soften it.

C) adding a small amount of black to the red color will make the character more stable and tend to be heavy and simple.

D) adding a small amount of white to the red will make the character more gentle, and tend to be subtle, shy, and delicate.

2. The yellow personality is indifferent, arrogant, sensitive, and has a visual impression of expansion and inpeace. Yellow is the most delicate color among various colors. As long as a small amount of other colors are mixed into the pure yellow, their color and color will change significantly.

A) adding a small amount of blue to the yellow will convert it into a fresh green. Its arrogant character also disappears, tends to be a peaceful and moist feeling.

B) if you add a small amount of red to the yellow color, it will have a clear orange color, and its character will also change from indifference and arrogance to enthusiasm and warmth with a sense of separation.

C) when a small amount of Black is added to the yellow color, the color perception and the color change are the largest, and the green compound is obviously displayed. Its color also becomes mature and easygoing.

D) add a small amount of white to the yellow color, and the color becomes soft. the indifference and pride in his character are deprecated and tend to be subtle and easy to approach.

3. The blue color is just plain and introverted. It is a kind of color that helps your mind to get sneer. Blue is simple, introverted, and often provides a far-reaching, peaceful space for those who are active and have strong tension, become a friendly and modest friend that sets off Active colors. Blue is a color that can maintain strong personality after being diluted. If you add a small amount of red, yellow, black, orange, white and other colors to the blue, it will not have a significant influence on the blue personality..

A) if there are many yellow ingredients in orange, their character will be sweet, bright, and aromatic.

B) mixing a small amount of white in orange can make orange perception anxious and powerless.

4. Green is the color of yellow and blue. In green, the expansion of yellow and the contraction of blue are moderate, and the warmth of yellow is offset by the cold of blue. This makes the green personality the most peaceful and stable. It is a soft, quiet, beautiful color.

A) when there are many yellow ingredients in green, their personality tends to be lively, friendly, and childish.

B) when a small amount of Black is added to the green field, its personality tends to be solemn, sophisticated, and mature.

C) when a small amount of white is added to the green environment, its character tends to be clean, fresh, and fresh.

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

A) when there are many Red Components in the purple area, the perception has a sense of oppression and threat.

B) when a small amount of Black is added to the purple image, it may feel dull, sad, or horrible.

C) adding white to the purple will make the dull purple character disappear, become elegant, charming, and full of female charm.

6. The white color is bright, simple, pure, and happy. White is holy and not intrusive. If you add any other color to the white, it will affect its purity and make its character more subtle.

A) when a small amount of red is mixed in white, it becomes pale pink, fresh and full of temptation.

B) when a small amount of yellow is mixed in white, it becomes a milk yellow, giving a greasy impression.

C) mix a small amount of blue in white to make people feel cold and clean.

D) mix a few oranges in white and have a dry atmosphere.

E) a small amount of green is mixed in white to give a young and gentle feeling.

F) A small amount of purple is mixed into the white color, which can induce people to think of a faint fragrance.