Web Design Color Matching

Source: Internet
Author: User

Because it is a beginner, so there is no experience! But I believe that as long as you learn, you will be experienced. With a good frame and page design, and color control is not allowed, it will lead to the entire design failure.

Color, is the first and most lasting to visitors to the site image factor. The importance of color harmony, is you and I understand:). How do you do a good job of color matching? The following summed up a number of practical color design points, hoping to bring help to everyone.

First, determine the body color

Follow the master-slave relationship, which is the most stable treatment of color principles.

Usually we describe the page color as saying: Under the Banyan Tree (http://www.rongshuxia.com) is green. The Ant League (http://www.yimeng.org) is purple.

In fact, red, yellow, green, blue, purple and so on each of the words represent a specific color, that is, hue, it refers to the appearance of color, is the difference between the name of the color category. In the page, in addition to white for a large number of colors used outside the background, is the main color of this page. If you use a variety of colors on the same page, you can't determine which one is the main color if you don't grasp it properly. Because the other color area can not be too large, follow the master-slave relationship.

Two, similar color

Choose a color similar to color, very easy to match.

Explain: Suppose the red inside white, red will be more and more bright, increase the brightness. In addition to black, red is getting darker. Decrease in the degree of Ming. So the lightness of color refers to the degree of light or shade of any color.

If you add black, white, gray, or another color in the blue, it will make the blue impure and no longer bright. So the purity of color refers to the color of each color of the bright degree.

With the color system (with hue), lightness or purity of a variety of different colors easy to match, such as pick several shades of green to match, the General page will not have too much problem; try not to have 4 more colors on the same page. The color collocation of super Connection also follows the principle above. and the color of the text, you want to separate from the background. There's a small way: Open the Dreamweaver color box (pictured below). If they are a group of 6 colors, each group is a good color scheme, but are more high-profile. In fact, if you encounter trouble with color, you can in the color panel, into different colors, to see their adjacent color, or several colors to match, find the right color of your page is absolutely not difficult.


Third, color balance

It is a comparative insurance of the complementary principle of color matching. A variety of colors exist at the same time is not easy to grasp, we must reconcile unity.

For example, the use of color error-viewing phenomenon, the weight of the wrong view in the practical design of many useful. That is, the brightness of a high light color looks lighter, the lower the lightness of dark darker is heavier.

Then in the web design, if the use of more brightness higher color. For example, in Figure 3, the left side is lighter color or bright color, you can use black, or with the hue of the dark facet backlog, embellishment, so that the page is not too light, to achieve the balance of color weight. The color balance is more consistent with the color mentality of most people. According to your situation, such as the use of black, may be serious and solemn, but with the hue of the dark, it is easier.

Four, black and white ash application

In fact, black and white Gray is a treasure, you can not underestimate them.

If you encounter trouble with the color, you can large area of white, gray, small area plus black to adjust other color collocation improper. Encounter the use of high purity of color, such as blue, pure yellow, etc., such a mix will be very bright, visual feeling more excited. This kind of color brightness elevation or lower, with the gray, White, is also the method of regulation.

Http://www.kvad.com/v5/portfolio/design.html, with black to adjust red and green, with harmony and stability.

Five, color psychology and emotion

Select the color that fits the content style.

1. Color has a warm and cold feeling. such as children's sites do not use cold color, and color to enrich some.

2. Color has a soft and hard sense. With hue, high degree, there is a feeling of softness. Low brightness, there will be a hard feeling. Female sites, the appropriate selection of soft pale pink or high-grade gray, while the male class site, you can use Brown, dark blue.

3. From the hue, warm color to the feeling of gorgeous, from the lightness of view, high brightness of the feeling gorgeous, from the purity of the high purity of the colors give people a feeling gorgeous. This kind of jewelry site can use elegant coffee and gold, and perfume sites can be used to high light green or pale blue.

4. The Color Association. Association of the main hue abstraction (omitting specific associations):

Red: Passion. Orange: Warm and joyful. Yellow: Bright, Merry. Green: peaceful, fresh. Blue: Quiet, calm, sensible. Purple: Elegant, noble, solemn, mysterious. Black: Horror, death. White: pure, holy, clean. Grey, modesty, etc.

such as game site, suitable for black, dark more mysterious. Tourism site, you can choose grass-green with yellow. Government sites, you can use red, blue. Fashion site, you can choose high-level gray, purple and so on, highlighting the elegant atmosphere. Campus class site is also suitable for green. Science and technology suitable for dark blue. News class for Dark red, or black, with high ash and so on.

5. The level of color brightness and the level of sound related. Strong colors such as bright yellow, bright red, with sharp, high-pitched musical sense. Dark black color such as sea blue, dark gray and so on with a deep and vigorous music sense. Modern audio-visual art is a combination of visual and auditory multimedia methods, showing a rich and innovative audio-visual effects.

6. According to the color sense of taste. Green, yellow-green is immature fruit color, there is sour, astringent taste feeling. Orange, pale yellow, light brown, pink makes people think of ripe fruit color and produce sweet taste feeling. Design diet site, you can follow the above principles.

Six, the color distribution of the page

1. Web page content, is the information storage space, requires the background to be bright, the text to be dark, the contrast is high. Generally is white black word, if is black bottom, can also be the gray word, can use very light color to do, light to let a person can ignore.

2. The website header is the place where the logo and the main information are placed. usually darker. Has a high contrast so that users can easily see where he is in the site. The title usually has a different "style" from the rest of the page, and it can use a combination of fonts or colors that are very different from the content of the page. You can also use the reverse color of the Web page content.

3. The area where the navigation menu is located. Set the menu background color darker, and then rely on higher color contrast, more intense graphic elements, or unique fonts to separate the content of the Web page from the exact area of the menu for different purposes.

4. Sidebar, although not all pages use sidebar, it is still a useful way to display additional information. It should be separated from the content of the Web page, but also easy to read.

5. Footer, this one is the least important, should not be distracting. Consider the same color as the sidebar, or a slightly darker color.

6. Use some of the more jumping colors on the color palette to guide the line of sight. such as: http://www.biznew.com/Gray Brown for the theme color. Use the jump orange to do the navigation, buttons, to guide the direction of sight.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.