Let you Website design More freedom in color matching Another: The method is that the dead person is alive with color scale, curve, color balance, etc

The visual level of web pages is mainly composed of form (or layout), color, pictures and text information. Form needs to be thought about and invented. Designers usually pay more attention to the sense of form, because visual impact, design difference or innovation mostly depend on the appearance of form, while color mainly affects the overall appearance, design quality and audience emotion. Many times I design a good form but fail to make the quality that this manuscript should have, is it too pity?

Picture materials need to be learned and processed, and text needs to be sorted and arranged. But does the color of web pages need to have a natural color sense, rich theory and years of experience to be able to use it freely?

Of course not!

About Page Color Matching

Even some of them are in flood. There are a lot of articles about color matching on the web. Students who have paid a little attention should all know the auxiliary color matching tools such as "color wheel" and color card, but they are more extended from the color system on the printing media, which is not completely applicable to web pages, and even causes great limitations. For example, will you really use color wheel to select web page colors? For another example, can you freely respond to one type of web design demand after another through the following color combinations?

The number of color rendering of web pages is much larger, because CMYK and RGB color modes are different. It should also be more free to choose, but in color matching, we often encounter big problems such as dirty, gray and gaudy design works, which must be solved.

Web case analysis

Web page color matching should not exceed three kinds.

That's right, truth. But more from the hue (red, orange, yellow, green, blue, purple and other different colors)

The selection of main colors is easy, and the hue difference is obvious. There are rare ways such as contrast color, adjacent color, cold and warm color complementation, which can be simply set, or the ratio of primary and secondary colors can be directly used for reference from the victory works, such as rare vermilion dotted with dark blue, bright yellow dotted with dark green, etc.

The design needs to face will have more problems in color distribution: but usually.

Therefore, the cases are illustrated by the game web page, because I am engaged in the visual design of the game web page. Other types of web pages can be extended or only for reference)

According to the amount of information on the webpage, as shown above. There will be more requirements for hierarchical division of color areas and text information. Under the principle of "no more than three colors (phases) of web pages", we can only find more colors of the same color system to improve the design, that is, saturation and lightness.

This is also the natural "color matching skill" that this article will share in order to solve this problem: flexible color matching.

The above is all nonsense. Share the skills of folding soft colors (here is the text.

This method is very simple without knowing trigonometric function and four arithmetic operations. There is no need to understand the color index and histogram, or even the color scale curve and brightness strength Even, you can be insensible to color.

Only three keywords need to be understood: overlay, soft light and transparency (fill)

If you don't even know these three keywords, remember their location (below)

The filling will not affect the effect of the blending option. Note: the transparency is slightly different from the filling. Transparency is applied to the entire layer.

Take a few minutes to understand the principle of this color matching technique: by the way.

That is, use pure white (# ffffff and pure black (# 000000 through "superposition" and "soft light" mixing mode (the effect is similar to adjusting saturation and lightness) to get the best matching color on any color (and then select the most suitable secondary color by adjusting transparency)

Adjust the different transparencies of black and white color blocks in Overlay/Soft mode (take 10% 100% integer value as an example) to get 40 color books with obvious differences, as shown in the example above. Through this technique, in theory, every color can easily get endless natural color matching "and it is zero mistake"!

Therefore, the color matching method has no effect on pure black and pure white. The superimposition and soft light modes have no adjustment to the most highlighted part and the most shaded part of the image.

Design practical demonstration:

Do you want to be as complicated as the picture above?

You only need to understand the above methods. You can forget the diagram and play freely in the design work!

Three simple steps:

Or black and white gradient (can be dot, line, face... or even font) ① A black or white color.

② Blending Mode Select Overlay or Soft Light

It is easy to type an integer value directly, ③ adjust the transparency (1% - 100% optional. For example, 20% - 40% can be selected for the light sense page, and 60% or more can be selected for the heavy sense page)

As shown below:

Use black and white color overlay or soft light, no matter what main color you use. Can easily and freely obtain a complete set of colors that match perfectly)

As shown in the following figure: font color, detail lines, button gradient, corner highlights, stroke shadows You can use black and white color freely, which is not only applicable to gamut division or extraction of several secondary colors.!

Method Extension (Details)

If you apply this method to a button

Generally, 13 layers can be depicted in actual use) 5 layers of pixel level details can be freely depicted (of course) through the "shadow, external illumination, stroke (not applicable to the flexible stacking method), internal shadow, and internal illumination" in the mixing options.

These details follow the shape, and the color changes with the change~It can save a lot of time for re adjusting details or blindly selecting colors, no matter how the shape and color change.!

One stone, three birds, details, quality and efficiency. Get it both ways!

If we let details become a habit, we have recently seen a discussion in the design circle on the topic of "webpage carving is not advisable". Let beauty become intuition, and carving is just ordinary design behavior.

Case experience:

Postscript:

Scientifically carry out your design. Superimposed color matching method: no move wins! Give the feeling of being unable to grasp to the precise computer.

Higher quality, shorter time. Worth having~
This article was published by Beijing website production company Shangpin China //ihucc.com/