Web page Green system Color Application Example Graphic _ Experience Exchange

Source: Internet
Author: User
Green in the yellow and blue (warm and cold), belong to a more moderate color, so that the green character is the most peaceful, stable, generous, tolerant. is a soft, quiet, satisfying, beautiful, popular color. It is also one of the most widely used colors in Web pages.

Green and human closely related, is the eternal flourishing is the natural color, represents the life and hope, but also full of youthful vitality, green symbolizes peace and security, development and vitality, comfort and tranquility, relaxation and rest, to alleviate the effect of eye fatigue.

It has a certain sense of nature and health, so it is often used for sites related to nature and health. Green is also often used in some companies ' PR sites or educational sites.

Green can make our mood more and more clear. Yellow green represents fresh, calm, comfort, peace, softness, spring, youth, the psychological feeling of upgrading.

Below we make different example analysis according to the green system different properties near color, the same color high purity low purity, the contrast color and so on color collocation.

Green System Analysis:

From the main tone, the auxiliary hue of the HSB pattern can be seen, the two colors are only in the brightness of the difference, its display of hue and saturation is the same. Positive green is 120 degrees, these two colors from the RGB values, are different degrees of mixing the other a little color, so a little deviation from positive green. Because of the nature of the green itself, the entire Web page looks very comfortable.
Auxiliary color only in the brightness of the lower, so that the page more layers of sense, a sense of space.
The white block surface makes the green features work best and enhances the visual rhythm.
Finishing color just right to reflect the "finishing" this magic pen, extremely tempting, the entire page immediately lively refreshing up, enhance the expression of the theme of the page.

Conclusion:

The main and auxiliary tones belong to the same color green system, through different brightness changes, can be more gradual easing changes at the same time but also more obvious reflects the color hierarchy of the page. If it is not through the numerical analysis of judgment, some friends may be judged by experience, it is easy to mistake the two colors in addition to the brightness of the possible purity will be different, the appropriate use of the numerical model will be easy to get the correct conclusion.

The whole page color is very small: the largest color block of green, the second area of white, the third area of dark green, but the results are strong, conspicuous, to fully display the purpose of the product theme.

Deep green gives people lush, healthy, mature, stable, life, open psychological feeling.


Green System Analysis: (High purity color: green + contrast color combination)

The HSB value H shows a positive yellow 60 degrees, and the primary and secondary tones only tilt a little –h to green to 75 degrees. A large area of low-light yellowish green as the main hue, saturation is very high, reached 100%, auxiliary color used to improve the brightness of the tender green and white, these two auxiliary colors in addition to increase the level of the page feeling, but also to make the entire page color has a translucent feel, enhance the characteristics of green. The dark brown background clearly contrasts all the solid colors of the foreground to the stage.

The page has two sets of small contrast color, a group is yellow and orange red, a group is orange and blue, the two groups of color strictly not the contrast color, because the color is somewhat biased. Although their saturation is reduced, this page is enough to make up the loudest tones and make the entire page lively and vibrant.

Conclusion:

The main and auxiliary shades of yellow-green large area use is not harsh, but makes the page looks very energetic and energetic.

Proper use of different purity of the contrast color combination is not quite strict, usually can play a major role in primary and secondary relationship is clear. The contrast of the "standard" contrasting color is weakened, the page color looks easy to coordinate and soft, but the same can highlight the theme. → Similar color light green page Example diagram:

Green System Analysis : (similar color light green)

The main Hue Green property is a high brightness of light green, mentioned before, usually the high degree of saturation is reduced, saturation low page color decreases, unless the color itself has its own characteristics, plus a large area of auxiliary color white, the entire page looks very light, soft, quiet, and even a warm feeling.

The page uses a gradient of light green to make the entire page visually softer and more comfortable.

Although the finishing touches only appear on the main logo, the buttons are only a little bit, but also bring some light to the color of the entire page. In particular, the Red HSB mode H value shows that the color is close to positive red and the saturation reaches the highest value. Another finishing color in yellow, on the page visually green and red this group of contrasting colors play a role in easing the visual. Because on the color wheel, yellow is the transition color between green and red.

Conclusion :

Light green color has elegant, rest, safe, harmonious, quiet, soft feeling.

The effect of the gradient deepens the impression. But when the color of the page is too light, the whole page is prone to the feeling of "gray", which needs to add a slightly higher purity of color such as the lower left corner of the auxiliary color green block, the appropriate bright finishing can be a good solution to this problem.

  • Related Article

    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.