Web Design Color Application Example: Red system analysis

Source: Internet
Author: User
Tags mixed

In the application of the color of the Web page, according to the content of the theme of the demand, the pure use of red mainly colors of the site is relatively small, mostly for auxiliary color, eye-color, to foil, eye-catching effect. They are usually mixed with other colors. In this paper, the application examples of web design color matching are elaborated for reading.

The color of the red feeling warm, strong and outgoing character, is a kind of irritating to the people of the colors. Red is easy to arouse the attention of people, but also easy to make people excited, excited, nervous, impulsive, or an easy cause of human visual fatigue color.

In many colors, red is the most vivid and lively color. So red is also the color of emotion that represents passion. Bright red is very easy to attract people's attention.

Red in different lightness, purity of the state (pink, red, crimson), the expression of emotion is not the same.

In the application of the color of the Web page, according to the content of the theme of the demand, the pure use of red mainly colors of the site is relatively small, mostly for auxiliary color, eye-color, to foil, eye-catching effect. They are usually mixed with other colors.

Red is the fastest-moving image compared to other colors. Because of these red features, people like to use red as a color for warning signs, such as fire, exclamation points, error tips, and so on.

In order to make the red understanding to make a better difference, the following we respectively on the red Line according to the neighboring color, the same color, contrasting color of the collocation do different examples of analysis.

1, Scarlet in the red line tends to yellow direction, is a large red added yellow. In the color ring table, pure red in the HSB for 0 degrees, to 360 degrees in the direction of the cold red system, 0 degrees in the direction of the yellow system.

Throughout the page, the main color of the red area is very large, determine the obvious, auxiliary color mainly by black, dark red composition, (the value of the selected is crimson to mark). The primary hue R presents a 255 highest value, s in 100%, which fully marks the highest red characteristic. The Dark Crimson r of the auxiliary color is 222,b87%, showing the feature that it acts as a secondary role.

Conclusion:

Background color vermilion Because of the red characteristics, saturation, lightness are very high, where the use of auxiliary color dark red, black pressure and contain the eye-catching character of the scarlet Ink, but also to highlight the prospect of the main picture content. The focus color is mainly used to highlight the logo, other navigation text, picture part of the use, and to reconcile and achieve the entire page is not stimulated by the dull feeling.

This kind of color combination is easy to promote the excitement, red characteristics, this eye-catching special attributes, compared to widely used in food, fashion, leisure and other types of Web sites

2, deep red in the original red based on the reduction of lightness, is the red system in the lightness of change. The value of the above figure shows that the lightness is lower.

The combination of these colors with the lightness of darkening, it is easier to create deep, resentment of the story atmosphere. Convey is stable, mature, noble, negative psychological feelings.

This page background color using the pattern, is the current selection of the main color and lightness of darker red combined, making the lightness slightly darker.

In numerical terms, the main color is the background color saturation is higher, but due to the reduction of lightness, colors become more calm. Auxiliary color RGB added a proper amount of other colors, G and B numerical difference is not small, so the saturation decreased, the color tends to soften and stable. The addition of the highlight color, the page visual effect is enhanced.

  Conclusion :

The foreground color usually needs to be distinguished from the background colour, which achieves the propaganda purpose of the podium. When the low saturation of the foreground color and background color change is not obvious, the formation is another kind of gentle unified effect

3, Rose red in the color ring is actually close to the cool, is the red line in the subtle changes in hue, is the red line in the cold color. We can see in the HSB H value, the highest 0 degree red, the closer to the 0 degree of the value of the red characteristics of the more obvious, otherwise the gradual cool color tilt, and the value is slightly away from 0 degrees.

This page is mainly composed of two different brightness, purity of the rose tones. Two-color numerical display, we see that the RGB value of R rendering the highest value, the red characteristic is more obvious. Auxiliary tones of Rose, add a little G, hue to the cool slightly offset, but also because of the addition of G, in the HSB value, the saturation slightly weakened, but with the increase in brightness, color tends to be gorgeous, in line with the purpose of highlighting the future. Although the purity of the main color to reach the highest saturation, but due to the lower degree of clarity, relative to the auxiliary tone is more stable, suitable for background color.

In numerical terms, because the background color and the brightness of the foreground color is relatively close, add a white border, strong foreground color in the background of the distinction, enhance the visual enhancement effect.

Conclusion:

Background color and the brightness of the foreground color is close, the color gives the person the visual appearance to be more stuffy, adds the small white division to make the color guide primary and secondary block surface more trenchant, the page is sprightly many.

This kind of color combination is used for feminine theme, for example: cosmetics, clothing and so on, easy to create a charming, seductive, gorgeous atmosphere

Small series for everyone to edit the Web design color application Examples hope to help!

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.