Web color collocation Tips

In general, the background color of the Web page should be softer, some, light, and then with a dark text, so that people look natural, comfortable for web-based beginners may be more accustomed to using some beautiful pictures as their own web site background, but, browse a large commercial website, you will find that they use more white, Blue, yellow, and so on, make the webpage appear elegant, generous and warm. More importantly, this can greatly speed up the browser to open the page.

In general, the background color of the web should be softer, some, lighter, and then with a dark text, so that people look natural, comfortable. In pursuit of eye-catching visual effects, you can use darker colors for headings. Below is I do the Web page and browse other People's web page, the background color of the page and text color with the accumulation of experience, these colors can do the body color, you can do the background of the title, and then with different fonts, there will be a good effect, I hope that everyone in the production of web pages useful.

Bgcolorκ″ #F1FAFA ″ ——— do the background color of the text is good, elegant
Bgcolorκ″ #E8FFE8 ″ ——— The background color of the title is better
Bgcolorκ″ #E8E8FF ″ ——— do the background color of the body is good, the text color with black
Bgcolorκ″ #8080C0 ″ ——— with yellow and white text better
Bgcolorκ″ #E8D098 ″ ——— with light blue or bluish text
Bgcolorκ″ #EFEFDA ″ ——— with light blue or red text better
Bgcolorκ″ #F2F1D7 ″ ——— with black text, if it's red, it looks sharp.
Bgcolorκ″ #336699 ″ ——— with white text look better
Bgcolorκ″ #6699CC ″ ——— with white text look good, can do the title
Bgcolorκ″ #66CCCC ″ ——— with white text look good, can do the title
Bgcolorκ″ #B45B3E ″ ——— with white text look good, can do the title
Bgcolorκ″ #479AC7 ″ ——— with white text look good, can do the title
Bgcolorκ″ #00B271 ″ ——— with white text look good, can do the title
Bgcolorκ″ #FBFBEA ″ ——— with black text more beautiful, generally as the body
Bgcolorκ″ #D5F3F4 ″ ——— with black text more beautiful, generally as the body
Bgcolorκ″ #D7FFF0 ″ ——— with black text more beautiful, generally as the body
Bgcolorκ″ #F0DAD2 ″ ——— with black text more beautiful, generally as the body
Bgcolorκ″ #DDF3FF ″ ——— with black text more beautiful, generally as the body

Light green bottom with black text, or white bottom with blue text are very eye-catching, but the former prominent background, the latter prominent text. Red bottom with white text, the more deep background with yellow text appears very effective.
This article is just a "start" role, we can play the imagination, with a more innovative, more eye-catching color, make the page more attractive

Today, the Internet is getting closer to our lives, and surfing the web is becoming an integral part of our lives. The network world is colorful, the emergence of a large number of excellent beautiful web pages. The presentation of a large amount of network information is nothing more than text, images, flash animation, etc., in which the text is the most important design element in the Web page. For the beginners of web design, it is very important to understand and master the text layout design in Web design, the following author wants to talk about one's own view.
Formatting of text

Font size, font, line spacing

Font size can be calculated in different ways, such as point #quotel.quoter# or pixels (Pixel). Because you need to convert to points when you print in pixel technology, it is recommended that you use points as a unit.
The most suitable font size for the body of the Web page is about 12 points, and now a lot of comprehensive sites, due to the need to arrange more content in one page, usually with 9 points of font size. Larger fonts can be used for headings or other places to emphasize, and smaller fonts can be used for footers and ancillary information. It is important to note that small fonts tend to produce a sense of wholeness and refinement, but are less readable.
Web designers can use fonts to more fully reflect the feelings of the design to express. Font selection is a perceptual, intuitive behavior. However, whatever font you choose, you have to rely on the overall vision of the Web page and the needs of your visitors. For example: bold strong, male characteristics, suitable for machinery, construction and other content, fine characters, elegant and meticulous, with female characteristics, more suitable for clothing, cosmetics, food and other industry content. On the same page, the font type is few, the layout is elegant, there is a sense of stability, a variety of fonts, the layout active, colorful. The key is how to master this proportional relationship based on the content of the page.

From the perspective of enhancing platform independence, it is best to use the default font for body content. Because the browser is to display the content of the page with a font on the local machine. As web designers must consider that most of the browser's machines contain only three font types and some corresponding specific fonts. The font you specify is not necessarily found in the browser's machine, which is a great limitation for web design. The solution is to make the text image and then insert it into the page, where it is necessary to use a particular font.

The change in line spacing can also have a significant effect on the readability of the text. In general, the line spacing setting that is close to the font size is more appropriate for the body. The general scale of the line spacing is 10:12, which is 10 points with the word, leading 12 points. This is mainly due to the following considerations: the appropriate line spacing will form an obvious horizontal blanking zone to guide the visitors ' gaze, and the wide spacing will result in a loss of a good continuity of text.

In addition to the effect of readability, line spacing itself is a strong expressive design language, in order to enhance the decorative effect of the layout, you can consciously widen or narrow the line spacing, reflect the unique aesthetic charm. For example, widening the line spacing can reflect relaxed, stretch mood, apply to entertaining, lyrical content appropriate. In addition, through careful arrangement, so that wide and narrow line spacing coexist, can enhance the space level and elasticity of the layout, showing a unique ingenuity.

The line spacing can be set with the row height (line-height) property, which is recommended as a percentage of points or the default line height. For example: {line-height:20pt}, {line-height:150%}.

The overall layout of the text

The body part of the page is composed of many individual words through the composition of the group, to give full play to this group shape in the overall layout of the role. From the angle of art, the font itself can be regarded as an art form, which has a great influence on people in terms of personality and emotion. In web design, the processing of fonts is as critical as the processing of other design elements such as color, layout, graphics, and so on. In a sense, all design elements can be understood as graphs.

1. The graphic of the text

Font has two functions: one is to realize the function of word meaning and semantics, and the other is the aesthetic effect. The so-called graphic, that is to emphasize its aesthetic effect, the marked text as graphic elements to express, while strengthening the original function. As a web designer, you can either set the font in the usual way, or you can design the font in an artistic fashion. In any case, everything should revolve around how to achieve your design goals better.
The text graphics, imagery, in a more creative form to express the deep design ideas, can overcome the monotonous and dull web pages, so as to impress people.

2. Overlapping of text

After overlapping between the text and the image or between the text and the text, it can create a sense of space, jumping, transparency, noise and narrative, thus becoming an active and compelling element in the page. Although the overlapping technique affects the readability of the text, it can create a unique visual effect on the page. This non-pursuit of easy to read, and deliberately pursue the "murmur" of the performance of the method, embodies an art trend of thought. Therefore, it is not only used extensively in the traditional layout design, but also widely used in web design.

3. Title and Body

In the title and text of the arrangement, you can first consider the text as two columns, three columns or four columns of the arrangement, and then the title of the placement. The text column is to find the space and elasticity of the page, to avoid the rigidity of the banner and the uniqueness of the title Insert method. The title is the title of the whole paragraph or the whole article, but it doesn't have to be placed on top of the paragraph. It can be arranged in center, horizontal, vertical or edge, and can even be inserted directly into the word group, in order to break the old law with the new layout.

4. Four basic forms of text choreography

The body part of the page is composed of many individual words through the composition of the group, to give full play to this group shape in the overall layout of the role.
Both ends are homogeneous: The text from the left end to the right end of the length are homogeneous, the word group formed square face, appears correct, rigorous, beautiful.
Center arrangement: In the case of the word spacing is equal, with the page center as the axis arrangement, this arrangement way makes the text more prominent, produces the symmetrical form esthetic feeling.
Left-justified or right-aligned: left-justified or right-aligned to create a clear vertical line at the beginning or end of the line, easily mates with the graphic. This arrangement is loose and tight, there is a real, beating and elegant, rhythm and rhythm of the form of beauty. The left alignment conforms to people's habit of reading, looks natural; Right alignment is less in line with reading habits, but looks new.
Arrange around diagrams: Arrange text around the edges of the graphic. If you insert a basemap into your text, it makes you feel harmonious and natural.

The emphasis of the word

1. Emphasis at the beginning of the line
Enlarges the first word or letter of the body and makes it decorative, embedding the beginning of the paragraph, which is called "drop-down" in the traditional media layout design. The invention of this technique is traced to the manuscript scribe of the European Middle Ages. Because it has the function of attracting sight, decoration and active layout, it is applied to the text arrangement of the webpage. Its drop amplitude should span the upper and lower amplitudes of a full word line. As to how much to enlarge, it depends on the environment of the web.
2. The emphasis of quotations
In the Web page text layout, often encounter sketchy character, that is, citation. The citation summarizes a paragraph, a chapter, or the general meaning of the text, so the layout should be given special page location and space to emphasize. Citations are arranged in a variety of ways, such as embedding a citation in the left-right, top, bottom, or center position of the body, and can vary in font or font size from the body.
3. The emphasis of individual words
If the individual text as the focus of the page, you can be bold, framed, underlined, plus indicators, italic font and other means to consciously enhance the visual effect of the text, so that it appears in the overall page outstanding and eye-catching. In addition, changing the color of certain words can also make this part of the text to be emphasized. These methods are actually using the law of contrast.

The color of the text

In web design, designers can choose a variety of colors for text, text links, visited links, and currently active links. For example, if you use the FrontPage Editor, the default setting is: The normal font color is black, the default link color is blue, and the mouse click turns to magenta. The use of different colors of text can make the part you want to emphasize more compelling, but it should be noted that the color of the text, only a small amount of use, if anything to emphasize, in fact, there is nothing to emphasize. Moreover, using too much color on a page can affect the viewer's reading of the page unless you have a specific design purpose.

The use of color in addition to the emphasis on the whole text of the special part of the role of the entire copy of the emotional expression will also have an impact. This involves the emotional symbolism of color, confined to space, and is not discussed in depth here.

Another thing to note is the contrast of the text color, which includes the contrast of lightness, the contrast of purity, and the contrast of warm and cold. These not only affect the readability of the text, but more importantly, you can use the color to achieve the desired design effect, design feelings and design ideas.

First, color processing

Color is the most sensitive thing in human vision. Home color processing is good, can icing on the cake, to achieve a multiplier effect. The general application of the principle of color should be "overall coordination, local comparison", that is: the overall color effect of the home page should be harmonious, only local, small areas can have some strong color contrast. In the use of color, according to the needs of the content of the home page, respectively, using different main tones. Because the color is symbolic, for example: Tender green, emerald, golden, gray-brown can symbolize the spring, summer, autumn and winter respectively. Second, there are professional signs of color, such as: Military Police's olive green, health care white and so on. The color also has the obvious psychological feeling, for example cold, warm feeling, enters, the retreat effect and so on. In addition, the color also has the nationality, each nationality due to the environment, the culture, the tradition and so on factors influence, to the color preference also has the big difference. The full use of these characteristics of color, can make our home page has a profound artistic connotation, so as to enhance the cultural taste of the homepage. Here are a few common color schemes:

1. Warm tones. That is, red, orange, yellow, ochre color and other color collocation. The use of this hue allows the homepage to present a warm, welcoming and welcoming atmosphere.

2. Cold tones. That is, cyan, green, purple and other color collocation. The use of this hue allows the homepage to present a tranquil, cool and elegant atmosphere.

3. Contrast tones. That is, the color of the completely opposite color collocation in the same space. For example: Red and green, yellow and purple, orange and blue and so on. This color collocation, can produce a strong visual effect, give a person bright, bright, festive feeling. Of course, contrasting tones if used badly, will backfire, produce tacky, dazzling bad effect. This is to grasp the "big reconciliation, small contrast" this important principle, that is, the overall tone should be unified and harmonious, local places can have some small strong contrast.

Finally, consider the depth and light of the background color of the home page, where a term called "high-profile" and "low-key" is borrowed from photography. A shallow undertone is called a high profile; a deep undertone is called a low profile. Deep background, the color of the text will be shallow, with a dark backdrop against the light-colored content (text or pictures); Conversely, the background light, the color of the text will be darker, with a light background to foil the dark content (text or pictures). This variation in color is called "Change of Lightness" in colour science. Some homepage, the background is black, but the text is also selected a darker color, due to the color of the more close, the reader in the reading, the eyes will feel very difficult, affecting the reading effect. Of course, the lightness of color can not change too much, otherwise the brightness contrast on the screen is too strong, the same will make the reader's eyes can not stand.

color collocation of Web pages

Web page color is one of the key to establish the image of the website, color collocation is a headache for netizens. Web page background, text, icons, borders, hyperlinks ..., what color should be used, should be paired with what color to best express the desired connotation? Ah-Jie here to talk about some ideas, hope you have some inspiration.

First, let's start by understanding some of the basics of color:

1. Color is caused by refraction of light.

2. Red, yellow, blue are the three primary colors, the other colors can be used to reconcile the three colors. The color expression in the HTML language of the Web page is represented by the values of these three colors, for example: Red is color (255,0,0) hexadecimal notation (FF0000) white for (FFFFFF), we often see "bgcolor= #FFFFFF" refers to the background color is white.

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

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

Is it good to use color or non-color for web-making? According to the Research Institute of the Professional study shows: color memory effect is 3.5 times times black and white. In other words, in general, color pages are more appealing than full black and white pages.

Our usual practice is: the main content of the text with non-color (black), borders, backgrounds, pictures in color. So the overall page is not monotonous, see the main content will not be dazzled.

non-color collocation

Black-and-white is the most basic and simplest collocation, the black background of black-and-whites is very clear. Gray is a universal color, can be combined with any color, can also help two different colors of the harmonious transition. If you can't find the right color, try it in grey, and the effect will never be too bad.

Color collocation

Color is changeable, color collocation is the focus of our research. We still need to learn some more about color.

A. Color ring. We will color according to the "red-and yellow-green, blue-and red" in turn over the gradient, you can get a color ring. Both ends of the color ring are warm and interferntical, medium color. such as

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

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

Neutral System of neutral cold color system in warm colors

Two. The psychological feeling of color. Different colors will give visitors a different psychological feeling.

The red---is a kind of exciting color. The stimulation effect, can make the person produces the impulse, the anger, the enthusiasm, the vitality feeling.

Green---between the two colors in the middle of warm and cold, appear harmonious, quiet, healthy, safe feeling. It and golden, light white collocation, can produce elegant, comfortable atmosphere.

Orange---is also a kind of exciting color, with light, cheerful, warm, warm, fashionable effect.

Yellow---with happiness, hope, wisdom and brisk personality, it has the highest degree of clarity.

Blue---is the most cool, fresh, professional color. It is mixed with white, can embody supple, elegant, romantic atmosphere (like the color of the sky:)

White---has a white, crisp, pure, clean feeling.

Black---with deep, mysterious, silent, sad, repressed feelings.

Grey---a sense of moderation, mediocrity, moderation, humility, neutrality and elegance.

A slight change in the saturation and transparency of each color creates a different feeling. Take the green as an example, the yellow Green has youth, exuberant visual conception, and the blue-green appears quiet ning, Yin deep.

The principle of Web color collocation

1. Xianmingxing of color. The color of the webpage should be bright and easy to draw attention.

2. The uniqueness of color. To have a different color, so that everyone has a strong impression of you. (Refer to Design Considerations section II of the standard color of CI site)

3. The suitability of the color. This means that the color is appropriate for the atmosphere of the content you are expressing. such as the use of pink to reflect the flexibility of female sites.

4. The associative nature of color. Different colors will produce different associations, blue think of the sky, black think of the night, red think of happy event, and so on, choose the color to be related to the connotation of your Web page.

the process of Web page color mastering

With the accumulation of web-making experience, we use color to have a trend: monochrome, color--color--monochrome. At first, because of the lack of technology and knowledge, can only produce a simple Web page, color single; After a certain basis and materials, want to make a beautiful web page, the best pictures of their own collection, the most satisfactory color piled on the page; But the time is long, but found the color messy, no personality and style , the third re-positioning their own site, choose to match their own color, the site is often more successful, when the final design concept and technology to reach the peak, then back to basics, with a single color or even non-color can be designed to simple and beautiful site.

0 Web page Color collocation tips

The article writes here, has the impatient netizen to ask: "In the end with what color collocation good-looking?" Can you recommend several color schemes? "Don't worry, there's a little bit of finesse here that can help you quickly become a color master:)

1. Use a color. This refers to the first selection of a color, and then adjust the transparency or saturation, (say more popular is to fade or deepen the color), create new colors for the Web page. This page looks like a uniform color and has a layered feel.

2. Use two colors. Select a color first, then choose its contrast color (press ctrl+shift+i in Photoshop). My homepage is so sure with blue and yellow. The entire page is rich in color but does not cost a bit.

3. Use a color palette. The simple thing is to use a feeling of color, such as light blue, yellowish, light green, or naturals, soil ash, earth blue. The way to determine the color of each person, I am in Photoshop by the foreground color box, in the pop-up Color picker window Select "Custom", and then in the "Color Library" selected:)

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

In the color of the Web page, the taboo is:

1. Do not use all colors, try to control in three colors.

2. The background and the previous comparison as far as possible, (absolutely do not use the intricate pattern of the background), in order to highlight the main text content

Color Matching

First, the red color feeling warm, the character is strong and outgoing, is a kind of irritating to the person of the color. Red is easy to attract people's attention, it is also easy to make people excited, excited, nervous, impulsive, or a kind of human visual fatigue easily caused by the color.

A) Add a small amount of yellow in red, it will make its heat strong, tend to restlessness, uneasy.

b) Adding a small amount of blue to the red will weaken the heat and tend to be gentle and gentle.

c) in red to add a small amount of black, will make its character become calm, tend to thick, simple.

d) Add a small amount of white in the red, will make its character become gentle, tend to be subtle, shy, delicate.

Second, the yellow character indifferent, arrogant, sensitive, has the expansion and the restless visual impression. Yellow is the most delicate color in a variety of colors. As long as the pure yellow mixed with a small amount of other colors, its hue and color character will be a greater degree of change.

A) Adding a small amount of blue to the yellow color will turn it into a tender green. Its haughty character disappears with it, tending to a kind of peace, moist feeling.

b) in yellow to add a small amount of red, it has a clear orange feeling, its character will be from apathy, arrogance into a sense of warmth and warmth.

c) Adding a small amount of black in yellow, its color and color change the most, become a color with a clear olive green image of the complex. Its color also become mature, easy-going.

d) in yellow to add a small amount of white, its color change soft, its character of indifference, arrogance is diluted, tends to be implicit, easy to approach.

three, blue color sense cynicism, character simple and introverted, is a kind of help people's mind cynical static color. Blue, simple, introverted character, often for those who are active, with strong expansion of the color, to provide a far-reaching, wide pu, calm space, become a lively color of friendly and humble friends. Blue or a color that still seems to keep a strong personality after fading. If you add a small amount of red, yellow, black, orange, white and other colors in blue, you will not have a more obvious influence on the blue character .

A) If there is more yellow in orange, its character tends to be sweet, bright and fragrant.

b) mixed with a small amount of white in orange, the perception of orange tends to become agitated and powerless.

Four, Green is a yellow and blue two components of the color. In green, the yellow sense of expansion and the blue contraction of the sense of moderation, the yellow warmth and blue color to counteract the cold. This makes the green character the most peaceful and stable. is a soft, quiet, Huang foot, beautiful color.

A) in the green in the composition of the yellow, its character tends to be lively, friendly, with childish nature.

b) in the green to add a small amount of black, its character tends to be dignified, sophisticated, mature.

c) in the green to add a small amount of white, its character tends to clean, fresh, fresh.

The Purple lightness is the lowest in the color material. The low luminosity of purple gives a dull, mysterious feeling.

A) in the purple red in the composition of more, its perception of depression, the threat of feeling.

b) by adding a small amount of black to the purple, the sensation tends to be dull, sentimental, and terrifying.

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

Six, white color sense of light, character simple, pure, happy. White has a sanctity of inviolability. If the addition of any other color in white, will affect its purity, so that its character becomes implicit.

A) in white mixed with a small amount of red, it becomes a faint pink, tender and full of temptation.

b) in white mixed with a small amount of yellow, it becomes a kind of milk yellow, give a person a fragrant impression.

c) in white mixed with a small amount of blue, give people feel cool, clean.

d) mixed with a small amount of orange in white, there is a dry atmosphere.

e) in white mixed with a small amount of green, give a person a tender, soft feeling.

f) in white mixed with a small amount of violet, can induce people to associate with a faint fragrance.

Web color collocation Tips