Website Design: how to configure webpage colors

The color of web pages is one of the keys to building a website image. color matching is a headache for netizens. The background, text, icon, border, hyperlink... of a webpage, what colors should be used, and what colors should be used to best express the expected connotation? Alibaba Cloud is here to talk about some experiences and hope to inspire you.

First, let's take a look at some basic color knowledge:

1. The color is produced by the refraction of light.

2. Red, yellow, and blue are the primary colors. Other colors can be blended with these three colors.

The color expression in the HTML language of the webpage is represented by the values of the three colors.

For example, the red color (, 0, 0) hexadecimal representation is (ff0000)

The "bgcolor = # ffffff" we often see indicates that the background color is white.

3. The color is divided into non-color and color.

Non-color indicates black, white, and gray system colors.

Color refers to all colors except non-color.

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

Is it good to make webpages in color or non-color? According to professional research institutions, the color memory effect is 3.5 times that of black and white. That is to say, in general, color pages are more attractive than full black and white pages.

Our common practice is: Non-color (black), border, background, and image color for the main content text. In this way, the page is not monotonous and the main content will not be dazzled.

● Non-Color Matching

Black and white are the most basic and simple combinations. Black and white characters are clear and clear.

Gray is a universal color. It can be used together with any color, and can also help the harmonious transition between the two opposing colors. If you can't find a proper color, try it in gray, and the effect will never be too bad.

● Color Matching

Our research focuses on the ever-changing colors. We still need to learn more about colors.

1. Color Ring. We will change the color by "red-> yellow-> green-> blue-> Red" to an excessive gradient to get a color ring.

The two ends of the color ring are warm and cold, medium colors. (For example)

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

| ___________ | ____ | _________ |

|

Warm, neutral, cold, neutral

2. The psychological feeling of color. Different colors give different psychological feelings to viewers.

Red-is an exciting color. Stimulating effects can make people feel impulsive, angry, enthusiastic, and energetic.

Green-the color between warm and warm colors appears harmonious, peaceful, healthy, and safe.

It is a combination of golden and pale colors, which can produce an elegant and comfortable atmosphere.

Orange is also an exciting color, with a brisk, joyful, warm, warm, and fashionable effect.

Yellow-with happiness, Hope, wisdom and brisk personality, it has the highest brightness.

Blue --- the most cool, fresh, and professional colors.

It is a mixture of white and soft, elegant, and romantic atmosphere (like the color of the sky :)

White --- white, bright, pure, and clean.

Black --- deep, mysterious, quiet, sad, and depressing feelings.

Gray: has a moderate, ordinary, gentle, modest, neutral, and elegant feeling.

Each color is in saturation, and a slight change in transparency produces a different feeling. Taking green as an example,

Yellow and green are youthful and vigorous visual artistic conception, while blue-green is quiet and overcast.

○ Principles of web page color matching

1. the freshness of colors. Web pages must be colorful and easy to attract attention.

2. uniqueness of color. You must have different colors to make everyone have a strong impression on you. (Refer to design considerations. Part 2: Standard Color of website CI)

3. suitability of colors. That is to say, the color is suitable for the content and atmosphere you express. For example, the flexibility of female sites is shown in pink.

4. Association of colors. Different colors may have different associations, blue may think of the sky, black may think of the night, red may think of happiness, and so on. The colors selected must be associated with the connotation of your web page.

○ Webpage Color Control Process

With the accumulation of Web Page production experience, we have a tendency to use colors: monochrome-> colorful-> standard color-> monochrome. At first, due to lack of technology and knowledge, we could only create simple web pages with a single color. After some basics and materials are available, we hope to create a beautiful web page and collect the best pictures we have collected, the most satisfactory colors are stacked on the page. However, after a long time, we find that the colors are messy and have no personality or style. For the third time, we have to reposition our website and choose the appropriate colors, the launch of the site is often relatively successful; when the last design philosophy and technology reached the peak, it is easy to return to the truth, with a single color or even non-color can be used to design a simple and exquisite site.
○ Webpage color matching skills

The article was written here, and some impatient netizens asked: "What colors are used for good looks? Can you recommend several color schemes ?" Don't worry. Here is a bit of skill that can help you quickly become a color guru :)

1. Use a color. This refers to first selecting a color, then adjusting the transparency or saturation, (in plain words, fade or deepen the color), to generate a new color for the web page. Such a page seems to have a uniform color and a sense of attention.

2. Use two colors. Select a color, and then select its contrast 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 long time.

3. Use a color system. Simply put, it is a sense of color, such as light blue, light yellow, light green; or earth yellow, Earth gray, Earth blue. The method for determining colors varies from person to person. In Photoshop, select "Custom" in the pop-up Color Picker window, and then select "color library :)

4. Black and a color. For example, the red font with a black border feels like a "Hop ".

In the webpage color scheme, the taboo is:

1. Do not use all colors. Try to keep them within three colors.

2. The comparison between the background and the previous article should be as big as possible (do not use complicated patterns as the background) to highlight the main text content.