The method of overlapping color in the color of Web page

This article does not have the wording of the place, just a color matching skills to share, very simple, simple to tears, but perhaps for you and very practical, practical to the silent. Originally is a natural gift, you I just pick it conveniently ...

The visual aspect of Web page is mainly composed of form (or layout), color, picture and text information, designers usually pay more attention to form, because the visual impact, design difference or innovation mostly depend on the form presentation, and color mainly affect the overall perception, design quality and audience sentiment, A lot of times we have designed a good form but failed to make the quality of the manuscript, will it be too bad?

The form needs to think about creation, the picture material needs to learn processing, the text needs to comb the arrangement, but the webpage color must have the innate color feeling, the rich theory and the years experience precipitation can use freely?

Of course not!

About web Color

Page color of the article on the network a lot of even some flooding, a little attention to students should know "color wheel", "Color card" and other auxiliary color tools, but that is more from the printing medium color system extended out, not fully applicable to the Web page, and even caused a lot of limitations, For example, you will be serious through the color wheel to choose the color of the Web page? For example, with the color combination provided below, are you free to respond to a similar type of web design requirement?

As a result of CMYK and RGB color mode, the color of the Web page to the number of large, and should be more free choice, but in the color of the design works often encounter dirty, hair gray, fancy and other big problems, this matter to be resolved.

Web Case Analysis

"Web page color should not be more than three kinds." "

Truth, this is true, but more from Hue (Chinghuang and other colors) to say.

Hue difference is obvious, the main color selection is better to do, the common have contrasting color, adjacent color, warm and cold tone complementary ways, you can simply set, or directly from the success of the works to learn from the main auxiliary color ratio can be, such as the common vermilion dotted dark blue, yellow dotted dark green, etc.

But in general, the design needs that we face will have more problems with color distribution:

(as I am engaged in the visual design of the game web, the cases are illustrated by the game Web page, other types of Web pages can be extended thinking or just refer)

As shown above, depending on the amount of information on the page, there will be more color areas of the hierarchy and text information levels to distinguish between the requirements, then in the "Web page color (phase) not more than three kinds of" principle, can only look for more colors with the color to improve the design, that is, "saturation" and "lightness" on the fuss.

This is also the article to solve this problem to share the "natural" color technique: Folding Color method.

Overlapping color technique sharing (This is the text, it's all nonsense)

This method is very simple, do not need to know trigonometric functions, arithmetic, no need to understand the color index and histogram, even do not understand the color curve and brightness strength ... Even, you can be insensitive to color.

★ Only need to understand three keywords: overlay, soft light and transparency (padding).

If you don't know these three keywords, remember where they are (below):

Note: Transparency is slightly different from padding, and padding does not affect the effect of the blending options, while transparency works on the entire layer.

By the way, take a few minutes to find out how this color technique works:

namely: pure white (#ffffff) and pure Black (#000000) through the "superposition" and "soft Light" blending mode (the effect is similar to adjust the saturation and lightness), in any color to get the most matching color (and then adjust the transparency to select the most appropriate auxiliary color).

(in the example above, adjusting the different transparency of the black and white color blocks of the stack/Soft mode (take 10% to 100% integer values for example) gives the 40 colors that are significantly different. With this technique, theoretically each color can be easily achieved by the endless "natural color", and is "0 mistakes"!)

★ Because the overlay and soft light modes have no adjustment to the highest bright and shaded portions of the image, the color method does not work for pure black and pure white.