Artificial intelligence color matching series (I) scheme and rules

preface

In many links of artificial intelligence to generate Banner, intelligent color matching is one of the difficulties. First of all, color matching has a great impact on the identification and expression of the design, and whether the color matching results meet the aesthetic standards is clear at a glance. Secondly, artificial color matching has strong artistry and a certain degree of experience accumulation, which is relatively time-consuming and labor-consuming in Banner design. It is particularly challenging to use the machine to restore the design idea, or even to provide multiple color schemes for the same Banner.

This series of articles will discuss solutions for Banner smart color matching. This paper mainly introduces the scheme framework and the design process of color matching rules.

Scheme: Palette and rules

Element hierarchy

• Background layer: The lowest solid color background, usually the same or similar to the main color of the product or IP.
• Background texture layer: Refers to the texture that decorates the background, usually close to the background.
• Background modifier: refers to the active background atmosphere, usually of a similar color.
• IP layer: refers to the IP image.
• Foreground modifier layer: due to the large area of IP image, foreground modifier is used to divide the area and partly block IP, so as to highlight goods and words. The foreground modifier layer is not discussed in this article.
• Product retouching layer: Refers to the retouching image on the back, used to highlight the product.
• Merchandise: refers to merchandise drawings.
• Text: index questions and other text.

When building a scheme, there are two options: use a palette or use color rules.

palette

• After extracting the commodity representative color, compare the commodity representative color with the existing color palette library (captured from Dribble) to find the corresponding color palette.
• The color palette in Dribble is sorted by area of color. When using the palette, ignore white and black (as well as the approximate white and black) and color the Banner from bottom to top in turn.

The above picture shows the color palette of a work in Dribble. The color scheme obtained through the above process is not satisfactory. For example, this work reveals weird and confusing. The problem can be summed up in the following two points:

• Without combing the internal relationship between colors on the palette, only by area sorting.
• Using area size as a palette mapping between colors and Banner elements is too simplistic.

Color matching rules

The group of colours extracted from the Palette were classified as Vibrant, dark, light, Muted, dark and Muted. You can set the color for the interface according to the rule, such as: dark as panel color, dark as the control bar color, fresh as the button color. And then provide a reasonable collocation. Also dark and light colors provide a reasonable contrast and are often used for backgrounds and text. The JS implementation of this class library is Vibrant. Through the analysis of its source code, it can be found that the color of the image is classified and converted to a certain rule. This proves the feasibility of converting colors by rules and applying them to multiple commodities or IP images.

Vibrant. Js provides a set of color schemes with a rule built in. If there are multiple reasonable rules, multiple scenarios can be generated for each commodity or IP pattern. The diversity of results can be enriched by establishing a rule base.

By contrast, the following conclusions can be drawn:

Thus, the use of color matching rules: based on the hierarchical relationship of elements, can make the results stable and safe; The source of acquisition rules can not only be created by experts, but also be transformed in the network through hierarchical relationship. At the same time, a rule can be reused in a variety of goods or IP patterns, fewer color matching rules can support most Banner requirements.

System framework

Based on the above analysis, a highly extensible system framework based on color matching rules can be established. As shown in the figure below, the horizontal is the main process of intelligent color matching, and the other is the auxiliary process.

The scheme is mainly composed of four parts, namely image color selection, rule selection, scheme generation and color replacement:

• Image color: Quantization and extraction of representative color of the Banner main pattern (such as commodity picture, IP image picture, etc.). There are many methods to extract image theme color, such as Median Cut and Octree based on quantization algorithm. Clustering based k-means method and so on. Vibrant. Js is based on a quantization algorithm and can also be used to pick colors from images.
• Rule selection: the AI automatically selects the appropriate rule according to the color and style of the representative. Although the color matching rules have certain universality, there are still advantages and disadvantages for different colors. Different color matching rules produce different color matching styles. The best rules corresponding to different colors and styles can be obtained by scoring and training the representative colors and styles of goods and the results based on color matching rules. In addition to manual training, the training can also be trained by clicking the Banner in actual use as feedback.
• Scheme generation: Scheme generation is the core part of the system. Establishing effective color matching rules and generating reasonable color matching schemes will directly determine the effect of the results.
• Color replacement: According to the corresponding relationship between the colors in the color scheme and the elements in the Banner, color replacement of the elements in the Banner is carried out to complete the color matching. Color replacement is related to materials. SVG and other materials support direct color replacement. For the material in PNG format, canvas traverses and replaces pixels.

The rule base provides good expansibility for the system. The following part mainly discusses the key part of the system architecture of the scheme: scheme generation.

Color: scheme generation

Scheme generation is the core of intelligent color matching system. There are two key points, namely the choice of color model and rules based on color model.

Color model

In daily design and UI development, Hex is a commonly used method to represent colors. The hexadecimal color value is actually a representation of the RGB model. Although Hex is very convenient, the academic RGB model is not suitable for designing color schemes. RGB is designed based on the principle of color and light mixing, and uses the superposition of red, green and blue light intensity to describe colors. Although it conforms to the color sensing principle of cones and the color rendering principle of monitors, it is the favorite of machines, but it goes against human perception and makes people powerless to use it.

Compared with HSL model, it is easy to describe colors by hue, saturation and brightness, which makes it possible to adjust colors according to perception and saves human dignity.

It is worth mentioning that HSL has a twin brother, HSB (also known as HSV), who occupies the color palette of mainstream design software such as Photoshop, and is more familiar to designers, but his character is rebellious. Compared with THE exact definition of HSL, when the saturation in HSB is 0%, it should be equal dark gray but white. When its brightness is 100%, it should be pure white, but it is the color itself. Although this adjustment simplifies the area of color interface selected by designers in the design software, it does not conform to the definition of component, also causes ambiguity, and is not conducive to regular calculation, so it has not been used in the project.

Since HSL defines standards (supported by W3C standards) and takes hue, saturation, and brightness as components, it is easy to build color matching rules. Therefore, HSL is chosen as the color model to build rules. So any color C can be converted to an array of (H, S, L) components. Color matching rules are established by components to be applied to other colors.

Color matching rules

Through HSL, human intuition can be used to describe colors, and explore the color matching rules, and then form color matching rules.

In fact, in the field of design, gradually formed a series of color matching methods, as well as with distinctive color matching rules. These methods and rules can be transformed into rules through THE HSL model, thus forming a warehouse.

H component phase in HSL model is taken as an example. Based on the hue, the design field can match colors according to the hue ring (represented by the hue ring), and has a series of laws. Such as the common color matching method:

• Monochrome: Use only one color when designing, or use one shade of dark and light.
• Similar color scheme: Use three colors adjacent to each other in the color wheel as a color scheme.
• Complementary color matching: Use two colors at opposite positions on the color wheel to match.
• Three-color scheme: use three color schemes with 120 degree angles on the color wheel.

It can be seen that designers find appropriate colors by rotating the Angle of the hue ring when matching colors, and the rotation Angle has established rules, and can be reused. Given this principle, we can construct the following rules:

When the designer took yellow (C1) as the representative color, by rotating and changing its components (H1, S1, L1), a group of colors suitable for different layers was formed: light yellow C11 (H11, S11, L11), light orange C12 (H12, S12, L12), and orange C13 (H13, S13, L13).

Record the variation between δ H11, δ S11, δ L11), (δ H12, δ S12, δ L12), (δ H13, δ S13, δ L13); δ H11=H11-H1, and so on.

When a new product or IP needs to generate Banner color matching, such as green (C2) as the representative color of the product, it can make the same change to its components (H2, S2, L2) to get the color: Green C21 (H21, S21, L21), light green C22 (H22, S22, L22), yellow C23 (H23, S23, L23). H21 = H2 + δ H11, and so on.

In this way, color matching rules based on component changes are formed.

However, color value overflow is found in practice. That is, H ranges from 0° to 360°, S and L range from 0° to 100°. Because the same rule is used in different colors, if the color with moderate brightness saturation is used to create rules, but the color with high brightness and low saturation is used, the color value will overflow, so the overflow phenomenon is quite common. As shown in the figure below, the color matching rules established according to purple can not be used because the brightness and saturation of pink yellow overflow at different layers when it is used.

After comparison of actual effects and cooperation with designers, the rules are treated as follows for overflow:

• Hue: because the hue is circular, the actual degree beyond 360° or less than 0° can be calculated according to the circle, such as 370° is 10°, -10° is 350°.
• Saturation and brightness: through actual comparison and designers’ experience, it is found that the rich color of matching color is determined by hue, and the deflection hue conforms to the design rules. Saturation and brightness, on the other hand, are often used in design to adjust the differences between different hues or to create atmosphere. Record the saturation and brightness values and adjust them directly rather than recording the variation.

After adjustment, the color matching rules are :(δ H11, S11, L11), (δ H12, S12, L12), (δ H13, S13, L13); When other colors such as C2 are used as representative colors, by calculating H and directly adjusting S and L to the corresponding values, we get: C21 (H21, S11, L11), C22 (H22, S12, L12), C23 (H23, S13, L13), where: H21 = H2 + δ H11, and so on.

After adjustment, as shown in the image above, pink can be used to form a good color match. Thus, a relatively sound color matching rule is constructed. A rule library can then be created by the designer.

Model to adjust

In the actual implementation process, after a series of comparison, the defects in HSL model gradually emerged.

As shown in the left figure, under the condition of fixed hue and brightness, the optimal similar color phase rotation Angle offset value was explored for 12 equally divided hue. By comparison, it is found that the rotation Angle wobble, indicating that the same rotation Angle rule can not be widely applied to other hue.

The image on the right shows a fixed hue and saturation, adjusting only brightness to find the best match between two different shades of the same hue. For example, for red, when the brightness of the background color is 60%, texture color is 48%, the most comfortable. The relationship between the two luminances also appears to jitter and is not fixed at the same value. Note The same brightness Settings cannot be widely applied to other hues.

The reason is that the color values in HSL are still not “humanized” enough. In terms of hue, the naked eye perception is not consistent. Look at the HSL color wheel on the right. The yellow area is very bright, while the blue-purple area is very dark. Even with brightness sorting, there are other visual perception problems that make the pattern hard to find. This reduces the reusability of rules. In the same style, multiple rules need to be established to meet different conditions.

Through the exploration of the solution, we found the L*C* H model proposed by the International Commission on Illumination (CIE), an authority in the field of light and colour science. The L*C* H model has a good correlation with how the naked eye perceives color, eliminating the inconsistency of the naked eye perception. As shown on the left side of the figure above, L*C* H is more consistent than HSL model when saturation is 100% and brightness is 60%. Compared with the L* A * B model of the same origin, the L* A * B model has the same expression mode as the HSL model, that is, the modified hue, saturation and brightness are taken as components. Therefore, L*C* H model can be used to replace or supplement HSL model to improve the extensive trial of color matching rules.

other

In the previous steps, color value conversion is required. Color value conversion part needs to support HEX, RGB, HSL, L*C* H conversion. Chroma.js can be easily implemented.

Based on the above rules, designers can generate a small number of rules and store them in the rule library to realize the support for Banner color matching. At the same time, enriching more rules and forming more style rules will greatly enhance the diversity of color matching results.

conclusion

Automatic generation of Banner, intelligent color matching is an indispensable part. This paper describes the method of generating color scheme based on color matching rules. Everything is just beginning, color extraction, AI-based intelligent rule selection, Banner coloring and other parts will be released in the future, please stay focused.