The color theory and application of Web page design

web| Design | Page We are in the design of the use of the focus is to create an unprecedented shape, the body to polish the coordination of beauty, it is subject to social constraints, the importance of local characteristics. In order to use color effectively in the design, we must master some basic theoretical knowledge of color and combine our practical experience to build our works. The same color has countless application methods, and there is no very mechanical color to reconcile the law, under certain principles by our own eyes and aesthetic point of view to make a choice.

Color composition (Interaction of color), can be understood as the role of color, is based on the color science system, the study accords with people's perceptual and psychological principles of color matching. There are three main elements of color matching: optical elements (lightness, hue, purity), the existence of conditions (area, shape, texture, location), psychological factors (heating, retreat, weight, soft and hard, plain gorgeous), the design of the use of logical thinking to choose the appropriate color collocation, resulting in the right color composition. The best color model is the color of nature, we observe the nature of color, through rational refinement to finally get what we need.

Color composition is not the only thing that can not be explained, it has its own set of relevant theories, the details of the current domestic books have "Color Design encyclopedia" (Japan Color Design Center), it is worth a look. When it comes to color, must mention the color stereo, the standard color design definition color may say this (in parentheses is the window color name): H Hue (tonal) S: purity (saturation) B: lightness (brightness), put these three elements into three-dimensional coordinates, on the formation of color stereo.

At present, more general color stereo has three kinds: Mensaire stereo, Ostward color stereo, the Japanese institute of Color Stereo, the most widely used is Monselle color stereo, we use the image editing software color processing part mostly from the Mensaire color stereo standard. Below we briefly introduce the Munsell color stereo, it is the root of our design work most relevant.

Color stereo frame signal

Hue: In the spectrum from red to violet, choose between 5 colors, namely red (R), yellow (Y), Blue (B), Violet (P). The adjacent two colors are mixed with each other: orange (YR), yellow-green (GY), blue-Green (BG), Lan Zi (PB), Purple (RP), thus forming a first intersection of the ring, known as the Mensaire hue ring.

Mensaire Hue Ring

Brightness: from black to white to increase the middle of 9 evenly transition of gray phase, known as the lightness ruler.

Purity: In the same lightness of the condition, from gray to solid color changes.

Color harmony and color feeling
Color harmony is a very complicated problem, it also includes the psychological balance of vision, people's visual habits, social factors and so on. Various fields according to their own industry experience have their own color harmony theory, not the same industry between the color harmony theory is different. We can define color blending in this way: make the contrast of the color to be without sharp stimulation of the coordination and unity of the overall effect is always to be compatible with visual psychology, to meet the psychological balance of vision, it is not just a combination of color and color problems, but also with the area, shape, and other colors assigned to the object.

Color blending is associated with time, area, and appreciation habits. At present, there are 2 kinds of color blending methods: 1, Common harmonic, 2, area reconcile, we separate to discuss these two ways in the application of the page.

There are three different forms of common harmony:

1, brightness contrast and harmony and color harmony feeling, remove the lightness ruler of the upper and lower ends of white (10) and black (0), the remaining 9 stages are divided into three keynote (1), (2), (3) Low brightness tone, (4), (5), (6) The lightness tone, (7), (8), (9) Gomingdo tone.

2-3 colors, lightness color application: The first word specified degree of the keynote, color must account for more than 1/2 of the composition (this point in the Web interface design a little special, the area of the keynote is a visual sense of the area, rather than the actual page area.) ), a dominant position.

Gaochang: (8), (9), (1) sprightly;

High Short Adjustment: (8), (9), (5) soft;

Medium Long tune: (5), (9), (1) strong;

Medium Short Tone: (5), (7), (3) dull;

Low Long Adjustment: (2), (9), (1) Majesty;

Low short: (2), (5), (1) melancholy;

Medium and High short tone: (5), (9), (7) Hope;

Medium and Low short tone: (5), (3), (1) low;

A variety of color continuous contrast mode: Do not emphasize area ratio, easy to create rhythm.

High 1/2 lightness Column (5) above, Dawn, hazy;

Low 1/2 lightness column (5) below, depressed;

High 3/4 lightness Column (3)-(10) passionate, progressive;

Low 3/4 lightness column (0)-(7) vigorous, powerful;

Kanmingdo column (0)-(10) rich, jumping

The contrast of the lightness of color in the page we can often see, we look at the following page, the following image of this page gives people what it feels, crisp, harmonious.

Main keynote: #9CCE00 h:75 s:100 b:81 (8)

Brightness column: The application of a variety of lightness color, (* There are other reasons for this feeling, and we're only talking about the reasons for the reason.) Careful observation we can see that the brightness is between 81-98, the small gap is negligible we can see it as (8), (9), (1). So in the table above we can find: high-long tune: (8), (9), (1) crisp, from the above examples can be very obvious to see the comparison of brightness in the page design application. Looking at it, we can find a lot of similar examples, but there are other factors that are not easy to detect in the contrast of lightness.

In the design of the Web interface, the lightness of contrast in many cases is not alone, it often needs to combine other ways of reconciling, as an auxiliary way to reconcile the existence of a separate brightness contrast to reconcile the page it has a very significant disadvantage is that the picture is boring. If the comparison of lightness and harmony as the main way to reconcile the page needs to be in other auxiliary color with a lot of color to consider, if the auxiliary color can break the dull feeling so the effect is still more ideal.

Lightness contrasts with the mastery, at first we can do some similar lightness contrast exercises. In the art education curriculum generally uses gouache to draw, actually also can use the computer to practice, raises the color feeling. When there is a certain foundation after the combination of other components to practice.

Hue contrast harmonic and color harmony feeling, hue contrast to Mensaire hue ring mainly.

Two hue contrast harmonic color method and the corresponding color feeling:

H:h Harmony, Unity.

H: (h±1°;~30°;) similar, lively.

H: (h±30°;~60°;) quasi contrast, vivid.

H: (h±120°;~150°;) contrast, strong.

H: (h±180°;) complementary color, stimulating

Pay attention to the change of lightness and the primary and secondary position of two colors in practical application. There is a Mensaire hue ring has 10 of the basis of the hue is divided into 100, then in the color ring is 100 equal, with the interval number of color rings, I think the algorithm with the angle is more accurate.

Multiple hue contrast harmonic color method and the corresponding color feeling:

Hue ring within 120 degrees: linear color, such as: N: (n+12): (n+24): (n+36); equal ratio, such as: N: (n+13): (n+25): (n+37). Modern sense is strong, and so on.

Hue ring within 180 degrees: linear color, such as: N: (n+20): (n+40): (n+60); equal ratio, such as: N: (n+20): (N+50). Strong.

Hue ring within 380 degrees: linear color, such as: N: (n+30): (n+60); etc, such as: N: (n+10): (n+27.5): (n+57.5). Stimulus.

The two are reconciled with the color.
Main keynote: # FF7318 h:24 s:91 b:100
# FF6300 h:24 s:100 b:100

Two similar color contrast harmonic
Main keynote: # FFCE00 h:48 s:100 b:100
#FFA000 h:38 s:100 b:100

Two complementary color contrast harmonic
Main keynote: # FFCE00 h:48 s:100 b:100
# 4273a5 h:210 s:60 b:60

Multiple hue contrast blending
Main keynote: # 945a18 h:32 s:84 b:58
# 5a2f00 h:31 s:100 b:35
# 633100 h:30 s:100 b:39
# 401f00 h:29 s:100 b:25

Hue contrast reconciliation is only to help you find the most matching color area, the final effect or rely on their own color intuition.

In the Web interface design, the general is a relatively high purity of color, the unwritten rules of purity for 80~100, so the actual application we only need to adjust the change in brightness. Nature can create a better color effect.

Use two with color with the use of brightness contrast and reconcile the attention is the same, two with color composition of the screen is not strong, but relatively easy to foil performance theme, generally are in the form of the background.

Two similar color contrast and harmony should pay attention to the combination with no color, that is, black and white, such a page will be relatively clean, popular, the portal site with a better choice of color mode.

Two complementary color contrast adjustment is very easy to set up style, can leave a strong image, the information release class commercial site of choice, both without losing individuality and relatively easy to accept, mostly as the main color, combined with the brightness contrast and harmonic contrast and harmony.

Multiple hue contrast is used for Flash animation and page production, in the case of high purity, it is relatively easy to create a distinctive personality image.

The practice of hue contrast and reconciliation

The purity contrasts and reconciles.

There are a lot of theories about the blending of purity, but most of them can only be used in painting, industrial modeling and so on, in the Web interface design is really only 1:

Black, white and gray belong to No color system, they can match with any color. Pure color and no color system with the time will make the bright sense of pure color enhancement, gray and pure color collocation will make gray with color, when the gray coverage area is larger when the pure color will be easier to form and reconcile. Gomingdo Gray (White) has a brisk and elegant feeling, low brightness of gray (black) can produce stable.

In the Web interface design, if the purity of color reduction is used to produce harmony, it takes courage, according to the current aesthetic point of view, generally can not be accepted, may need further exploration and research.

Gray and high purity yellow reconcile

Black and medium purity green blend

Gomingdo of the grey harmonic

This is probably the kind of application that is now accepted for the common harmony. We still need to study and develop together.

Area of the principle is: the size of color can change the contrast effect, contrast color both sides of the larger, the harmonic effect is weaker, conversely, the smaller area of both sides, the better the harmonic effect. The contrast between the two sides is equal, the harmonic effect is weaker, the difference between the two sides is bigger and the harmonic effect is stronger. Only the proper area ratio can achieve the best visual balance and form the best visual effect.

In the previous exploration, summed up a considerable number of areas of the formula, the computer design has a very positive role. Using these formulae, we can probably grasp the ratio of color and area as an important reference.

The earliest calculating formula was the poet Goethe, based on the light brightness of the basic hue, established a simple ratio:

Yellow: Orange: Red: purple: Green =3:4: 6:9: 8:6

But this formula doesn't take into account the effects of changes in lightness and purity, and it's not very practical today, and Mensaire the formula on this basis:

A hue of lightness x purity B Area

--------------------------=--------------------

b hue of lightness x purity a area

This formula can help us to solve the lightness and purity of the change in the area of change ratio, can be summarized as "small area with strong color, large area with weak color."

According to my experience the above formula in the Web interface design is not very practical, should be used for Web interface design color purity is very high, basically the area ratio is equal to the Ming degree ratio, according to this proportion of a considerable number of cases is a negative effect. should be applied as appropriate.

Mensaire also has a set of area and color ratio algorithm, compared with more scientific, more practical, can be used as an important reference:

In the color stereo in the value axis of 5 gray as the center, the relationship between two colors or multiple colors can be said-the color of the area and the color to the center of the color stereo distance equal or a simple multiple can be balanced. You can get the following formula

S 1 R 1= s 2R 2

where s represents the area, r indicates the distance from the color to the center point, and the value of R can be found in the relevant table.

In the current situation, there is no area calculation formula can be exact combination of the actual application of Web interface design, not to mention the Web interface design from the business to consider, mainly by experience, the formula above can only be a reference to the nature of the study to provide a foundation.

The above theories are predecessors research results, which have many can use, the most important is to combine the actual experience, create a set of their own color theory, improve their ability to grasp the color, applied to the design works.