The first thing a web visitor sees is not the beautiful layout or beautiful pictures, but the colors of the web page. It can be seen how important web color is to web design. This article focuses on the technology of web color design and matching.
In any design, color plays the role of first information transmission to visual stimulation. The color design in the web page is the most direct visual effect, and the use of different colors will give people different feelings.
Smart designers will use color to express the concept and intrinsic quality of the website. In order to better use color to design web pages, you need to master the following basic knowledge of color.
One, recognize color
The colors in nature are colorful and ever-changing, such as red roses, blue seas, orange oranges... But there are actually only three basic colors: red, yellow, and blue. Other colors can be blended by these three colors, which are usually called "three primary colors".
The white light that everyone usually sees is analyzed and can be seen on the ribbon. It includes 7 colors of red, orange, yellow, green, cyan, blue, and purple. There is a natural transition between various colors, including red, green, Blue is the three primary colors, and various colors can be obtained by mixing the three primary colors in different proportions.
Colors in real life can be roughly divided into two types: color and achromatic. Among them, black, white, and gray belong to the achromatic series, and other colors belong to the color series. Any kind of color has three characteristics: hue, lightness and saturation. Achromatic colors have only lightness properties.
Colors of the same hue can be easily matched by adjusting the brightness or purity, such as dark green, dark green, grass green, and bright green. For example, some shopping and children's websites use bright colors, which make people feel colorful and vibrant. The lower the brightness, the darker the color. Brightness is mainly used in some game websites, which can make the website full of mystery.
Achromatic colors have only lightness properties, not hue and saturation properties. So is it better to use color or non-color when designing the website? According to professional research, the color memory effect is 3.5 times that of black and white. In other words, in general, color pages are more attractive than black and white pages.
Usually the main content (such as text) is achromatic (black), and borders, backgrounds, and pictures are colored. In this way, the overall page is not monotonous, but harmonious.
Second, the safe color of the webpage
In web pages, RGB mode is often used to represent color values. RGB represents the three primary colors of Red, Green, and Blue. Under normal circumstances, RGB each has 256 levels of brightness, represented by 0~255.
For individual R, G or B, when the value is 0, it means that the color does not emit light; if it is 255, it means that the color is the highest brightness. When the three colors of RGB are sent to the strongest brightness (RGB values are 255, 255, 255), it means pure white, which is represented by hexadecimal as "FFFFFF".
On the contrary, the RGB values of pure black are 0, 0, 0, which are represented as "000000" in hexadecimal numbers. The RGB values of pure red are 255, 0, 0, which means that only red R exists and has the strongest brightness, and neither G nor B emits light. Similarly, the RGB values of pure green are 0, 255, 0, and the RGB values of pure blue are 0, 0, 255.
According to calculations, 256-level RGB colors can combine a total of about 16.78 million colors, that is, 256 256 256=16777216, usually referred to as 16 million colors or tens of millions of colors, also known as 24-bit color (2 to the 24th power) ). Since 16,777,216 colors can be obtained theoretically, why there are 216 colors in the web-safe color category? This is because of the browser.
After the web page is recognized by the browser, only 216 colors can be displayed normally in the browser. If the color is more than this range, some browsers may display deviations and cannot display normally. Therefore, the 216 colors that can be displayed normally by all browsers are called webpage safe color categories.
Nowadays, the performance of browsers is getting higher and higher, and the safe color range of web pages is getting wider, but the safest ones are still 216 colors. In Dreamweaver, a color palette with safe color categories for web pages is provided, and the color selection of web pages can be controlled within a safe range.
The RGB mode is the physical color mode of the monitor, which means that no matter what color mode is used in the software, as long as it is displayed on the monitor, the image will eventually appear in RGB mode.
Webpage color matching
When a website is opened, it is neither the content of the website nor the layout of the website, but the color of the website that leaves the user's first impression. Color is very obvious to human visual effects. The success of a website design depends to some extent on the designer's use and collocation of colors. Because web design is a kind of graphic design, the impact of color is the strongest on the floor plan, and it is the easiest to impress users.
Three, how to deal with color
Color is the most sensitive element in human vision. The color of the webpage is handled well, which can be the icing on the cake and achieve a multiplier effect.
1. The feeling of color
①The warm and cold feeling of color
Red, orange, and yellow represent the sun and flame; blue, blue, and purple represent the sea and clear sky; green and purple represent neutral colors that are neither cold nor warm; black in the colorless system represents cold, and white represents warm.
②The softness and hardness of the color
High brightness, high purity colors can give people a soft feeling, otherwise it feels hard.
③Strong and weak sense of color
Bright, bright colors with high brightness feel strong, and vice versa.
④The excitement and calmness of color
Red, orange, and yellow are warmer colors, high brightness, high purity, and strong contrast colors feel exciting; blue, blue, and purple are cool colors, low brightness, low purity, and weak contrast colors feel calm. For example, the picture below is the website of an atmospheric and beautiful fruit farming and vegetable base company (this website is provided by the Alibaba Cloud template building product-" Cloud·Cute Beauty Station ")
⑤ Gorgeous and simple colors
Warm colors such as red and yellow and bright and bright colors can give people a sense of gorgeousness; cool colors such as cyan and blue and turbid and gray colors can give people a sense of simplicity.
⑥The sense of advance and retreat of color
Strong contrast, warm colors, bright, high-purity colors represent progress, and vice versa. This understanding of color has been recognized and accepted by many foreign companies more than 10 years ago, and a color marketing strategy has emerged from it.
Many companies use this as a favorable means of market competition and a way of reproducing corporate image characteristics, seizing business opportunities by designing colors. Like green "crocodile", red "Coca-Cola", red and yellow "McDonald's" and yellow "Kodak" and so on. In developed countries such as Europe, America and Japan, design color has long become a market competitiveness and is widely used.
2. Seasonality of colors
Spring is full of vitality, so some lively and jumping colors will be popular; summer is hot and people desire to be cool, so refreshing and bright colors dominated by white and light tones are popular; autumn is high and fresh, and heavy warm colors are popular; winter climate In cold, dark colors have the effect of absorbing light and transferring heat. People desire to be warmer and like to wear dark clothes.
This obviously forms the color trend of the four seasons, with light and bright colors in spring and summer; dark and steady colors in autumn and winter. The annual color trend is therefore divided into two major color trends: spring and summer and autumn and winter.
3. The psychological feeling of color
Different colors will give website visitors different psychological feelings.
①Red
Red is an exciting color, representing enthusiasm, liveliness, warmth, happiness and auspiciousness. Red is very easy to attract people's attention. It is easy to make people excited, excited, enthusiastic, nervous and impulsive. It is also a color that easily causes visual fatigue.
②Green
Green represents freshness, hope, peace, softness, ease and youth, and appears harmonious, tranquil and healthy. Green has two color components, yellow and blue. In green, the expansion of yellow and the contraction of blue are neutralized, and the warmth of yellow is offset with the coldness of blue. The combination of green, golden, and pale white creates an elegant and comfortable atmosphere.
③Blue
Blue represents far-reaching, eternal, quiet, sensible, honest, fair, and authoritative, and is the most cool and fresh color. The mixture of blue and white can reflect the soft, elegant and romantic atmosphere (the color of the sky).
④Yellow
Yellow has the personality of happiness, hope, wisdom and lightness. It has the highest brightness, representing bright, cheerful, and noble, and it is the most delicate color among the colors. As long as a small amount of other colors are mixed into pure yellow, its hue and color personality will change to a large extent.
⑤Purple
Purple represents elegance, nobility, charm, pride and mystery. Adding white to purple can make it elegant, delicate and full of feminine charm.
⑥Orange
Orange is also an exciting color, which has the effect of lightness, joy, warmth, warmth and fashion.
⑦white
White represents purity, innocence, simplicity, sacredness and lucidity, and has the feeling of whiteness, lucidity, innocence and cleanliness. If you add any other colors to white, it will affect its purity and make its character become subtle.
⑧Black
Black has deep, mysterious, quiet, sad, and depressed feelings.
⑨Gray
In commercial design, gray has a soft, ordinary, gentle, modest, and elegant feeling, and is always popular. In many high-tech products, especially those related to metal materials, gray is almost used to convey the image of high-level and technology. When using gray, most of them use different combinations of variations to match other colors, so as not to be too dull, dull, dull and rigid.
Slight changes in color saturation and brightness will produce different feelings. Taking green as an example, yellow-green has a youthful and vigorous visual mood, while blue-green appears quiet and deep.
Color design is not only a technical job, but also a very artistic job. Therefore, when designing a webpage, in addition to considering the characteristics of the website itself, it is also necessary to follow certain artistic rules to design a website with bright colors and unique personality.
The above is about the basic content of website color design (selection). After mastering these, you can easily design colors that conform to the website style, and you can also apply this knowledge to other places in your life. Due to space limitations, I have divided the content of this section into two parts, the first part. I will talk about the content of website color matching technology in the next article, please continue to pay attention.
The above content is original by Alibaba Cloud website technology researcher [Beike], please indicate the source for reprinting.