Best Color Matching

Source: Internet
Author: User
Tags expression key

First, color processing

Color is the most sensitive thing to people's vision. Homepage of the color processing good, can icing on the cake, to achieve a multiplier effect. Color general application principle should be "overall coordination, local contrast", namely: Homepage's overall color effect should be harmonious, only partial, small area place can have some strong color contrast. In the use of color, can be based on the needs of the homepage content, respectively, the use of different main colors. Because the color is symbolic, for example: Tender green, emerald, yellow, gray brown can symbolize the spring, summer, autumn and winter respectively. Second, there are professional signs color, such as: Military Police's olive green, medical and health, white and so on. Color also has a clear psychological feeling, such as cold, warm feeling, the effect of entering and returning. In addition, the color also has the national nature, each nationality because of the environment, the culture, the tradition and so on the influence, to the color preference also has the big difference. The full use of these characteristics of color, we can make our homepage has a profound artistic connotation, thereby enhancing the cultural taste of the homepage. Here are a few common color schemes:

1. Warm tones. namely red, orange, yellow, ochre color and so on. This kind of tonal use, can make the homepage present warm, genial, warm atmosphere.

2. Cold tones. namely cyan, green, purple and so on color collocation. This kind of tonal use, can make the homepage appear tranquil, cool, elegant atmosphere.

3. Contrasting tones. That is, the color of the exact opposite color collocation in the same space. For example: Red and green, yellow and purple, orange and blue. This kind of color collocation, may produce the intense visual effect, gives the person bright, bright, joyful feeling. Of course, contrasting tones if used poorly, will backfire, produce tacky, dazzling bad effect. This is to grasp the "great harmony, small contrast" this important principle, that is, the overall tone should be unified and harmonious, local places can have some small strong contrast.

Finally, also consider the home page background (background color) of the deep, shallow, here borrow a term in photography, is "high-profile" and "low-key." Shallow background is called high profile, deep background is called low-key. Deep background, the color of the text will be shallow, with a dark backdrop to foil light content (text or pictures); On the contrary, the background light, the color of the text will be deeper, with a light background to foil the dark content (text or pictures). This kind of depth change is called "lightness change" in the color science. Some homepage, the background color is black, but the text also chooses the darker color, because the color brightness is close, the reader when reading, the eye will feel very laborious, has affected the reading effect. Of course, the lightness of color can not change too much, otherwise the brightness contrast on the screen is too strong, also can make the reader's eyes unbearable.

The color matching of web pages

The color of the homepage is one of the key to establish the image of the website, the color collocation is the problem that netizens feel headache. Web page background, text, icons, borders, hyperlinks ..., what kind of color should be used, what color should be matched to the best expression of the desired connotation? A little bit of experience here, I hope to enlighten you.

First, let's take a look at the basics of color:

1. Color is caused by refraction of light.

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

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

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

is the Web page made in color or non color? According to a professional research institute, the color effect of memory is 3.5 times times that of black and white. That is to say, in general, color pages are more appealing than full Black-and-white pages.

Our usual practice is: the main content text with a non-color (black), border, background, picture with color. This page as a whole is not monotonous, look at the main content will not be dazzled.

Non-color collocation

Black and white is the most basic and the simplest collocation, black background, black background is very clear. Gray is the universal color, can and any color collocation, can also help two kinds of opposing color harmony transition. If you really can't find the right color, then try the gray, the effect is never too bad.

The color collocation

The color is changeable, the color collocation is our research focal point. We still need to learn more about the color of the knowledge.

A. Color ring. We will color according to "Red-> yellow-> green-> Blue-> Red" in turn over the gradient, you can get a color ring. The ends of the color ring are warm and Hanse, medium color. (pictured below)

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

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

Neutral system of warm color system

Two. The psychological feeling of color. Different colors give the viewer different psychological feelings.

The red---is a kind of stirring color. The stimulation effect, can cause the person to produce the impulse, the anger, the enthusiasm, the vigor feeling.

Green---between the two colors in the middle of the color, appear to be harmonious, quiet, healthy, safe feeling. It and golden, pale white collocation, can produce elegant, comfortable atmosphere.

Orange---is also a kind of exciting color, with light, joy, warm, warm, stylish effect.

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

The 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---with white, crisp, pure, clean feeling.

Black---has a deep, mysterious, silent, sad, depressing feeling.

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

Each color changes slightly in saturation and transparency, creating a different feeling. Take Green as an example, yellow-green has youth, exuberant visual mood, and blue-green is quiet ning, Yin deep.

The principle of color collocation of Web pages

1. The color of the xianmingxing. The color of the webpage should be bright, easy to be noticeable.

2. The uniqueness of color. To have a different color, so that people have a strong impression on you. (Reference Design Thinking the second website CI standard color section)

3. Color suitability. That is, the color and the content of your expression of the appropriate atmosphere. such as the use of pink to reflect the flexibility of women's site.

4. The Color Association. Different colors will produce different associations, blue think of the sky, black think of the night, red think of happy event, etc., choose Color to and your Web page's connotation associated.

The process of Web page color mastering

With the accumulation of Web page production experience, we use color has such a trend: monochrome-> colorful-> standard color-> monochrome. At first, because of the lack of technology and knowledge, can only make a simple Web page, a single color; after having certain foundation and material, want to make a beautiful webpage, will collect the best picture of oneself, the most satisfied color is piled up on the page; But the time is long, but found that the color is messy, no personality and style Third relocation of their own website, choose to suit their own colors, the launch of 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 color can design a concise and exquisite site.

0 Tips for color matching in web pages

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

1. Use a color. This refers to the selection of a color first, and then adjust the transparency or saturation, (the popular thing is to fade or deepen the color), resulting in new colors, for Web pages. Such a page looks uniform and has a layered sense.

2. Use two colours. First select a color and choose its contrasting 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 little.

3. Use a color palette. Simply put, use a feeling of color, such as light blue, light yellow, light green, or naturals, Ash, Earth blue. To determine the color of different, I was in Photoshop in the foreground color box, in the pop-up Color Picker window to select "Custom", and then in the "Color Library" can be selected:

4. Use black and a color. For example, red font with a black border feel very "jump."

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

1. Do not use all colors, try to control within three kinds of colors.

2. Background and the comparison of the previous text as much as possible, (never use the pattern of complex patterns as background) in order to highlight the main text content



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.