Green style website color scheme example explanation

Source: Internet
Author: User

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

Green is closely related to human beings, is the eternal prosperity 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, has the role of alleviating eye fatigue.

It has a certain nature, health-related feelings, so it is often used in relation to natural, health-related sites. Green is also often used in some corporate PR sites or educational sites.

Green can make our mood more clear. Yellow green represents fresh, calm, easy, peaceful, soft, spring, youth, upgrade psychological feelings.

Below we according to the green system different attribute adjacent color, the similar color high purity low purity, the contrast color and so on color collocation makes the different example analysis.

Green Web Illustration: http://www.bacardimojito.com

Green Department Analysis :

From the main color of the above, the value of the secondary tone HSB mode can be seen, the two colors are only the difference in brightness, and its display hue and saturation is the same. Positive green is 120 degrees, the two colors from the RGB value, are mixed to varying degrees of the other a little color, so a little deviation from the positive green. Because of the nature of the green itself, the entire Web page looks very secure and comfortable.
Auxiliary color only in the brightness of the lower, so that the page more layers of sense, space.
The white block makes the green feature best and enhances the visual rhythm.
The point-point color is just the embodiment of the "eye" of this pen, very tempting, the entire page immediately lively refreshing up, enhance the page theme of the expression.

Conclusion :

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

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

Deep Green gives people flourishing, healthy, mature, stable, life, open psychological feeling.

Green High Purity Web Example: http://www.marocfruitboard.com

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

HSB value H shows 60 degrees is positive yellow, the main and auxiliary tones only to the green tilt a little –h for 75 degrees. Large area of lightness slightly lower yellow-green for the main hue, saturation is very high, reached 100%, auxiliary color used to improve the brightness of the tender green and white, these two complementary colors in addition to increasing the level of the page, but also to make the entire page color has a translucent feeling, enhance the green characteristics. The background dark brown is undoubtedly the foreground of all the pure color contrast all dazzling on the stage.

The page has two groups of small contrasting colors, a group of yellow-green and orange-red, a group of orange yellow and blue, the two groups of strict color matching is not considered contrasting color, because the color is somewhat biased. Although their saturation reduced, but in this page is enough to constitute the loudest hue, the entire page is very active, sharp.

Conclusion :

Main, auxiliary color yellow green large area of use is not harsh, but makes the page looks very energetic and energetic.

When appropriate use of different purity is not a relatively strict comparison of the combination of colors, the main role usually played is the primary and secondary relationship clear. Not "standard" contrast color contrast features although weakened, the page color looks easy to coordinate, soft, but the same can highlight the theme. → Similar color light green Web page Example: http://shehouse.we.tv

Green System Analysis : (similar color light green)

The primary color green attribute is a light green with a high lightness, mentioned above, usually the high degree of saturation on the lower, saturation low page color, 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 warm feeling.

A gradient of light green is used on the page, making the entire page visually softer and more comfortable.

Although the focus color only appears on the main logo, the button is only a little bit, but it also brings some light pens to the color of the entire page. In particular, the H value of the red HSB mode shows that the color is close to the positive red and the saturation reaches the highest value. Another eye color yellow, in the page visual green and red this group of contrasting colors play a role in the alleviation of vision. Because on the color wheel, yellow is the transition color between green and red.

Conclusion :

The light green color has the feeling of elegance, rest, safety, harmony, serenity and softness.

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



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.