Basic knowledge of color

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? Here are some tips, I hope you have some inspiration.

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

1, color is caused by refraction of light.

2, red, yellow, blue is the primary color, 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 "bgcolor= #FFFFFF" It means that the background color is white.

3, color is divided into two types of 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 a different hue, so at least millions of colors can be produced.

is the Web page made in color or non color? According to research from a professional research institute, the effect of color 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.

One, 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, orange, yellow, yellow, green. Green, blue, blue, violet, purple, purple, red.

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

Neutral system of warm color system

Second, the psychological feeling of color. Different colors give the viewer different psychological feelings.

Red--is a kind of exciting 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 warm, 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--it has the highest degree of brilliance, happiness, hope, wisdom and lightness of character.

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

Black-a feeling of deep, mysterious, silent, sad, repressed.

Grey-a 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.

3, the 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 of 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, color single; After having certain foundation and material, hope to make a beautiful webpage, will collect the best picture of oneself, the most satisfied color is piled up on the page; but time a long, but found that the color is messy, no individuality and style; The third time to reposition 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 be designed to a simple and exquisite site.

0 Tips for color matching in web pages

Article written here, there are impatient netizens to ask: "In the end with what color with good-looking?" Can you recommend a few color schemes? " Don't worry, there's a little trick here to help you quickly become a palette master:

1, with 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, with two colors. 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, with a color. 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, with 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.

When we examine the scientific nature of color and the aesthetic considerations of color harmony, we find that the senses play an important role in the use of color. In addition to the sensory response and the identification of harmonic colors, there is a deeper human response to color. Color can trigger a strong physiological/psychological resonance, whether positive or negative. When you select a color combination, make sure that the color you choose can cause appropriate echoes. The physiological response of color although there is no direct evidence that color can trigger a specific response, but studies show that certain colors can actually cause some physiological reactions. Red, for example, is a very stimulating color that tends to cause a faster heartbeat and shortness of breath. So, red is ideal for use when you need attention and emphasis, but it may seem too strong when used in background color. Similarly, yellow can cause attention, but because of its reflective nature is too strong, easy to cause eye fatigue and discomfort. On the other hand, blue has a relaxing effect on the nervous system, and according to some studies, a blue background can also increase productivity. However, if your product is related to food, do not use blue as the background color, because the blue will inhibit people's appetite oh.

A symbol of color.

The symbolic meaning of color is sometimes related to things in nature. For example, the color of the sky and the sun produced by Lenovo World-connected. However, most color meanings are related to national culture, such as politics, religion, mythology, or social structure-factors that may differ over time and geography. If your site is designed for foreign countries, you must be careful that the same color in different cultures may have the opposite effect. In addition, most colors have both positive and negative associations. You can use the difference between the quality and saturation of the color, or use a mixture of two colors to emphasize a particular meaning.

Generally in Western culture, the meaning conveyed by color is:

Red: Passion, romance, flames, violence, aggression. Red in many cultures represents a stop signal, used to warn or prohibit some action.

Violet: Creation, mystery, loyalty, mystery, rarity. Purple is associated with death in some cultures.

Blue: Loyal, safe, conservative, quiet, indifferent, sad.

Green: Natural, stable, growing, jealous. In North American culture, Green represents "doing", which is related to environmental awareness and is often linked to financial matters.

Yellow: Bright, glorious, disease, cowardly.

Black: Ability, delicacy, modernity, death, sickness, evil.

White: purity, innocence, cleanliness, truth, peace, indifference, poverty. White also represents the color of death in Chinese culture.

If you can unknowingly create a masterpiece of color, then you do not need to create color knowledge. But if you cannot create a masterpiece of color without knowledge of color, then you should seek out color knowledge

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.