In-depth knowledge of colour mixing techniques

Common dilemmas

Why do the colours that are mixed manually often appear grey and unnatural? How can a transition scale be generated that is consistent with brand-modified?

The power of algorithms.

The weights of the colour channels are calculated accurately through mathematical models. Different hybrid space (e. g. RGB or HSL can produce a very different visual effect, meeting different aesthetic needs.

Mainstream Mixed Mode Parsing

RGB Linear Mixing : The most basic hybrid approach. Put two colors R, G, B The weights are weighted by the respective averages. This model simulates optical supercharges, but may produce slightly grey middle colours in some colours.
HSL Space Mixing : Plug in colour, saturation, brightness. This method usually produces a middle color more than RGB It's more full, more colorful, and it's very appropriate for the gradient effect in UI design.
Script (Multiple) : Simulation of paint mixing in painting. Multiply and divide the fractions of the two colors 255。 The result is always darker than the original colour and is often used to simulate shadows or filters.
Filter (Screen) : The opposite of the frontal fold. It simulates the effects of overlapping exposures from multiple projectors through inverting, multiplying and re-reverse operations. The result is always brighter than the original color.

Apply scene

Brand palette generation : Generates different sublime support colour scales by mixing the main brand colour with white or black.
UI Transition : The exact middle colour of the calculation button from the Normal state to the Hoover state.
Visualization of data : Generate smooth colour maps (Colormap) for heat effort or chart.
Design simulation : Simulate the ultimate visual presentation after superimposed semi-transparent layers.

Use a small tip

Try to switch to different hybrid mode! You'll find that 50% of HSLs are in the same color, and that the blending point is more often than RGB The pattern looks more "live." Besides, the gradients below show the colours from A to B. , click any output box to quickly copy the synthetic code.