Web Design Considerations-the principle of Web page color matching

Source: Internet
Author: User
Tags expression
Design | Web page First of all we have to learn some basic knowledge 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 a Web page is a numerical representation of these three colors.
For example: Red is the color (255,0,0) hexadecimal representation of (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.

The technique of 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, (definitely do not use the pattern of complex patterns as background) in order to highlight the main text content.

Well, today Atzie is here for everyone.



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.