Web color collocation Tutorial: Three practical ways to get the web color design done

Why do you want to organize your design color method?

In the application of color design, we understand the different degree of color, affect the performance of the design page, skillfully use color collocation, the design is not more than a multiplier. A good design works, its color collocation must be harmonious and decent, pleasing, reflect on our design process, how the color collocation more easily achieve the purpose of design, and what affect our color thinking?

The following points often affect color collocation thinking:

1. Focus on color representation only
2. The Collocation method is not enough system
3. Color and composition are not in place

First, let's take a quick look at the hue and tint concepts:

Next we press three large categories of color matching method, combined with some cases, analysis of the color in the page application method.

A color difference and the formation of a matching style

1.1 with dominant color matching

This is a color that is composed of a hue of unity. That is, by a certain hue dominated, unified picture of the color, if not the same hue, the color ring on the adjacent similar color can also form a similar color effect. Of course, there are also some of the larger Hue gap, such as contrast, or there is no color contrast, but here first tell the color case with the dominant color.

1.1-1 with tonal color

Tonal color refers to the main and auxiliary colors are in the unified hue, this color method will often give the page very consistent feeling.

Twitter's case

The overall blue design brings a unified impression, the color of the depth of the different types of content information, such as information content module, the white bottom on behalf of User content, light blue on behalf of the reply content, a deeper blue bottom representative can reply operation, color dominated the information level, also maintained the brand image of Twitter.

Point of view: Color difference splits the page hierarchy and modules, and represents different feature task properties.

1.1-2 nearby Color Matching

Neighboring color matching method is more common, with a slightly richer than the same color, hue soft transition looks very harmonious.

ALIDP's case

High purity color, basic for group control and text title color, each control using adjacent color to make the page less monotonous, and then reduce the color saturation for different background color and module division.

Point of view: the use of adjacent colors based on the brand color, flexibly applied to various types of controls.

1.1-3 Similar color matching

Similar color matching is also commonly used in color matching method, contrast is not strong to the feeling of calm, harmony.

Benmapt's case

Red Yellow two-color dominant page, color is used for different groups of control performance, red for navigation controls, buttons and icons, but also as the main color of auxiliary elements. Use orange yellow instead of brand color for content labels and background matching.

View: Based on the color of the color of the use of the primary and secondary use of the page of various types of control and subject content.

1.1-4 Color Difference Color

Medium difference Color contrast is relatively prominent, the color contrast is bright, easy to present saturation high color.

Facebook's case

Color depth to create a sense of space, but also to assist the content of the module hierarchy, unified blue color application, spread the brand image. The middle color green button plays the role of rich page color, and also highlights the highest level of green button task. Deep Blue ceiling navigation through the whole station path, and guide users to read down the meaning.

Viewpoint: Use color contrast to highlight button task priority, add page atmosphere.

1.1-5 Contrasting color Matching

The dominant color matching requires precise control of color collocation and area, in which the dominant colour will drive the page atmosphere, resulting in intense psychological feelings.

YouTube's case

Red Lively embodies the rich and colorful content, the brand red to give the group control color and operational tasks, throughout the site can operate tips, but also to reflect the brand image. Red Multi-representative navigation guide and category category, blue for the login button, the default user picture and title, showing the user's content information generated.

Point of view: Red-blue reacts to different interactions and the operability of information, and distinguishes between system operations and user actions.

1.1-6 Neutral Color Matching

With some neutral color as the tone collocation, often used in the information of large sites, highlighting the content, will not be affected by unnecessary color interference. This kind of over color is more general, very classic.

Bechan's case

Black highlights the distinction between site navigation and content modules, Brand Blue is primarily used for clickable manipulation controls, including user names, content titles. Compared to the use of brand color, more prominent content and information, suitable for the content of the king of the general, Platform class site.

Views: The use of large-area neutral color as the dominant color, brand color here to play the role of the finishing touches, for some need to highlight the scene, emphasizing the state of interaction and so on.

1.1-7 LED with multi-color pairing

The relationship between the main color and other matching colors is richer, and may be paired with a similar color, medium difference, and contrasting color, but one of these colors will dominate.

Google's case

For Google with a rich product line, through 4 brand colors in accordance with a certain purity ratio, and then with no color black and white gray can be paired with the ever-changing color scheme, so that the brand is very unified sense. In most of the page, Blue will act as the dominant color, the other 3 color as a secondary color and set different task properties, black and white gray as a secondary color, for platform-type site, multi-color dominance has very good ductility.

Point of view: Google set four brand color, through the primary and secondary, reasonable proportion of the application in the interface, and through the group control of the different interaction state reasonable allocation of functional tasks.

Two, the tone of the form of harmony and color

2.1 With dominant color palette

This is a uniform color that consists of the same hue. Similar shades, such as dark tones and dark tones, can also be used to create the same color effect. Even if a variety of hues appear, as long as the tonal consistency, the picture can also show the overall unity.

2.1-1 Clear Tones

Shotfolio's case

The clear tone makes the page very harmonious, even if the color of different hue and hue can keep the page in a high degree of coordination. Blue Another page to create a quiet cold atmosphere, tan let us think of the thick earth, to the page to add a stable and practical feeling, while warm blue cold.

Point of view: complementary hues together, through the uniform tone of the method, you can ease the contrast between the color effect.

2.1-2 Dark Tones

Examples of conceptual applications

Dark tones to render the scene atmosphere, through the different hues of color changes to enrich the information classification, reduce the color saturation so that the colorful pieces of coordination and integration into the scene, white and bright green as the information carrier presented.

Tips: Multi-color through a unified tone processing, the area is very coordinated, and does not affect the overall page dark atmosphere performance.

2.1-3 Bright Tones

Case of Kids Plus

Bright colors lively and clear, lively atmosphere and a striking cartoon-like narrative of a celebration, but covered with high-purity colors, too exciting, not suitable for long-time excursions.

Point of view: saturation and purity characteristics of the obvious collocation, in the visual impact of the same time, the appropriate use of contrasting color or reduce brightness and other methods to reconcile visual performance.

2.1-4 Dark Dark Tones

The case of LEES ferry

The page to dark gray-oriented, different color collocation, like in the narrative of different stories, white text layout, the entire page appears thick and delicate, small areas of micro-gradient increase the layout texture.

Viewpoint: The overall picture atmosphere is composed of low dark tones, and the small area bright part does not affect the overall feeling.

2.1-5 White Tone

Very's case

The soft tone makes the page appear bright and warm, even if many colors do not cause visual load. The tonal collocation of the page, color as the information classification of different modules, not to rob the main focus, but also to foil the different types of carrier content information.

Point of view: different colors of the same color module, even if the bearer of different information content can also show a harmonious.

2.2 Tonal color

This is the color of the same or similar hue changes in the composition of the type, and the dominant color matching in the same technique. The difference is that the tonal distribution is average, there is no deep or shallow module, the tonal range is more stringent.

Tumblr's case

In the actual design of the application, often with a more comprehensive approach, such as the overall dominant tone, small-scale layout will be used in the same tone. With Tumblr's release module, although the page has its own main tone, but the small module uses the same hue different color function button, combined with the hue change and the graphic expression different function points, many buttons put together, because the same hue reason module very stable unification.

Point of view: integrated use of the situation, the overall interface is dominated by the tone, in the layout such as the key icon and so on is a tonal color matching flexible use.

2.3 Shades of the same color

This is the color of the same hue of the difference between the type, a single color matching one. The same color matching in the dominant color palette belongs to the same technique. Theoretically speaking, the hue in the same hue does not have a hue difference, but is formed by different tonal hierarchies, which can be understood as a color palette.

Genrecolours's case

With the purple interface, use the same hue to create a level of page space by contrasting shades and shades. Although the color depth with reasonable, but some difficult to distinguish between primary and secondary, because it is the same hue collocation, color characteristics determine the psychological feelings.

Point of view: the same color shades have a very high uniformity, but a bit dull.

Three, color matching and the formation of the way

Due to the contrasting color of the matching composition of the color, can be divided into complementary or opposite color with the composition of the hue contrast effect, from the white, black and other differences in the brightness of the contrast effect, as well as the purity difference between the purity of the effect.

3.1-1 Two-color contrast

The contrast between color and visual impact is strong, easy to attract users attention, use often a wide range of collocation.

Visa's case

Visa is a credit card brand, dark blue to convey a peaceful and safe brand image, yellow can give users a sense of excitement and happiness. In addition, the blue reduces the brightness and then the yellow collocation, the contrast clearly also can alleviate the visual fatigue.

Point of view: whether it is the overall contrast or local contrast, contrasting color to give people a strong visual impact, combined with color psychology to communicate better brand.

3.1-2 Tri-color contrast

The three-color contrast hue is richer, highlighting a particular color by strengthening the hue and focusing on the color area.

Naver's case

Large area of green as the main site navigation, the image is prominent. Using the brand color corresponding to the two medium difference color for two-level navigation, and reduce one side of the blue color, and then use the same hue of watermelon red as the current position state, two-level navigation internal contrast is very strong but does not affect the main navigation effect.

Point of view: The three-color comparison of watermelon red as the emphasis on the color limit in a small area to show very critical, the size of the direct impact on the picture balance.

3.1-3 multi-color contrast

The multi-color contrast gives the rich feeling, the color collocation will make the page very exquisite, the module feeling is strong.

Metro's case

Metro style uses a large number of colors to separate different information modules. Keep the area of large modules equal, inside the module can be divided into different content levels, monochrome module only carries a kind of information content, with the corresponding function icon high recognition.

Point of view: color hue contrast, color area contrast, as long as maintain a certain proportion of the relationship, the page can be a full order.

3.2 Purity Comparison

Compared with the hue contrast, the purity difference contrast, the contrast color choice is very many, the design application scope is extensive, may use in some prominent brand, the marketing class scene.

Pinterest's case

Page Center login module, by reducing the purity of processing to create a non-hue background, and then use the red button contrast, to form a difference in purity. Compared with the hue contrast, the pure color contrast conflict sense stimulation is relatively small, it is very easy to highlight the authenticity of the subject content.

Point of view: the use of contrast is important to grasp the proportion, area, composition, rhythm, color, position and so on all can change elements, forming a strong visual conflict.

3.3 Brightness Contrast

The contrast of lightness is close to the actual reflection of life, and the design tends to be true through the light and dark relationship between environment and sunshine angle.

Arktis's case

The brightness contrast is enough to make the space depth level of the picture, showing the contrast relation between the near and far, blend the distance of the main body content and the low luminosity performance vision. And the Ming-man attention focused on the highlighted area, showing the true portrayal of the bottle.

Point of view: Brightness contrast makes the page appear more simple, unified, and high and low brightness difference can produce distance relationship.

Summarize:

Color is the most can cause mood resonance and emotional cognition of the elements, the three primary colors can be allocated a very rich color, color collocation is ever-changing. Design color, we can discard some of the traditional default style, understand the requirements behind the design of the purpose, thinking about the color of the page scene performance, emotional communication and so on, so that there is a basis, methodical, method to build color collocation scheme.

Web color collocation Tutorial: Three practical ways to get the web color design done