The simple and practical method of three Strokes Web page color Matching

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.

Design Combat Demo:

Do you want it to be as complicated as the diagram above?

No, just to understand the above method, you can forget the diagram, in your design work free to play!

Three simple steps:

① a black or white, or black and white gradient (can be dots, lines, faces ...) even fonts)

② Blending Mode Select overlay or soft light

③ Adjust the transparency (1%-100% casual, worry is to type an integer value directly, for example: Light Texture class page can choose 20%-40%, heavy texture sense class can type 60% or more)

The following figure:

(no matter what you use the main color, with black and white color overlay or soft light, you can easily and freely get the perfect matching of the whole set of colors, the attachment has PSD source files)

This does not apply only to color gamut partitioning or extraction of several complementary colors, as follows: Font color, detail lines, button gradients, corner high light, stroke shadow ... can use black and white wanton sway!

Method Extension (detail)

If the method is applied to a button ...

The "shadow, outer glow, stroke (not applicable to the fold), inner shadow, and inner glow" of the blending options can be freely depicted in 5-layer pixel detail (of course, 1 to 3 layers are usually depicted in actual use).

And regardless of shape, color changes, these details are everywhere, the color changes with the change ~ can save a lot of the details or blindly choose color matching time!

Details, quality and efficiency, a stone three birds, but also the!

(recently saw the design circle has discussed "page carving can not be taken" topic, if let the details become a habit, let the beauty become intuition, carving is just ordinary design behavior. )

Case Experience:

Postscript:

Fold the color method: No recruit wins have recruit ~ to grasp the feeling to the precision of the computer, scientific for your design.