A detailed explanation of the overlapping and soft color matching method in web page color matching

This article does not have any quibbles, it is just a sharing of color matching techniques. It is very simple, so simple that it makes you cry, but it may be very practical to you, so practical that you will be speechless. It was originally a gift from nature, you and I just picked it up...
The visual aspect of a web page is mainly composed of form (or layout), color, pictures and text information. Designers usually pay more attention to the sense of form, because visual impact, design differences or innovation mostly rely on the form presentation, and color mainly affects the overall perception, design quality and audience emotions. Many times, we design a good form but fail to achieve the quality that this manuscript should have. Isn’t it a pity?
Forms need to be thought about and created, image materials need to be learned and processed, and text needs to be sorted and arranged, but does web page color necessarily require a natural sense of color, rich theories, and years of experience to be able to use it freely?
Of course not!
There are many articles on web page color matching on the Internet, and some of them are even flooded. Students who have paid a little attention should know auxiliary color matching tools such as "color wheel" and "color card", but most of them are extended from the color system on printed media, which is not completely applicable to web pages and even causes great limitations. For example, would you seriously use the color wheel to select web page colors? For example, with the color combinations provided below, can you freely respond to similar web page design needs one after another?
Soft color matching in web page color matching Sanlian tutorial

Soft color matching in web page color matching Sanlian tutorial

Due to the differences between CMYK and RGB color modes, the number of colors presented on web pages is much larger, and the selection should be more free. However, when it comes to color matching, we often encounter big problems such as dirty, gray, and gaudy designs. This problem needs to be solved.
Web page case analysis "Web page color matching should not exceed three."
Truth, that's true, but it is more about hue (different colors such as red, orange, yellow, green, indigo, purple, etc.).
Since the difference in hue is obvious, it is easier to choose the main color. Common methods include contrasting colors, adjacent colors, complementary cool and warm tones, etc. They can be simply set, or you can directly borrow the main and auxiliary color ratios from successful works, such as the common vermilion embellished with dark blue, bright yellow embellished with dark green, etc.
But usually, the design requirements we need to face will have more problems in color allocation:

(Since I am engaged in the visual design of game web pages, the cases are all illustrated with game web pages. Other types of web pages can be extended for consideration or just for reference)
As shown above, depending on the amount of information on the web page, there will be more hierarchical divisions of color areas and hierarchical distinctions of text information. So, while adhering to the principle of "no more than three colors (phases) on a web page", we can only look for more colors in the same color family to improve the design, that is, to work on "saturation" and "brightness".
This is the "natural" color matching technique that this article wants to share to solve this problem: the overlapping and soft color matching method.
Sharing of techniques for overlapping and soft color matching (this is the main text, the above is all nonsense)
This method is very simple. You don’t need to know trigonometric functions or arithmetic operations, you don’t need to understand color indices and histograms, or even color gradation curves and brightness levels... You can even be completely unconscious about colors.
★You only need to understand three key words: overlay, soft light and transparency (fill).
If you are still unclear about these three keywords, remember their locations (see the picture below):

Note: Transparency is slightly different from fill. Fill will not affect the effect of "Blending Options", while transparency affects the entire layer.
By the way, take a few minutes to understand the principle of this color matching technique:

That is: use pure white (#ffffff) and pure black (#000000) through the "overlay" and "soft light" blending modes (the effect is similar to adjusting saturation and brightness) to get the best matching color on any color (then select the most suitable auxiliary color by adjusting the transparency).
(In the example above, by adjusting the transparency of the black and white blocks in the overlay/soft mode (taking integer values from 10% to 100% as an example), you can get 40 color combinations with obvious differences. Through this technique, in theory, each color can easily obtain endless "natural color combinations" with "0 mistakes"!)
★ Since Overlay and Soft Light modes do not adjust the brightest and darkest parts of the image, this color matching method does not work for pure black and pure white.
Design practical demonstration:
Is it as complicated as the picture above?
No, as long as you understand the above methods, you can forget about the icons and be free to play in your design work!
Three simple steps:
① A black or white, or a black and white gradient (can be dots, lines, surfaces...even fonts)
② Select Overlay or Soft Light for the blending mode ③ Adjust the transparency (1%-100% is optional, the easiest way is to directly enter an integer value, for example: for light texture pages, you can choose 20%-40%, and for heavy texture pages, you can enter 60% or more)
As shown below:

(No matter what main color you use, whether it is black and white overlay or soft light, you can easily get a perfect matching color scheme. The PSD source file is attached)
This is not only applicable to color gamut division or extracting a few secondary colors, as shown below: font color, detail lines, button gradients, corner highlights, stroke shadows... can all be freely applied in black and white!

Method extension (details)
If this method is applied to a button...
Through the "Shadow, Outer Glow, Stroke (Do not use the Soft Overlay method), Inner Shadow, Inner Glow" in the blending options, you can freely depict 5 layers of pixel-level details (of course, in actual use, usually 1 to 3 layers are sufficient).

And no matter how the shape and color change, these details will follow the shape and color will change accordingly~ It can save a lot of time to readjust the details or blindly select the color matching!
Details, quality and efficiency, three birds with one stone!
(Recently, I saw a discussion in the design circle about the topic of "Web page carving is not advisable". If details become a habit and beauty becomes intuition, carving is just an ordinary design behavior.)
Case experience:

postscript:
Overlapping soft color matching method: No tricks are better than tricks~ Leave the elusive feelings to the sophisticated computer and carry out your design scientifically.
Shorter time, higher quality, you deserve it~......
Another thing: Methods are dead, but people are alive. With the help of color levels, curves, color balance, etc., you can create more tricks...

<<: CSS style writing order and naming conventions and precautions

>>: SQL implementation of LeetCode (183. Customers who have never placed an order)