Method, system and related device for generating color matching scheme of page

Abstract

The invention discloses a page color matching scheme generation method and system and a related device, and relates to the field of page design, and the method comprises the following steps: extracting a plurality of colors from a theme map of a page; obtaining the area proportion of each color in the theme map and the color feature of each color, and calculating the color feature score; performing weighted scoring on the area proportion and the color feature score to obtain a total score of each color, and screening out a plurality of candidate colors according to the total score; calculating a correlation score between each candidate color and a topic type of the topic map, and taking the candidate color with the highest correlation score as a main color; according to a preset color matching rule and main and auxiliary color requirements of a color application scene of the page, generating an auxiliary color of the main color, and according to the preset color matching rule, generating an embellishment color of the main color and the auxiliary color; and pairing the embellishment color, the main color and a plurality of auxiliary colors of the main color to generate at least one color matching scheme of the page. At least one color matching scheme of the page is automatically generated according to the theme map, and the page color matching efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of page design technology, and in particular to a method, system and related apparatus for generating page color schemes. Background Technology

[0002] When designing a page, it's often necessary to select color schemes for various elements on the page (such as page background, page borders, page icons, etc.) based on the page's theme image, achieving a color match between the various elements and the theme image. The theme image can refer to image materials that carry the core information of the page, such as real-life photos of products on a product details page, or real-life photos of event scenes on an event homepage.

[0003] Currently, the color matching process for pages mainly involves manual selection of color schemes for page elements based on the theme image. However, when there are a large number of page color matching tasks, manual color matching becomes inefficient. Summary of the Invention

[0004] In view of the above problems, this application provides a method, system, and related apparatus for generating color schemes for web pages, so as to improve the efficiency of color matching for web pages. The specific solution is as follows:

[0005] The first aspect of this application provides a method for generating a page's color scheme, the method comprising:

[0006] Extract multiple different colors from the page's theme image;

[0007] Obtain the region percentage of each extracted color in the theme map, and obtain the color features of each extracted color, and calculate the color feature score for each color;

[0008] The region proportion and color feature score of each color are weighted and scored to obtain the total score of each color. Multiple candidate colors are selected from multiple colors based on the total score, and the total score of each candidate color is greater than the total score of other colors.

[0009] Calculate the relevance score between each candidate color and the theme type of the theme image, and select the candidate color with the highest relevance score as the main color;

[0010] According to the preset color matching rules and the primary and secondary color requirements of the color application scenario of the page, at least one secondary color of the primary color is generated, and the accent color of the primary color and the secondary color is generated according to the preset color matching rules.

[0011] The accent color, the main color, and at least one secondary color of the main color are paired to generate at least one color scheme for the page.

[0012] One possible implementation also includes:

[0013] A pre-trained color matching evaluation model is used to score the visual harmony of each color scheme.

[0014] If the visual harmony score of the target color scheme is less than the threshold, the secondary and accent colors in the target color scheme are adjusted until the visual harmony score of the target color scheme is not less than the threshold. The target color scheme is one of the at least one color schemes.

[0015] In one possible implementation, adjusting the secondary and accent colors in the target color scheme includes:

[0016] Adjust the hue of the secondary color in the target color scheme to obtain the first secondary color, and generate the first accent color of the primary color and the first secondary color according to the preset color scheme rules to obtain the adjusted target color scheme.

[0017] Determine whether the visual harmony score of the adjusted target color scheme is less than the threshold. If not, stop the adjustment and output the adjusted target color scheme. If yes, adjust the saturation of the first secondary color in the adjusted target color scheme to obtain the second secondary color. Generate the second accent color of the primary color and the second secondary color according to the preset color matching rules to obtain the color scheme after the second adjustment.

[0018] Determine whether the visual harmony score of the second-adjusted color scheme is less than the threshold. If not, stop the adjustment and output the second-adjusted color scheme. If yes, determine the relationship between the number of iterations and the iteration threshold.

[0019] If the number of iterations is less than the iteration threshold, then the color scheme after the second adjustment is taken as the target color scheme, and the process returns to the step of adjusting the hue of the secondary colors in the target color scheme.

[0020] If the number of iterations is not less than the iteration threshold, the adjustment is stopped, the third secondary color of the primary color is selected from the multiple candidate colors, the third accent color of the primary color and the third secondary color is generated according to the preset color matching rules, and the color scheme containing the primary color, the third secondary color and the third accent color is output.

[0021] In one possible implementation, calculating the relevance score between each candidate color and the theme type of the theme image includes:

[0022] Identify the theme type of the theme image and obtain the hue range corresponding to the theme type from a preset theme type-color mapping library;

[0023] If the hue angle of the target color is within the hue angle range corresponding to the hue range on the color wheel, then the relevance score of the target color is full, and the target color is one of the candidate colors among multiple candidate colors;

[0024] If the hue angle of the target color is not within the hue angle range on the color wheel, then calculate the minimum angle difference between the hue angle of the target color and the hue angle range.

[0025] Calculate the hue attenuation score corresponding to the minimum angle difference, and calculate the full score minus the hue attenuation score. Use the calculated result as the relevance score of the target color.

[0026] One possible implementation also includes:

[0027] If the primary color does not meet the primary color requirements of the color application scenario, then a replacement color for the primary color is selected from multiple candidate colors, and the replacement color is used as the primary color.

[0028] In one possible implementation, the preset color matching rules include rules based on the same color family or rules based on adjacent colors;

[0029] The step of generating at least one secondary color of the primary color according to preset color matching rules and the primary and secondary color requirements of the color application scenario of the page includes:

[0030] Adjust the brightness or saturation of the main color according to the same color system rule to generate multiple secondary color candidates for the main color, or select a color adjacent to the main color on the color wheel according to the adjacent color rule to generate multiple secondary color candidates for the main color;

[0031] From the plurality of secondary color candidates, at least one secondary color candidate that satisfies the primary and secondary color requirements shall be used as at least one secondary color of the primary color.

[0032] In one possible implementation, the extraction of multiple different colors from the page's theme image includes:

[0033] Analyze the theme image to determine the colors contained in the theme image, as well as the saturation, contrast, and brightness of each color;

[0034] Determine whether the saturation, contrast, and brightness of each color meet the corresponding thresholds;

[0035] Colors that meet at least two thresholds are extracted to obtain multiple different colors extracted from the theme image.

[0036] A second aspect of this application provides a system for generating color schemes for web pages, wherein the method for generating color schemes for web pages includes:

[0037] The extraction unit is used to extract multiple different colors from the page's theme image;

[0038] The processing unit is used to obtain the area proportion of each extracted color in the theme map, and to obtain the color features of each extracted color and calculate the color feature score of each color.

[0039] The scoring unit is used to perform a weighted scoring on the region proportion and color feature score of each color to obtain the total score of each color, and to filter out multiple candidate colors from multiple colors based on the total score, wherein the total score of each candidate color is greater than the total score of other colors.

[0040] A calculation unit is used to calculate the correlation score between each candidate color and the theme type of the theme image, and to select the candidate color with the highest correlation score as the main color.

[0041] The color matching unit is used to generate at least one secondary color of the primary color according to the preset color matching rules and the primary and secondary color requirements of the color application scenario of the page, and to generate the accent color of the primary color and the secondary color according to the preset color matching rules.

[0042] The generation unit is used to pair the accent color, the main color, and at least one secondary color of the main color to generate at least one color scheme for the page.

[0043] A third aspect of this application provides an electronic device, comprising at least one processor and a memory connected to the processor, wherein:

[0044] The memory is used to store computer programs;

[0045] The processor is used to execute the computer program so that the electronic device can implement the page color scheme generation method of the first aspect or any implementation thereof.

[0046] The fourth aspect of this application provides a computer program product, including computer-readable instructions, which, when executed on an electronic device, cause the electronic device to implement the color scheme generation method for a page according to the first aspect or any implementation thereof.

[0047] Based on the above technical solution, this application provides a method, system, and related apparatus for generating page color schemes. The method extracts multiple different colors from the page's theme image, obtains the area proportion of each extracted color in the theme image, and obtains the color features of each extracted color. It calculates the color feature score for each color and, based on the area proportion and color feature score, selects multiple candidate colors from the multiple different colors. It calculates the correlation score between the candidate colors and the theme type of the theme image and uses the correlation score to select one candidate color as the primary color. After determining the primary color, it generates at least one secondary color according to preset color matching rules and the primary and secondary color requirements of the page's color application scenario. It also generates accent colors for the primary and secondary colors according to preset color matching rules. Finally, it pairs the accent colors, primary color, and at least one secondary color of the primary color to generate at least one color scheme for the page. This method selects the page's primary color from the colors extracted from the theme image and generates secondary and accent colors based on the determined primary color, automatically generating at least one color scheme for the page. The automatically generated color scheme not only ensures the adaptation of the page's primary color to the theme image but also effectively guarantees the coordination of colors on the page, effectively improving the efficiency of page color matching. Attached Figure Description

[0048] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0049] Figure 1 A flowchart illustrating a color scheme generation method provided in an embodiment of this application;

[0050] Figure 2 A schematic diagram of a color wheel provided for an embodiment of this application;

[0051] Figure 3 A schematic diagram illustrating the adjustment logic of a color scheme provided in an embodiment of this application;

[0052] Figure 4 This is a schematic diagram of the structure of a color scheme generation system provided in an embodiment of this application;

[0053] Figure 5 This application provides a hardware structure block diagram of an electronic device. Detailed Implementation

[0054] The embodiments of this application are described below with reference to the accompanying drawings. The terminology used in the implementation section of this application is for explaining specific embodiments only and is not intended to limit the scope of this application.

[0055] The embodiments of this application will now be described with reference to the accompanying drawings. Those skilled in the art will recognize that, with technological advancements and the emergence of new scenarios, the technical solutions provided in the embodiments of this application are equally applicable to similar technical problems.

[0056] The terms "first," "second," etc., used in the specification and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such terms can be used interchangeably where appropriate; this is merely a way of distinguishing objects with the same attributes in the embodiments of this application. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion, so that a process, method, system, product, or apparatus that comprises a series of units is not necessarily limited to those units, but may include other units not explicitly listed or inherent to those processes, methods, products, or apparatuses.

[0057] Currently, the main color schemes for web pages include the following two schemes.

[0058] The color scheme is selected and configured by staff in the background based on the theme image. This manual process is inefficient and the quality of the color scheme is uncontrollable. Human color matching is highly subjective and lacks relevant color theory support, which can easily lead to problems such as insufficient contrast (affecting page readability), unbalanced saturation (causing visual fatigue), and hue conflicts (making the page look cluttered).

[0059] The algorithm extracts colors from the theme image and automatically matches them. Currently, when extracting colors from the theme image, the algorithm usually selects the color with the largest color area in the image and uses it as the recommended color. However, considering only the color area proportion when selecting colors makes it difficult to flexibly cope with various color application scenarios, and the selected color scheme may not be suitable as the main color of the page.

[0060] To address the aforementioned problems, this application provides a method for generating a page color scheme. The method for generating a page color scheme according to this application will be described in detail below with reference to the accompanying drawings.

[0061] Reference Figure 1 , Figure 1 A flowchart illustrating a method for generating a page color scheme, as provided in an embodiment of this application, is shown below. Figure 1 As shown in the embodiment of this application, a method for generating color schemes for multiple pages may include steps S10 to S15, which are described in detail below.

[0062] S10. Extract multiple different colors from the page's theme image.

[0063] The theme image of a page can refer to the visual subject that carries the core information, conveys the core emotion, or the core function of the page; it can be a "visual anchor" of the page. Examples include real-life product images on a product details page, character images on a game promotional page, cover images of tourist attractions or hotels, and concert posters. In this embodiment, the theme image can be in common static image formats such as JPG, PNG, BMP, and WebP. The theme image can be uploaded by the user to the color scheme system.

[0064] To improve the compatibility between the main color of the page and the theme image, this embodiment selects multiple colors from the theme image and then chooses the main color from these multiple colors. The specific process of extracting colors from the theme image is as follows:

[0065] Analyze the theme image to determine the colors contained in the theme image, as well as the saturation, contrast, and brightness of each color; determine whether the saturation, contrast, and brightness of each color meet the corresponding thresholds; extract the colors that meet at least two thresholds to obtain multiple different colors extracted from the theme image.

[0066] In this embodiment, a modified high-performance MMCQ algorithm is selected to perform pixel-level analysis on the subject image, thereby extracting multiple colors from the subject image. The high-performance MMCQ algorithm (High-performance Modified Median Cut Quantization) can refer to a classic optimization algorithm for image color quantization that compresses the massive colors of an image into a specified number of core colors while ensuring visual quality.

[0067] This embodiment, when extracting colors from a theme image, not only calculates the area proportion of each color within the theme image but also simultaneously calculates objective characteristics such as saturation, contrast, brightness, and hue for each color. High-distinctiveness colors are filtered out based on the saturation, contrast, and brightness of each color, facilitating the exclusion of unsuitable primary colors such as gray and low-saturation colors. Specifically, this embodiment sets thresholds for saturation, contrast, and brightness, and each threshold can be configured and updated according to actual scenario requirements. The saturation, contrast, and brightness of each color are compared with their corresponding thresholds. Colors not less than at least two of these thresholds are extracted. For example, a color with brightness not less than a certain threshold and saturation not less than a certain threshold can be extracted; similarly, a color with saturation not less than a certain threshold and contrast not less than a certain threshold can also be extracted.

[0068] S11. Obtain the region proportion of each extracted color in the theme image, and obtain the color features of each extracted color, and calculate the color feature score of each color;

[0069] S12. Weight the region proportion and color feature score of each color to obtain the total score of each color. Based on the total score, select multiple candidate colors from multiple colors. The total score of each candidate color is greater than the total score of other colors.

[0070] The color area proportion refers to the percentage of the area covered by the color within the overall effective visible range of the theme image. It can be calculated as: Area proportion = (Number of pixels covered by color / Total number of pixels in the theme image) × 100%. Color characteristics refer to the core dimensions describing the essential attributes and visual expression of color; the inherent physical properties of color, unaffected by subjective human judgment or image semantics. In this embodiment, color characteristics may include color saturation, brightness, and contrast with the overall image. Color feature score refers to the quantitative evaluation index corresponding to the color feature. The specific process for calculating the color feature score for each color is as follows:

[0071] Saturation, brightness, and contrast are each assigned a corresponding weight. In this embodiment, saturation, brightness, and contrast are converted into corresponding quantized scores, and the quantized scores of saturation, brightness, and contrast are weighted and summed. The sum is then used as the color feature score. For saturation quantization, since this embodiment uses a normalized ratio of 0–1, its value range is [0, 1]. For example, 0.7 indicates that the vividness of the color reaches 70% of the maximum vividness of the hue. Therefore, this embodiment uses the product of saturation and 100 as the quantized score after saturation conversion. For brightness quantization, since the main image in this embodiment is primarily an 8-bit image (256-color image), the brightness quantization range is [0, 255] (the standard value for 8-bit images). Therefore, the brightness quantization method in this embodiment is: Brightness quantized score = (Brightness / 255) × 100%. Regarding the quantization of contrast, since the range of contrast value is [0, 100], the quantization method of contrast in this embodiment is: contrast quantization score = (contrast / 100) × 100%.

[0072] For example, a color has a brightness of 180, a saturation of 0.7, and a contrast of 80.

[0073] The quantification score for brightness is approximately 70.59 points (180 / 255) × 100.

[0074] The quantitative score for saturation is 0.7 × 100 = 70 points;

[0075] The quantitative score for contrast ratio is (80 / 100) × 100 = 80 points.

[0076] Assume the weights are: brightness W1 = 0.5, saturation W2 = 0.3, and contrast W3 = 0.2;

[0077] Therefore, the color feature score of this color = quantized score of brightness × W1 + quantized score of saturation × W2 + quantized score of contrast × W3 = 70.59 × 0.5 + 70 × 0.3 + 80 × 0.2 ≈ 76.3 points.

[0078] This embodiment, after obtaining the region proportion and color feature score for each color, can perform weighted scoring to obtain the total score for each color. This embodiment can sort the colors in descending order of their total scores, selecting several colors with higher total scores, such as the top ten or top five, to obtain multiple candidate colors, forming a multi-dimensional candidate color library. The weights of both the region proportion and the color feature score can be configured and updated.

[0079] S13. Calculate the correlation score between each candidate color and the theme type of the theme image, and select the candidate color with the highest correlation score as the main color.

[0080] The primary color can refer to the color that occupies the largest visual proportion on the page, defines the core identification tone of the page, and serves as the visual identifier of the theme. It can determine the user's first visual impression of the page.

[0081] The theme type of the theme image can refer to the type of content or core scene displayed in the theme image, such as nature, technology, business, and children's themes. The correlation score between candidate colors and the theme type of the theme image can be an indicator that quantifies the degree of correlation between the candidate colors and the theme type. Different theme types have different corresponding color schemes; for example, technology themes generally correspond to blue-purple schemes, while nature themes generally correspond to green-yellow schemes. Therefore, this embodiment measures the suitability of candidate colors for the theme type by calculating the correlation score between candidate colors and the theme type. Specifically, the calculation process for the correlation score can be shown in steps one through four:

[0082] Step 1: Identify the theme type of the theme image and obtain the hue range corresponding to the theme type from the preset theme type color mapping library;

[0083] Step 2: If the hue angle of the target color is within the hue angle range corresponding to the hue range on the color wheel, then the relevance score of the target color is full, and the target color is one of the candidate colors among multiple candidate colors;

[0084] Step 3: If the hue angle of the target color is not within the hue angle range on the color wheel, calculate the minimum angle difference between the hue angle of the target color and the hue angle range.

[0085] Step 4: Calculate the hue attenuation score corresponding to the minimum angle difference, and calculate the full score minus the hue attenuation score. Use the calculated result as the relevance score of the target color.

[0086] The preset theme type color mapping library can refer to a database that stores various theme types and their corresponding color ranges, which can be pre-built manually. The color wheel can refer to a circular chart arranged in an orderly manner according to the gradient of hues (i.e., the inherent appearance of colors, such as red, yellow, and blue). On this circular chart, the hue arrangement in a clockwise direction can primarily be: red, orange, yellow, green, blue, purple, and red. Of course, if the color division is more refined, each hue can be subdivided into multiple transitional colors to form a more detailed color wheel.

[0087] Each theme type corresponds to a specific angular range on the color wheel. For example, on a 24-color color wheel (360° in a circle, with each basic hue occupying 15°), the technology theme type generally corresponds to the blue-purple family. Pure blue is 210° on this color wheel, and pure purple is 270°. The blue-purple family refers to the color range transitioning from blue to purple, excluding pure blue and pure purple. Therefore, the angular range corresponding to the blue-purple family on this color wheel can be [225°, 255°]. Similarly, each candidate color also has a corresponding angle on the color wheel. For example, on a 24-color color wheel, 0° is pure red, 45° is pure orange, and 75° is orange-yellow, etc.

[0088] Therefore, this embodiment determines the relevance score between the candidate color and the theme type by comparing the angles corresponding to the candidate colors and the hue angle ranges corresponding to the theme type on the color wheel. For example... Figure 2 The color wheel shown has thick lines representing the angles of candidate colors, and gray areas representing the hue angle ranges corresponding to the theme type. If a candidate color's angle falls within this hue angle range, it means the candidate color fully meets the hue requirements of the theme type, and its relevance score to the theme type is directly full (100 points in this embodiment). If a candidate color's angle does not fall within this hue angle range, it means the candidate color does not fully meet the hue requirements of the theme type, and its hue attenuation score needs to be calculated based on the distance between the candidate color's angle and the hue angle range on the color wheel.

[0089] Specifically, when calculating the hue attenuation fraction of a candidate color, it is necessary to first determine the minimum angle difference between the angle corresponding to the candidate color and the hue angle range, and then calculate the hue attenuation fraction based on the minimum angle difference. For example... Figure 2 As shown, the hue angle range has two angular boundary values. The angle differences between the candidate color's corresponding angle and each of these two boundary values ​​are calculated clockwise, resulting in two angle differences. Similarly, the angle differences between the candidate color's corresponding angle and these two boundary values ​​are calculated counter-clockwise, resulting in two more angle differences. The minimum of these four angle differences is taken as the minimum angle difference. After determining the minimum angle difference, the hue attenuation score can be calculated as: Hue Attenuation Score = (Minimum Angle Difference / 360) × 100. The result of subtracting this hue attenuation score from the full score is the relevance score between the candidate color and the theme type.

[0090] For example, such as Figure 2 As shown, the candidate color corresponds to an angle of 30°, and the hue angle range is [90°, 180°]. From a clockwise angle, the difference between the two angles is: Distance 1 = Distance 2 = From a counter-clockwise angle: distance 3 = Distance 4= Therefore, the four angle differences are 60°, 150°, 300°, and 210°. The minimum angle difference is chosen, which is 60°. According to the calculation method for hue attenuation score, hue attenuation score = (60 / 360) × 100 ≈ 16.67. Therefore, the relevance score of this candidate color to the theme type is 100 - 16.67 = 83.33.

[0091] Of course, in another optional embodiment, when a theme type corresponds to multiple hue ranges, the relevance score between the candidate color and each hue range can be calculated in the manner described above, and finally the score with the highest score can be selected as the relevance score between the candidate color and the theme type.

[0092] In this embodiment, the relevance score between each candidate color and the theme type can be obtained in the manner described above, and the candidate color with the highest relevance score can be used as the main color.

[0093] S14. Generate at least one secondary color of the primary color according to the preset color matching rules and the primary and secondary color requirements of the page's color application scenario, and generate the accent color of the primary and secondary colors according to the preset color matching rules.

[0094] S15. Pair the accent color, the main color, and at least one secondary color of the main color to generate at least one color scheme for the page.

[0095] The preset color matching rules refer to standardized methods and guidelines for combining two or more colors based on color theory principles (such as color relationships on the color wheel, and the rules governing changes in brightness and saturation). Through scientific color combinations, visual harmony, highlighting of the theme, or conveying of specific emotions can be achieved. In this embodiment, the preset color matching rules may include rules based on the same color family, adjacent colors, and complementary colors.

[0096] Secondary colors refer to colors that complement and coordinate with the primary color, used to help define content hierarchy and enrich visual layers, and whose proportion is second only to the primary color. Accent colors refer to colors that echo or contrast with the primary and secondary colors, used to focus key information and brighten visual focal points.

[0097] Color application scenarios on a webpage can refer to specific application scenarios of colors at different levels based on the purpose or function of the page. Examples include the page's background color, ambient color, text color, and button colors. Each color application scenario can have different color requirements, including primary color requirements and primary / secondary color requirements. These color requirements can be uploaded by users to the color matching system.

[0098] For example, in scenario A (page background color), the color requirements are: "high contrast, low interference, and priority for text readability". The contrast between the background color and the text color on the page is ≥75% (in line with the accessibility standards of WCAG (Web Content Accessibility Guidelines)). The saturation of the background color is ≤35%, with no complex texture overlays, and the secondary color must maintain a low saturation difference from the primary color.

[0099] Scene B (overall ambient color of the page): Color requirements: "Theme fit, visual harmony, and priority in emotional expression". The color tone should match the theme semantics by ≥80% and be ≥70% harmonious with other candidate colors (to ensure the color matches the theme image). Secondary colors should enhance the atmosphere and layering.

[0100] Furthermore, if the selected primary color does not meet the primary color requirements of the color application scenario, a new candidate color with a higher relevance score and that meets the primary color requirements of the color application scenario is selected from multiple candidate colors as a substitute color for the primary color, and the substitute color is used as the primary color.

[0101] After determining the primary color of the page in this embodiment, secondary colors can be generated based on the primary color. Specifically, the process of generating secondary colors based on the primary color can be as follows:

[0102] Adjust the brightness or saturation of the primary color according to the same color family rule to generate multiple secondary color candidates for the primary color, or select a color adjacent to the primary color on the color wheel according to the adjacent color rule to generate multiple secondary color candidates for the primary color. From the multiple secondary color candidates, select at least one secondary color candidate that meets the primary and secondary color requirements as at least one secondary color of the primary color.

[0103] Since secondary colors need to coordinate with the primary color, and colors of the same hue or adjacent to the primary color have little difference in hue, they can coordinate with the primary color without conflict. For example, if the primary color is dark blue, a light blue can be chosen as the secondary color. Therefore, this embodiment can use either the same hue rule or the adjacent color rule to generate at least one secondary color candidate for the primary color. The secondary color generation logic for the same hue rule can be: colors belonging to the same hue as the primary color, only adjusting brightness and saturation. The secondary color generation logic for the adjacent color rule can be: colors adjacent to the primary color on the color wheel, such as cyan or bluish-purple next to blue. After obtaining multiple secondary color candidates, multiple secondary colors of the primary color can be selected from the multiple secondary color candidates according to the primary and secondary color requirements of the color application scenario (in this embodiment, the number of secondary colors is generally 2-3).

[0104] After determining the primary color and at least one secondary color of the primary color, the accent color for each primary and secondary color combination can be generated according to the complementary color rule. Since the accent color focuses key information and brightens the visual focal point, it needs to create a color contrast with the primary and secondary colors. Complementary colors are two colors that are 180° diagonally opposite each other on the color wheel, representing the strongest color contrast, such as red and green, yellow and purple, or blue and orange. Therefore, this embodiment can select the complementary color of the primary or secondary color according to the complementary color rule to generate the accent color for each primary and secondary color combination.

[0105] Therefore, we can obtain the main color, the accent color, and multiple secondary colors of the main color, and arrange and combine them to obtain multiple color schemes. Each color scheme includes at least one main color, one secondary color, and one accent color.

[0106] Of course, in another alternative embodiment, some pages can be color-coordinated using a primary color, without the need to generate secondary or accent colors.

[0107] To ensure the feasibility of the color scheme, this embodiment can also verify multiple generated color schemes. Specifically, this embodiment can use a pre-trained color scheme evaluation model to score the visual harmony of each color scheme. If the visual harmony score of the target color scheme is less than a threshold, the secondary and accent colors in the target color scheme are adjusted until the visual harmony score of the target color scheme is not less than the threshold. If the visual harmony score of the target color scheme is not less than the threshold, it can be used as a feasible color scheme for the page.

[0108] The target color scheme is one of at least one color scheme options. This pre-trained color evaluation model primarily scores the matching degree between the primary color, secondary color, and accent color in terms of hue, brightness, saturation, and page space ratio. Specifically, the matching degree can be divided into: the matching degree between the primary color and the secondary color, and the matching degree between the primary color and the accent color.

[0109] Specifically, such as Figure 3 As shown, when the visual harmony score of the target color scheme is less than the threshold, the specific adjustment process for the secondary and accent colors in the color scheme can be as follows:

[0110] S30. Adjust the hue of the secondary color in the target color scheme to obtain the first secondary color. Generate the primary color and the first accent color of the first secondary color according to the preset color scheme rules to obtain the adjusted target color scheme.

[0111] S31. Determine whether the visual coordination score of the adjusted target color scheme is less than the threshold. If it is not less than the threshold, proceed to step S32; if it is less than the threshold, proceed to step S33.

[0112] S32. Stop adjusting and output the adjusted target color scheme;

[0113] S33. Adjust the saturation of the first secondary color in the adjusted target color scheme to obtain the second secondary color. Generate the second accent color of the primary color and the second secondary color according to the preset color scheme rules to obtain the color scheme after the second adjustment.

[0114] S34. Determine whether the visual coordination score of the color scheme after the second adjustment is less than the threshold. If it is not less than the threshold, proceed to step S35. If it is less than the threshold, proceed to step S36.

[0115] S35. Stop adjusting and output the color scheme after the second adjustment.

[0116] S36. Determine the relationship between the number of iterations and the iteration threshold; if the number of iterations is less than the iteration threshold, proceed to step S37; if the number of iterations is not less than the iteration threshold, proceed to step S38.

[0117] S37. Use the adjusted color scheme as the target color scheme and return to step S30.

[0118] S38. Stop adjusting, select the third secondary color of the primary color from multiple candidate colors, generate the third accent color of the primary color and the third secondary color according to the preset color matching rules, and output a color scheme containing the primary color, the third secondary color and the third accent color.

[0119] In this embodiment, when adjusting the secondary and accent colors, the hue and saturation of the secondary color are adjusted sequentially. After each adjustment of the hue or saturation of the secondary color, a corresponding accent color is generated. The score of the color scheme is then determined. If the score is not less than a threshold, the color scheme adjustment is complete and can be directly output. Otherwise, the secondary color adjustment continues in the manner of first adjusting the hue and then the saturation, until the number of iterations is not less than the iteration threshold. If the score of the color scheme is still less than the threshold, the secondary color of the primary color can be directly selected from the candidate colors according to the adjacent color rule to generate the accent color, and the final color scheme is output. The magnitude of a single adjustment should not be too large to avoid conflicts between the secondary and primary colors. The magnitude of a single adjustment (including hue and saturation adjustment) can be ±10%. Furthermore, the adjusted secondary color still needs to meet the primary and secondary color requirements of the color application scenario.

[0120] Furthermore, the color matching system in this embodiment supports a real-time API. Users can input parameters such as theme images, image slicing parameters, and color scheme scenarios into the system, which will then output at least one recommended color scheme. Alternatively, users can input batches of theme images, and the system can output a batch color selection report, including recommended color schemes for each theme image. The real-time API refers to an application programming interface that enables low-latency, bidirectional data synchronization between the client and server. Data updates do not require active polling by the client; the server can proactively push the latest data, thus meeting the needs of business scenarios with extremely high timeliness requirements.

[0121] This application provides a method for generating a page color scheme. The method extracts multiple different colors from the page's theme image, obtains the area proportion of each extracted color in the theme image, and acquires the color features of each extracted color. It calculates the color feature score for each color and filters multiple candidate colors from the multiple different colors based on the area proportion and color feature score. Utilizing the correlation between the candidate colors and the theme type of the theme image, it selects one candidate color as the primary color. After determining the primary color, it generates at least one secondary color according to preset color matching rules and the primary and secondary color requirements of the page's color application scenario. It also generates accent colors for the primary and secondary colors according to preset color matching rules. Finally, it pairs the accent colors, primary color, and at least one secondary color of the primary color to generate at least one color scheme for the page. This method selects the page's primary color from the colors extracted from the theme image and generates secondary and accent colors based on the determined primary color, automatically generating at least one color scheme for the page. The automatically generated color scheme not only ensures the adaptation of the page's primary color to the theme image but also effectively guarantees the coordination of colors on the page, effectively improving the efficiency of page color matching.

[0122] The above describes a method for generating a page color scheme according to an embodiment of this application. The following describes a system for executing the above method for generating a page color scheme.

[0123] Please see Figure 4 , Figure 4 This is a schematic diagram of a color scheme generation system provided in an embodiment of this application. Figure 4 As shown, the color scheme generation system may include:

[0124] Extraction unit 100 is used to extract multiple different colors from the theme image of the page;

[0125] The processing unit 110 is used to obtain the area proportion of each extracted color in the theme map, and to obtain the color features of each extracted color and calculate the color feature score of each color.

[0126] Scoring unit 120 is used to weight the area proportion and color feature score of each color to obtain the total score of each color. Based on the total score, multiple candidate colors are selected from multiple colors, and the total score of each candidate color is greater than the total score of other colors.

[0127] The calculation unit 130 is used to calculate the correlation score between each candidate color and the theme type of the theme image, and to select the candidate color with the highest correlation score as the main color.

[0128] Color matching unit 140 is used to generate at least one secondary color of the main color according to the preset color matching rules and the main and secondary color requirements of the color application scenario of the page, and to generate the accent color of the main color and secondary color according to the preset color matching rules.

[0129] The generation unit 150 is used to pair the accent color, the main color, and at least one secondary color of the main color to generate at least one color scheme for the page.

[0130] In one possible implementation, the color scheme generation system may further include a verification unit, which may be specifically configured as follows:

[0131] The visual harmony score of each color scheme is scored using a pre-trained color scheme evaluation model. If the visual harmony score of the target color scheme is less than the threshold, the secondary and accent colors in the target color scheme are adjusted until the visual harmony score of the target color scheme is not less than the threshold. The target color scheme is one of at least one color scheme.

[0132] In one possible implementation, adjusting the secondary and accent colors in the target color scheme within the verification unit can be specifically configured as follows:

[0133] Adjust the hue of the secondary color in the target color scheme to obtain the first secondary color, and generate the primary color and the first accent color of the first secondary color according to the preset color scheme rules to obtain the adjusted target color scheme.

[0134] Determine whether the visual harmony score of the adjusted target color scheme is less than the threshold. If not, stop the adjustment and output the adjusted target color scheme. If yes, adjust the saturation of the first secondary color in the adjusted target color scheme to obtain the second secondary color. Generate the second accent color of the primary color and the second secondary color according to the preset color matching rules to obtain the second adjusted color scheme.

[0135] Determine whether the visual harmony score of the color scheme after the second adjustment is less than the threshold. If not, stop the adjustment and output the color scheme after the second adjustment. If yes, determine the relationship between the number of iterations and the iteration threshold.

[0136] If the number of iterations is less than the iteration threshold, the color scheme after the second adjustment will be used as the target color scheme, and the process will return to the step of adjusting the hue of the secondary colors in the target color scheme.

[0137] If the number of iterations is not less than the iteration threshold, the adjustment is stopped, the third secondary color of the primary color is selected from multiple candidate colors, the third accent color of the primary color and the third secondary color is generated according to the preset color matching rules, and the color scheme containing the primary color, the third secondary color and the third accent color is output.

[0138] In one possible implementation, the computation unit 130 calculates a relevance score between each candidate color and the theme type of the theme image, which can be specifically configured as follows:

[0139] Identify the theme type of the theme image and obtain the hue range corresponding to the theme type from the preset theme type-color mapping library;

[0140] If the hue angle of the target color is within the hue angle range corresponding to the hue range on the color wheel, then the relevance score of the target color is full, and the target color is one of the candidate colors among multiple candidate colors;

[0141] If the hue angle of the target color is not within the hue angle range on the color wheel, then calculate the minimum angle difference between the hue angle of the target color and the hue angle range.

[0142] Calculate the hue attenuation score corresponding to the minimum angular difference, and calculate the full score minus the hue attenuation score. Use the calculated result as the relevance score of the target color.

[0143] In one possible implementation, the computing unit 130 can also be specifically configured as follows:

[0144] If the primary color does not meet the requirements of the color application scenario, a replacement color for the primary color will be selected from multiple candidate colors and used as the primary color.

[0145] In one possible implementation, the preset color scheme rules may include a monochromatic rule or an adjacent color rule;

[0146] Color matching unit 140 generates at least one secondary color of the primary color according to preset color matching rules and the primary and secondary color requirements of the page's color application scenario. Specifically, it can be configured as follows:

[0147] Adjust the brightness or saturation of the primary color according to the same color family rule to generate multiple secondary color candidates for the primary color, or select a color adjacent to the primary color on the color wheel according to the adjacent color rule to generate multiple secondary color candidates for the primary color; from the multiple secondary color candidates, select at least one secondary color candidate that meets the primary and secondary color requirements as at least one secondary color of the primary color.

[0148] In one possible implementation, the extraction unit 100 extracts multiple different colors from the page's theme image, which can be specifically configured as follows:

[0149] Analyze the theme image to determine the colors contained in the theme image, as well as the saturation, contrast, and brightness of each color; determine whether the saturation, contrast, and brightness of each color meet the corresponding thresholds; extract the colors that meet at least two thresholds to obtain multiple different colors extracted from the theme image.

[0150] This application also provides an electronic device in its embodiments. (See reference...) Figure 5 The diagram illustrates a structural schematic suitable for implementing the electronic device in the embodiments of this application. The electronic device in the embodiments of this application may include, but is not limited to, fixed terminals such as mobile phones, laptops, PDAs (personal digital assistants), PADs (tablet computers), desktop computers, etc. Figure 5 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0151] like Figure 5 As shown, the electronic device may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 501, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 502 or a program loaded from a storage device 508 into a random access memory (RAM) 503. When the electronic device is powered on, the RAM 503 also stores various programs and data required for the operation of the electronic device. The processing unit 501, ROM 502, and RAM 503 are interconnected via a bus 504. An input / output interface (I / O interface) 505 is also connected to the bus 504.

[0152] Typically, the following devices can be connected to I / O interface 505: input devices 506 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 507 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 508 including, for example, memory cards, hard drives, etc.; and communication devices 509. Communication device 509 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 5 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown. More or fewer devices may be implemented or have alternatively.

[0153] This application also provides a computer program product including computer-readable instructions, which, when executed on an electronic device, cause the electronic device to implement any of the page color scheme generation methods provided in this application.

[0154] This application also provides a computer-readable storage medium that carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can implement any of the page color scheme generation methods provided in this application.

[0155] It should also be noted that the system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. In addition, in the system embodiment drawings provided in this application, the connection relationship between modules indicates that they have a communication connection, which can be implemented as one or more communication buses or signal lines.

[0156] Through the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus necessary general-purpose hardware, or it can be implemented by special-purpose hardware including application-specific integrated circuits, special-purpose CPUs, special-purpose memory, special-purpose components, etc. Generally, any function performed by a computer program can be easily implemented by corresponding hardware, and the specific hardware structure used to implement the same function can also be diverse, such as analog circuits, digital circuits, or special-purpose circuits. However, for this application, software program implementation is more often the preferred implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a readable storage medium, such as a computer floppy disk, USB flash drive, mobile hard disk, ROM, RAM, magnetic disk, or optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, training equipment, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0157] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product.

[0158] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from one website, computer, training device, or data center to another website, computer, training device, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a training device or data center that integrates one or more available media. The available media may be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., DVDs), or semiconductor media (e.g., solid-state drives (SSDs)).

[0159] The various embodiments in this specification are described in a related manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the apparatus embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0160] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0161] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A method for generating a page color scheme, characterized in that, The method for generating the color scheme of the page includes: Extract multiple different colors from the page's theme image; Obtain the region percentage of each extracted color in the theme map, and obtain the color features of each extracted color, and calculate the color feature score for each color; The region proportion and color feature score of each color are weighted and scored to obtain the total score of each color. Multiple candidate colors are selected from multiple colors based on the total score, and the total score of each candidate color is greater than the total score of other colors. Calculate the relevance score between each candidate color and the theme type of the theme image, and select the candidate color with the highest relevance score as the main color; According to the preset color matching rules and the primary and secondary color requirements of the color application scenario of the page, at least one secondary color of the primary color is generated, and the accent color of the primary color and the secondary color is generated according to the preset color matching rules. The accent color, the main color, and at least one secondary color of the main color are paired to generate at least one color scheme for the page.

2. The method for generating a page color scheme according to claim 1, characterized in that, Also includes: A pre-trained color matching evaluation model is used to score the visual harmony of each color scheme. If the visual harmony score of the target color scheme is less than the threshold, the secondary and accent colors in the target color scheme are adjusted until the visual harmony score of the target color scheme is not less than the threshold. The target color scheme is one of the at least one color schemes.

3. The method for generating a page color scheme according to claim 2, characterized in that, The adjustment of the secondary and accent colors in the target color scheme includes: Adjust the hue of the secondary color in the target color scheme to obtain the first secondary color, and generate the first accent color of the primary color and the first secondary color according to the preset color scheme rules to obtain the adjusted target color scheme. Determine whether the visual harmony score of the adjusted target color scheme is less than the threshold. If not, stop the adjustment and output the adjusted target color scheme. If yes, adjust the saturation of the first secondary color in the adjusted target color scheme to obtain the second secondary color. Generate the second accent color of the primary color and the second secondary color according to the preset color matching rules to obtain the color scheme after the second adjustment. Determine whether the visual harmony score of the second-adjusted color scheme is less than the threshold. If not, stop the adjustment and output the second-adjusted color scheme. If yes, determine the relationship between the number of iterations and the iteration threshold. If the number of iterations is less than the iteration threshold, then the color scheme after the second adjustment is taken as the target color scheme, and the process returns to the step of adjusting the hue of the secondary colors in the target color scheme. If the number of iterations is not less than the iteration threshold, the adjustment is stopped, the third secondary color of the primary color is selected from the multiple candidate colors, the third accent color of the primary color and the third secondary color is generated according to the preset color matching rules, and the color scheme containing the primary color, the third secondary color and the third accent color is output.

4. The method for generating a page color scheme according to claim 1, characterized in that, The calculation of the relevance score between each candidate color and the theme type of the theme image includes: Identify the theme type of the theme image and obtain the hue range corresponding to the theme type from a preset theme type-color mapping library; If the hue angle of the target color is within the hue angle range corresponding to the hue range on the color wheel, then the relevance score of the target color is full, and the target color is one of the candidate colors among multiple candidate colors; If the hue angle of the target color is not within the hue angle range on the color wheel, then calculate the minimum angle difference between the hue angle of the target color and the hue angle range. Calculate the hue attenuation score corresponding to the minimum angle difference, and calculate the full score minus the hue attenuation score. Use the calculated result as the relevance score of the target color.

5. The method for generating a page color scheme according to claim 1, characterized in that, Also includes: If the primary color does not meet the primary color requirements of the color application scenario, then a replacement color for the primary color is selected from multiple candidate colors, and the replacement color is used as the primary color.

6. The method for generating a page color scheme according to claim 1, characterized in that, The preset color matching rules include rules based on the same color family or rules based on adjacent colors; The step of generating at least one secondary color of the primary color according to preset color matching rules and the primary and secondary color requirements of the color application scenario of the page includes: Adjust the brightness or saturation of the main color according to the same color system rule to generate multiple secondary color candidates for the main color, or select a color adjacent to the main color on the color wheel according to the adjacent color rule to generate multiple secondary color candidates for the main color; From the plurality of secondary color candidates, at least one secondary color candidate that satisfies the primary and secondary color requirements shall be used as at least one secondary color of the primary color.

7. The method for generating a page color scheme according to claim 1, characterized in that, The extraction of multiple different colors from the page's theme image includes: Analyze the theme image to determine the colors contained in the theme image, as well as the saturation, contrast, and brightness of each color; Determine whether the saturation, contrast, and brightness of each color meet the corresponding thresholds; Colors that meet at least two thresholds are extracted to obtain multiple different colors extracted from the theme image.

8. A color scheme generation system for web pages, characterized in that, The method for generating the color scheme of the page includes: The extraction unit is used to extract multiple different colors from the page's theme image; The processing unit is used to obtain the area proportion of each extracted color in the theme map, and to obtain the color features of each extracted color and calculate the color feature score of each color. The scoring unit is used to perform a weighted scoring on the region proportion and color feature score of each color to obtain the total score of each color, and to filter out multiple candidate colors from multiple colors based on the total score, wherein the total score of each candidate color is greater than the total score of other colors. A calculation unit is used to calculate the correlation score between each candidate color and the theme type of the theme image, and to select the candidate color with the highest correlation score as the main color. The color matching unit is used to generate at least one secondary color of the primary color according to the preset color matching rules and the primary and secondary color requirements of the color application scenario of the page, and to generate the accent color of the primary color and the secondary color according to the preset color matching rules. The generation unit is used to pair the accent color, the main color, and at least one secondary color of the main color to generate at least one color scheme for the page.

9. An electronic device, characterized in that, It includes at least one processor and a memory connected to the processor, wherein: The memory is used to store computer programs; The processor is used to execute the computer program to enable the electronic device to implement the page color scheme generation method as described in any one of claims 1 to 7.

10. A computer program product, characterized in that, It includes computer-readable instructions that, when executed on an electronic device, cause the electronic device to implement the page color scheme generation method as described in any one of claims 1 to 7.

Images