The color matching of web pages

Source: Internet
Author: User

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, (definitely do not 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.