Website color matching method, device, equipment and computer program product

Abstract

The invention provides a website color matching method and device, equipment and a computer program product. The method comprises the steps that a website theme color and a website auxiliary color of a website and the positions of one or more to-be-filled areas in the website are obtained; according to the RGB values of the website theme color and the website auxiliary color, the RGB values of one or more to-be-filled areas are determined; and according to the RGB value of the to-be-filled area and the position of the to-be-filled area, one or more to-be-filled areas are filled with colors. According to the embodiment of the invention, the color of each to-be-filled area can be automatically given according to the website theme color and the website auxiliary color, so that the website color matching efficiency is remarkably improved. Besides, on the basis of the website theme color, supplement and embellishment of the website auxiliary color are added, the layering sense and visual impact of the website can be increased on the basis that the overall style is kept uniform, and the overall attractiveness and coordination of the website are improved.

Description

Technical Field

[0001] The present application belongs to the technical field of website creation, and in particular, relates to a website color matching method, device, equipment and computer program product. Background Art

[0002] In the current Internet design field, website color matching is one of the key factors to improve user experience and brand image, and its importance is self-evident. In the past, website color matching needed to be carefully matched by professional art designers based on multiple factors such as color theory, brand tone and user psychology to ensure the harmony and attractiveness of the overall visual effect of the website.

[0003] However, most existing website color schemes rely on manual adjustment or preset templates. Manual adjustment requires website configuration personnel to have high color matching ability, and manual adjustment makes color matching efficiency low. Preset template color matching replaces the entire web page background with the template color, which limits the flexibility and personalization of website design. For website configuration personnel, how to quickly and effectively complete website color matching while improving the overall beauty and coordination of the website has become an urgent problem to be solved. Summary of the invention

[0004] The embodiments of the present application provide a website color matching method, device, equipment and computer program product, which can solve the problem that it is difficult for website configuration personnel to quickly and effectively complete website color matching while improving the overall aesthetics and coordination of the website.

[0005] In a first aspect, an embodiment of the present application provides a website color matching method, comprising:

[0006] Obtaining a website theme color and a website auxiliary color and a location of one or more areas to be filled in the website;

[0007] Determine RGB values ​​of one or more areas to be filled according to the RGB values ​​of the website theme color and the website auxiliary color;

[0008] Fill one or more areas to be filled with a color according to the RGB value of the area to be filled and the position of the area to be filled.

[0009] In a possible implementation manner of the first aspect, determining RGB values ​​of one or more to-be-filled areas according to RGB values ​​of the website theme color and the website auxiliary color includes:

[0010] Convert the RGB value of the website theme color and the RGB value of the website auxiliary color into HSV values ​​respectively;

[0011] Determine the HSV value of one or more areas to be filled according to the HSV value of the website theme color and the HSV value of the website auxiliary color;

[0012] Convert the HSV value of the area to be filled into RGB value.

[0013] In a possible implementation manner of the first aspect, determining the HSV value of one or more areas to be filled according to the HSV value of the website theme color and the HSV value of the website auxiliary color includes:

[0014] According to a preset formula between the HSV value of the website theme color, the HSV value of the website auxiliary color and the HSV value of the area to be filled, and the HSV values ​​of the website theme color and the website auxiliary color, the HSV value of one or more areas to be filled is determined; wherein different areas to be filled correspond to the same or different preset formulas.

[0015] In a possible implementation manner of the first aspect, the method further includes:

[0016] Obtain website samples and company LOGO images corresponding to the website samples;

[0017] According to the LOGO image, determine the RGB value of the website theme color and the RGB value of the website auxiliary color corresponding to the website sample;

[0018] Determine, according to the website sample, the RGB value of the fill area in the website sample;

[0019] Convert the RGB value of the website theme color and the RGB value of the website auxiliary color corresponding to the website sample and the RGB value of the filled area in the website sample into HSV values;

[0020] Determine the color distance between the HSV value of the filled area in the website sample and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample according to the HSV value of the website theme color and the HSV value of the website auxiliary color corresponding to the website sample and the HSV value of the filled area in the website sample;

[0021] The preset formula is determined according to the color distance between the HSV value of the filled area in the website sample and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample.

[0022] In a possible implementation of the first aspect, obtaining RGB values ​​of a website theme color and a website auxiliary color of a website includes:

[0023] receiving a first picture;

[0024] Extracting the color of each pixel in the first picture;

[0025] Classifying the pixels of the same color into one category;

[0026] Determine the color corresponding to the pixel point of the largest category as the website theme color;

[0027] The color corresponding to the second largest type of pixel points is determined as the website auxiliary color.

[0028] In a possible implementation manner of the first aspect, after classifying the pixels of the same color into one category, the method further includes:

[0029] Sort the pixel points of each category from large to small according to the number to obtain a first array;

[0030] Convert the RGB value corresponding to each type of pixel into an HSV value;

[0031] In the case of retaining the pixel points of the largest category, deleting approximate colors from the first array, wherein the approximate colors are colors within a positive or negative first threshold value of the H value of the HSV values ​​of the pixel points of the largest category;

[0032] If the second largest type of pixel points does not exist in the first array, determining the website auxiliary color according to the website theme color;

[0033] If there is a second largest number of the pixel points of the type in the first array, the step of determining the color corresponding to the second largest number of the pixel points of the type as the website auxiliary color is performed.

[0034] In a possible implementation of the first aspect, obtaining a website theme color and a website auxiliary color of the website includes:

[0035] The website theme color and the website auxiliary color input in the first interface using the RGB color model are received, and the RGB value of the website theme color and the RGB value of the website auxiliary color are obtained.

[0036] In a possible implementation manner of the first aspect, obtaining the location of one or more to-be-filled areas in the website includes:

[0037] Obtaining a web page layout template, wherein the web page layout template is used to construct a web page framework;

[0038] According to the web page layout template, the position of one or more areas to be filled is determined; the one or more areas to be filled are one or more of the title area, table area, map area, web page background area, tab area, button area, calendar area, advertising column area, and input box area.

[0039] In a second aspect, an embodiment of the present application provides a website color matching device, including:

[0040] An acquisition module, used to acquire a website theme color and a website auxiliary color and a position of one or more areas to be filled in the website;

[0041] A determination module, used to determine RGB values ​​of one or more areas to be filled according to the RGB values ​​of the website theme color and the website auxiliary color;

[0042] The filling module is used to fill the color of one or more areas to be filled according to the RGB values ​​of the areas to be filled and the positions of the areas to be filled.

[0043] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements a method as described in any one of the first aspects when executing the computer program.

[0044] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method as described in any one of the first aspects is implemented.

[0045] In a fifth aspect, an embodiment of the present application provides a computer program product. When the computer program product is run on an electronic device, the electronic device executes any one of the methods described in the first aspect.

[0046] It can be understood that the beneficial effects of the second to fifth aspects mentioned above can be found in the relevant description of the first aspect mentioned above, and will not be repeated here.

[0047] Compared with the prior art, the embodiments of the present application have the following beneficial effects: the embodiments of the present application can automatically give the color of each area to be filled according to the website theme color and the website auxiliary color, so that the website color matching can be completed without the need for website configuration personnel to have high color matching ability, which significantly improves the efficiency of website color matching. In addition, adding the website auxiliary color to supplement and embellish the website theme color can increase the website's layering and visual impact while maintaining the overall style unity, and enhance the overall beauty and coordination of the website. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0049] Figure 1 It is a flowchart of a website color matching method provided by an embodiment of the present application;

[0050] Figure 2 is a schematic diagram of a first interface provided by an embodiment of the present application;

[0051] Figure 3 is a flowchart of a website color matching method provided by another embodiment of the present application;

[0052] Figure 4 is a flowchart of a website color matching method provided by another embodiment of the present application;

[0053] Figure 5 is a flowchart of a website color matching method provided by another embodiment of the present application;

[0054] Figure 6 is a flowchart of a website color matching method provided by another embodiment of the present application;

[0055] Figure 7 It is a structural block diagram of a website color matching device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0056] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0057] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, wholes, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components and / or combinations thereof.

[0058] It should also be understood that the term “and / or” used in the specification and appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

[0059] As used in the specification and appended claims of this application, the term "if" can be interpreted as "when" or "uponce" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "uponce it is determined" or "in response to determining" or "uponce [described condition or event] is detected" or "in response to detecting [described condition or event]", depending on the context.

[0060] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0061] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0062] Glossary:

[0063] The RGB (Red, Green, Blue) color model is an additive color model that generates various colors by combining different intensities of red (R), green (G), and blue (B). In this model, the intensity of each color component (red, green, and blue) can be represented by an integer between 0 and 255, where 0 means that the color component does not exist at all and 255 means that the color component reaches the strongest.

[0064] The HSV (Hue, Saturation, Value) color model is divided into three parts: Hue, Saturation, and Value. Hue: Indicates the type of color, such as red, yellow, green, etc. In the HSV model, the hue is represented by an angle ranging from 0° to 360°, where 0° and 360° both represent red, and other colors are arranged in spectral order. Saturation: Indicates the vividness of the color. The higher the saturation, the brighter the color; the lower the saturation, the closer the color is to gray. In the HSV model, saturation is expressed as a percentage, ranging from 0% (completely unsaturated, i.e. gray) to 100% (fully saturated). Value: Also known as brightness or lightness, it indicates the brightness of the color. The higher the brightness, the brighter the color; the lower the brightness, the darker the color. In the HSV model, brightness is also expressed as a percentage, ranging from 0% (black) to 100% (white).

[0065] Figure 1 The schematic flow chart of the website color matching method provided in the embodiment of the present application is shown. As an example but not a limitation, the method can be applied to an electronic device with a display screen, which can be a mobile phone, a computer, a tablet, a wearable device, etc. The website color matching method specifically includes the following steps:

[0066] S100: Acquire the website theme color and the website auxiliary color of the website and the position of one or more areas to be filled in the website.

[0067] The website theme color is the main color of the web page. It occupies a large area of ​​the web page, such as the background color of the web page or the background color of the main module. The website theme color is the central color of the color scheme, which can immediately attract the user's attention and convey the overall style and brand image of the website. Different companies will choose their own website theme colors based on their corporate culture and other factors.

[0068] Auxiliary colors of a website refer to the colors used in a relatively small area of ​​a page. They are used to set off the theme color and enrich the color hierarchy of the web page and enhance the visual effect. Auxiliary colors can be used for small-scale elements such as table background colors, image background colors, and input box colors.

[0069] At present, it is difficult for a website to meet the complex and ever-changing website design needs by relying solely on a single website theme color. The introduction of website auxiliary colors, as a supplement and embellishment of the website theme color, can increase the website's sense of hierarchy and visual impact while maintaining the overall style unity.

[0070] A website usually has one or more web pages. Depending on the function and purpose, the web page includes multiple modules, such as the title module in the homepage of the website, the table module for displaying data, the map module, the web page background module, the tab module, the button module, the calendar module, the advertisement module, the input box module, etc. The area where the above modules are located is the area to be filled. Corresponding to the above modules, the area to be filled is the title area, the table area (including the header area and the body area), the map area, the web page background area, the tab area, the button area, the calendar area, the advertisement column area, the input box area, etc. By filling the area to be filled with color, the title background color, the table background color (including the header background color and the body background color), the map background color, the web page background color, the tab background color (including the background color when the tab is not selected and the background color when the tab is selected), the button color, the calendar background color, the advertisement column background color, the input box color, etc. are formed. By filling the areas to be filled with colors respectively, the color level of the web page can be enriched and the visual effect can be enhanced.

[0071] S200: Determine RGB values ​​of one or more areas to be filled according to RGB values ​​of the website theme color and the website auxiliary color.

[0072] Many colors can be generated through the website theme color and website auxiliary color, and then a color is determined for each area to be filled.

[0073] S300: filling one or more areas to be filled with colors according to the RGB values ​​of the areas to be filled and the positions of the areas to be filled.

[0074] For many companies, website configuration personnel are often not professional art designers. They may only have a certain understanding of the company's main color, but when faced with the color matching requirements of many different locations on the website, they often feel powerless. The embodiment of the present application can automatically give the color of each area to be filled according to the website theme color and the website auxiliary color, so that the website configuration personnel do not need to have a high color matching ability to complete the website's color matching, which significantly improves the efficiency of website color matching. In addition, adding the website's auxiliary color to supplement and embellish the website's theme color can increase the website's sense of hierarchy and visual impact while maintaining the overall style unity, thereby enhancing the overall beauty and coordination of the website.

[0075] As an optional implementation of the present application, obtaining the website theme color and the website auxiliary color of the website in S100 can be achieved by S110:

[0076] S110: receiving the website theme color and the website auxiliary color input in the first interface in the RGB color model, and obtaining the RGB value of the website theme color and the RGB value of the website auxiliary color.

[0077] In this embodiment, when selecting the website theme color and the website auxiliary color, the website configuration personnel select the RGB value of the website theme color and the RGB value of the website auxiliary color through the RGB color model. This is because the RGB color model defines colors by adjusting the intensity of the three basic colors of red, green and blue. This method is more intuitive and easy to use for website configuration personnel. The website configuration personnel can obtain the desired color by adjusting the values ​​of these three color channels. Therefore, the use of the RGB color model is more intuitive and easier for website configuration personnel to understand.

[0078] Figure 2 A schematic diagram of the first interface is shown, in which several theme color templates are provided (for example, Geek Blue, Coral Blue, Autumn Gold, Vibrant Orange, etc.). If the theme color template does not have the color you want to choose, the website configurator can customize the website theme color. There are several colors of different shades in the theme color template. The auxiliary color can be a lighter color in the theme color template by default. In addition, the website configurator can also select the website's auxiliary color from the customization. The area to be filled can be selected by default to follow the website's auxiliary color, so that the color of the area to be filled does not need to be set one by one by the website configurator. If the website configurator is not satisfied with the color of one or all of the areas to be filled, he or she can customize the color of the area to be filled (i.e. Figure 2 The above custom colors are all in RGB color model.

[0079] See also Figure 3 As another optional implementation of the present application, obtaining the RGB values ​​of the website theme color and the website auxiliary color of the website in S100 can be implemented through S120-S160:

[0080] S120: Receive a first picture.

[0081] Optionally, the first image is a corporate LOGO image (trademark), which often contains the corporate theme color and auxiliary color. Optionally, the first image is a transparent background image, such as a PNG format image, a TIFF format image, etc. The first image is a transparent background image to avoid determining a large area of ​​the substrate color as the website theme color.

[0082] S130: Extract the color of each pixel in the first image.

[0083] Optionally, the color of the pixel is an RGB value.

[0084] S140: Classify pixels of the same color into one category.

[0085] Pixels with the same values ​​in the three color channels of red, green, and blue are pixels of the same color.

[0086] S150: Determine the color corresponding to the type of pixel with the largest number as the website theme color, thereby obtaining the RGB value of the website theme color.

[0087] S160: Determine the color corresponding to the second largest type of pixel points as the website auxiliary color, thereby obtaining the RGB value of the website auxiliary color.

[0088] If the theme color template does not contain the color that the website configuration personnel want to choose (i.e., the website theme color or the website auxiliary color), and the website configuration personnel are prone to deviation when selecting the website theme color from the customization, in this case, the website configuration personnel can upload the company's LOGO picture to the electronic device, and the electronic device extracts the RGB value of each pixel in the first picture, and then determines the color corresponding to the largest number of pixels as the website theme color, and the color corresponding to the second largest number of pixels as the website auxiliary color. For example, there are two colors, dark blue and light blue, on the company's LOGO picture, of which the dark blue occupies a larger area (i.e., there are more dark blue pixels), and the light blue occupies a smaller area (i.e., there are fewer light blue pixels), then the dark blue will be determined as the website theme color, and the light blue will be determined as the website auxiliary color.

[0089] Therefore, in this embodiment, the website configuration personnel do not need to select the website theme color and the website auxiliary color. The website theme color and the website auxiliary color can be determined by uploading a picture, which saves the website configuration personnel the trouble of selecting the website theme color and the website auxiliary color from the customization.

[0090] Considering that some corporate LOGO images are gradient colors, the distance between the website theme color and the website auxiliary color determined by S120-S160 may be too small (i.e., the colors are relatively close). If the color corresponding to the second largest type of pixel points is determined as the website auxiliary color according to S160, and then the area to be filled is determined based on the website theme color and the website auxiliary color, the color of the area to be filled will be too monotonous, lacking in layering and visual impact. Based on this, see Figure 4 , after S140: classifying pixels of the same color into one category, the embodiment of the present application further includes S141-S145:

[0091] S141: Sort the pixel points of each category from large to small according to the number to obtain a first array.

[0092] For example, the most common type of pixel in the first array is 8000, the second most common type of pixel is 7000, the third most common type of pixel is 5000, and so on, and all pixels with the same color are counted. It should be noted that the color of each pixel in the first array is RGB value.

[0093] S142: Convert the RGB value corresponding to each type of pixel into an HSV value.

[0094] Since the RGB color model is a superposition of red (R), green (G), and blue (B) to generate various colors, it is relatively complicated to directly perform color similarity judgment on the RGB color model. In this embodiment, the RGB value is converted into an HSV value, and the hue H in the HSV value can directly indicate the type of color and the degree of similarity.

[0095] S143: while retaining the largest number of pixels, delete approximate colors from the first array; wherein the approximate colors are colors whose H values ​​in the HSV values ​​of the largest number of pixels are within a first threshold.

[0096] In the case where the LOGO image is a gradient color, there are many categories in the first array, and the color distance between two adjacent categories in the first array is also relatively small. Therefore, the colors within the first threshold of the hue H in the HSV value of the largest number of pixels are determined as approximate colors, and then the approximate colors are deleted from the first array while retaining the largest number of pixels. The colors close to the theme color of the web page can be eliminated. After elimination, the second largest category of pixels in the first array has a certain distance from the theme color of the web page. The first threshold can be flexibly selected according to the situation of the approximate colors counted in the first array. For example, the first threshold can be selected as 10 degrees.

[0097] After deleting the similar colors from the first array, two situations may occur: one is that the second largest type of pixel points exist in the first array, and the other is that the second largest type of pixel points do not exist in the first array.

[0098] S144: If the second largest type of pixel does not exist in the first array, determine the website auxiliary color according to the website theme color, and obtain the RGB value of the website auxiliary color.

[0099] S145: If there is a second largest number of pixels of the first type in the first array, execute step S160 to determine the color corresponding to the second largest number of pixels of the first type as the website auxiliary color, and obtain the RGB value of the website auxiliary color.

[0100] This embodiment is not only applicable to LOGO pictures with obvious color differences between each color, but also applicable to LOGO pictures with gradient colors.

[0101] As an optional implementation of the present application, obtaining the location of one or more to-be-filled areas in the website in S100 may be implemented through S170-S180:

[0102] S170: Obtain a web page layout template, where the web page layout template is used to construct a web page framework.

[0103] Optionally, the present embodiment is designed with multiple web page layout templates, which include multiple areas to be filled in. Website configuration personnel can select a suitable web page layout template as the overall framework of their own company's website, and then fill in the corresponding company information and color in each area to be filled in, thereby forming the company's website.

[0104] S180: Determine the position of one or more areas to be filled according to the webpage layout template.

[0105] Since the positions of the various areas to be filled in the webpage layout template are known, the position of each area to be filled can be determined according to the webpage layout template.

[0106] See also Figure 5 As an optional implementation of the present application, in S200, according to the RGB values ​​of the website theme color and the website auxiliary color, the RGB values ​​of one or more areas to be filled are determined, which can be implemented by S210-S230:

[0107] S210: Convert the RGB value of the website theme color and the RGB value of the website auxiliary color into HSV values.

[0108] Although the RGB color model is intuitive for website configuration personnel, it is not convenient for programs to use. Programs need to deal with specific values ​​and logic, and the color changes in the RGB model are not intuitive enough to directly reflect the effects that website configuration personnel want. The HSV model decomposes color into three dimensions: hue, saturation, and brightness, so that brightness and color information can be separated. This makes it easier and more intuitive for programs to adjust brightness or color separately. Therefore, it is necessary to convert the RGB value of the website theme color and the RGB value of the website auxiliary color into HSV values.

[0109] The conversion of RGB values ​​to HSV values ​​can be done as follows:

[0110] (1) Divide the RGB value by 255 to convert the value of each color channel into a decimal between 0 and 1. Assuming the RGB value is (R, G, B), then R = R / 255; G = G / 255; B = B / 255.

[0111] (2) After converting the values ​​of each color channel to between 0 and 1, calculate the maximum and minimum values ​​of R, G, and B, that is, max = max(R, G, B); min = min(R, G, B).

[0112] (3) Calculate the saturation S: If max and min are equal, the color is gray and the saturation is 0.

[0113] Otherwise, the saturation S is calculated by the following formula: S = (max-min) / max, which is between 0 and 1.

[0114] (4) Calculation of hue H: The calculation of hue H is based on the channels of maximum and minimum values.

[0115] If R=max, then H=(GB) / (max-min).

[0116] If G=max, then H=2+(BR) / (max-min).

[0117] If B=max, then H=4+(RG) / (max-min).

[0118] In order to convert H into an angle, you need to multiply H by 60, that is, H=H*60.

[0119] If H<0, then H=H+360, thereby limiting the value of the hue H to 0-360.

[0120] (5) Calculate the brightness V. The brightness V directly takes the maximum channel value and divides it by 255 to obtain a value between 0 and 1; that is, V = max(R, G, B).

[0121] S220: Determine the HSV value of one or more areas to be filled according to the HSV value of the website theme color and the HSV value of the website auxiliary color.

[0122] By properly using the color matching of the website theme color and the website auxiliary color, the user experience can be improved and the visual appeal can be enhanced. Based on the HSV value of the website theme color and the HSV value of the website auxiliary color, the embodiment of the present application can customize the HSV value for different areas to be filled, such as the title area, the header area, the web page area, the chart area, the tab area, the button area, the calendar area, etc., to ensure the consistency and aesthetics of the overall design of the website.

[0123] S230: Convert the HSV value of the area to be filled into an RGB value.

[0124] The conversion of HSV values ​​into RGB values ​​can be achieved as follows:

[0125] (1) If the saturation S is 0, then R, G, and B are all equal to the brightness V.

[0126] (2) If the saturation is not 0, it needs to be calculated based on the hue H. First, divide the hue H by 60 to get a quotient and a remainder, which will be used to determine the interval of the hue; that is, H = H / 60; quotient i = INTEGER (H); remainder f = Hi. Since the range of hue H is 0-360°, the quotient i is between 0-5 (including 0 and 5).

[0127] (3) Calculate the intermediate variables a, b, c based on V, S and f.

[0128] a=V*(1-S);

[0129] b = V*(1-S*f);

[0130] c = V*(1-S*(1-f)).

[0131] (4) Use switch-case logic to select the values ​​of R, G, and B based on the value of i (i.e., the integer part of H).

[0132] Switch(i):

[0133] case0:R=V;G=c;B=a;

[0134] case 1: R=b; G=V; B=a;

[0135] case 2: R=a; G=V; B=c;

[0136] case 3: R=a; G=b; B=V;

[0137] case 4: R=c; G=a; B=V;

[0138] case5: R=V; G=a; B=b.

[0139] (5) Multiply the R, G, and B values ​​by 255 and round them to convert them to the 0-255 range.

[0140] R, G, B=int(R*255), int(G*255), int(B*255).

[0141] As an optional implementation of the present application, determining the HSV value of one or more areas to be filled according to the HSV value of the website theme color and the HSV value of the website auxiliary color in S220 can be implemented by S131:

[0142] S221: Determine the HSV values ​​of one or more areas to be filled according to a preset formula between the HSV value of the website theme color, the HSV value of the website auxiliary color, and the HSV value of the area to be filled, as well as the HSV values ​​of the website theme color and the website auxiliary color; wherein different areas to be filled correspond to the same or different preset formulas.

[0143] In this embodiment, the formula between the HSV value of the website theme color, the HSV value of the website auxiliary color and the HSV value of the area to be filled is determined in advance, so that after obtaining the HSV value of the website theme color and the HSV value of the website auxiliary color, the HSV value of each area to be filled can be determined. The preset formulas corresponding to different areas to be filled can be partially the same or completely different.

[0144] Exemplarily, the preset formula between the HSV value of the website theme color, the HSV value of the website auxiliary color, and the HSV value of the area to be filled is as follows:

[0145] Website theme color: HSV (H1, S1, V1);

[0146] Website auxiliary color: HSV (H2, S2, V2);

[0147] Calculate the deviation value: Hm = (H1-H2) mod 60;

[0148] If(Hm=0);Hm=60.

[0149] Title background color: HSV (H3, S3, V3) formula is as follows:

[0150] H3=H1;

[0151] S3 = 0.07;

[0152] V3=1.

[0153] Header background color: HSV (H4, S4, V4) formula is as follows: If (H1>H2); H4 = H1-Hm;

[0154] If(H2>H1); H4=H2+Hm;

[0155] If(H2=H1); H4=H1;

[0156] If(S1>S2); S4=S1-(S1-S2)*20%;

[0157] If(S2>S1); S4=S2+(S2-S1)*20%;

[0158] If (S2 = S1); S4 = S1;

[0159] V4=V1.

[0160] Web page background color: HSV (H5, S5, V5) formula is as follows: If (H1>H2); H5 = H1-Hm;

[0161] If(H2>H1); H5=H2+Hm;

[0162] If(H2=H1);H5=H1;

[0163] S5=0.05;

[0164] V5=0.95.

[0165] Spectrum background color: HSV (H6, S6, V6) formula is as follows:

[0166] H6=H1;

[0167] S6=0.1;

[0168] V6=1.

[0169] Tab unselected background color: HSV (H7, S7, V7) formula is as follows:

[0170] H7=H1;

[0171] S7 = 0.07;

[0172] V7=1.

[0173] Background color when the tab is selected: HSV (H7, S7, V7) formula is as follows: If (H2>H1); H7 = H2-Hm;

[0174] If(H1>H2); H7=H1+Hm;

[0175] If(H2=H1);H7=H1;

[0176] S7 = max(S1, S2);

[0177] V7=1.

[0178] Button color: HSV (H8, S8, V8) formula is as follows:

[0179] H8=H2;

[0180] S8 = S2;

[0181] V8=V2.

[0182] Calendar background color: HSV (H9, S9, V9) formula is as follows:

[0183] H9=H1;

[0184] S9 = 0.07;

[0185] V9=1.

[0186] Advertising column background color: HSV (H10, S10, V10) formula is as follows:

[0187] H10=H1;

[0188] S10=1;

[0189] V10=1.

[0190] The above preset formulas are designed by professional art designers and can be applied to the color matching of many websites.

[0191] If the configuration personnel do not achieve a satisfactory website color matching result after using the above preset formula, the embodiment of the present application also provides a method for "copying" the colors of each filled area in the website sample that the configuration personnel are satisfied with, see Figure 6 , the method specifically includes S222-S227:

[0192] S222: Obtain a website sample and a company LOGO image corresponding to the website sample.

[0193] For the website that the configuration personnel are satisfied with, they obtain a sample (in picture format) of the website and a LOGO picture of the same company as the website.

[0194] S223: Determine, according to the LOGO image, the RGB value of the website theme color and the RGB value of the website auxiliary color corresponding to the website sample.

[0195] The RGB values ​​of the website theme color and the website auxiliary color corresponding to the website sample may be determined referring to the method of S120 - S160 .

[0196] S224: Determine the RGB value of the filling area in the website sample according to the website sample.

[0197] Since the colors of the modules in the website sample are known, the “filled area” is used to represent the area where the modules in the website sample are located.

[0198] For example, the configuration personnel selects the web page background area and allows the electronic device to identify the color of the area to obtain the web page background color. Similarly, the RGB value of each filled area can be obtained.

[0199] S225: Convert the RGB value of the website theme color and the RGB value of the website auxiliary color corresponding to the website sample and the RGB value of the filling area in the website sample into HSV values.

[0200] After converting RGB values ​​to HSV values, it is easier to determine the distance between different colors through hue H.

[0201] S226: Determine the color distance between the HSV value of the filled area in the website sample and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample according to the HSV value of the website theme color and the HSV value of the website auxiliary color corresponding to the website sample and the HSV value of the filled area in the website sample.

[0202] S227: Determine a preset formula according to a color distance between the HSV value of the filled area in the website sample and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample.

[0203] After obtaining the HSV value of the website theme color and the HSV value of the website auxiliary color corresponding to the website sample and the HSV value of the filled area in the website sample, the color distance between the HSV value of different filled areas and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample is known, and the preset formula can be determined based on these color distances. It should be noted that the color of some filled areas may only be related to the website theme color corresponding to the website sample, for example, the HSV value of a certain filled area is equal to the HSV value of the website theme color corresponding to the website sample; the color of some filled areas may only be related to the website auxiliary color corresponding to the website sample, for example, the HSV value of a certain filled area is 0.6 times the HSV value of the website auxiliary color corresponding to the website sample; the color of some filled areas may be related to both the website theme color and the website auxiliary color corresponding to the website sample, for example, the HSV value of a certain filled area is equal to the HSV value of the website theme color corresponding to the website sample minus the HSV value of the website auxiliary color. Therefore, the preset formula can be determined based on these correlations.

[0204] For example, the website theme color corresponding to the website sample is: HSV (H11, S11, V11);

[0205] Website auxiliary colors corresponding to website samples: HSV (H12, S12, V12);

[0206] Web page background color: HSV (H13, S13, V13);

[0207] Title background color: HSV (H14, S14, V14);

[0208] If H13=H11; S13=0.6*S11; V13=0.8*V11; then a preset formula is established between the website theme color corresponding to the website sample, the website auxiliary color corresponding to the website sample, and the web page background color.

[0209] If H14=H11-H12, S14=S12*0.5; V14=V12; then a preset formula is established between the website theme color corresponding to the website sample, the website auxiliary color corresponding to the website sample, and the title background color.

[0210] It should be noted that S222-S227 "copies" the color distance between the HSV value of each filled area in the sample website and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample, and then combines the website theme color and website auxiliary color of your own company to form the style of your own website; rather than copying the colors of each filled area in the sample website intact.

[0211] The embodiment of the present application "copies" the color distance between the HSV value of each filled area in the website sample and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample to the website of the enterprise, thereby providing more color matching options for website configuration personnel.

[0212] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0213] Corresponding to the website color matching method described in the above embodiment, Figure 6 A structural block diagram of a website color matching device provided in an embodiment of the present application is shown. For ease of explanation, only the parts related to the embodiment of the present application are shown.

[0214] Reference Figure 7 , the device comprises:

[0215] An acquisition module 410 is used to acquire a website theme color and a website auxiliary color of the website and a location of one or more areas to be filled in the website;

[0216] A determination module 420, for determining RGB values ​​of one or more areas to be filled according to the RGB values ​​of the website theme color and the website auxiliary color;

[0217] The filling module 430 is used to fill the color of one or more areas to be filled according to the RGB values ​​of the areas to be filled and the positions of the areas to be filled.

[0218] It should be noted that the information interaction, execution process and other contents between the above-mentioned devices are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.

[0219] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0220] An embodiment of the present application also provides an electronic device, which includes: at least one processor, a memory, and a computer program stored in the memory and executable on the at least one processor, wherein the processor implements the steps of any of the above-mentioned method embodiments when executing the computer program.

[0221] An embodiment of the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.

[0222] An embodiment of the present application provides a computer program product. When the computer program product runs on a mobile terminal, the mobile terminal can implement the steps in the above-mentioned method embodiments when executing the computer program product.

[0223] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may at least include: any entity or device capable of carrying the computer program code to an electronic device, a recording medium, a computer memory, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), an electric carrier signal, a telecommunication signal, and a software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0224] The program code embodied on the computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0225] The computer program code for performing the operation of the embodiment of the application can be written with one or more programming languages ​​or their combination, and the programming language includes object-oriented programming languages, such as python, Java, Smalltalk, C++, and also includes conventional procedural programming languages, such as "C" language or similar programming languages. The program code can be executed completely on the user's computer, partially on the user's computer, executed as an independent software package, partially on the user's computer and partially on the remote computer, or executed completely on the remote computer or server. In the case of a remote computer, the remote computer can include a local area network (LAN) or a wide area network (WAN)--connected to the user's computer through any type of network, or, can be connected to an external computer (for example, utilizing an Internet service provider to connect through the Internet).

[0226] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0227] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0228] In the embodiments provided in the present application, it should be understood that the disclosed devices / electronic devices and methods can be implemented in other ways. For example, the device / electronic device embodiments described above are merely schematic. For example, the division of the modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0229] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0230] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A website color matching method, characterized in that: include: Obtaining a website theme color and a website auxiliary color and a location of one or more areas to be filled in the website; Determine RGB values ​​of one or more areas to be filled according to the RGB values ​​of the website theme color and the website auxiliary color; Fill one or more areas to be filled with a color according to the RGB value of the area to be filled and the position of the area to be filled.

2. The website color matching method according to claim 1, characterized in that: Determining RGB values ​​of one or more areas to be filled according to the RGB values ​​of the website theme color and the website auxiliary color includes: Convert the RGB value of the website theme color and the RGB value of the website auxiliary color into HSV values ​​respectively; Determine the HSV value of one or more areas to be filled according to the HSV value of the website theme color and the HSV value of the website auxiliary color; Convert the HSV value of the area to be filled into RGB value.

3. The website color matching method according to claim 2, characterized in that: Determining the HSV value of one or more areas to be filled according to the HSV value of the website theme color and the HSV value of the website auxiliary color includes: According to a preset formula between the HSV value of the website theme color, the HSV value of the website auxiliary color and the HSV value of the area to be filled, and the HSV values ​​of the website theme color and the website auxiliary color, the HSV value of one or more areas to be filled is determined; wherein different areas to be filled correspond to the same or different preset formulas.

4. The website color matching method according to claim 3, characterized in that: The method further comprises: Obtain website samples and company LOGO images corresponding to the website samples; According to the LOGO image, determine the RGB value of the website theme color and the RGB value of the website auxiliary color corresponding to the website sample; Determine, according to the website sample, the RGB value of the fill area in the website sample; Convert the RGB value of the website theme color and the RGB value of the website auxiliary color corresponding to the website sample and the RGB value of the filled area in the website sample into HSV values; Determine the color distance between the HSV value of the filled area in the website sample and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample according to the HSV value of the website theme color and the HSV value of the website auxiliary color corresponding to the website sample and the HSV value of the filled area in the website sample; The preset formula is determined according to the color distance between the HSV value of the filled area in the website sample and the HSV value of the website theme color and / or the HSV value of the website auxiliary color corresponding to the website sample.

5. The website color matching method according to claim 1, characterized in that: The obtaining of the website theme color and the website auxiliary color comprises: receiving a first picture; Extracting the color of each pixel in the first picture; Classifying the pixels of the same color into one category; Determine the color corresponding to the pixel point of the largest category as the website theme color; The color corresponding to the second largest type of pixel points is determined as the website auxiliary color.

6. The website color matching method according to claim 5, characterized in that: After the pixels of the same color are classified into one category, the method further includes: Sort the pixel points of each category from large to small according to the number to obtain a first array; Convert the RGB value corresponding to each type of pixel into an HSV value; In the case of retaining the pixel points of the largest category, deleting approximate colors from the first array, wherein the approximate colors are colors within a positive or negative first threshold value of the H value of the HSV values ​​of the pixel points of the largest category; If the second largest type of pixel points does not exist in the first array, determining the website auxiliary color according to the website theme color; If there is a second largest number of the pixel points of the type in the first array, the step of determining the color corresponding to the second largest number of the pixel points of the type as the website auxiliary color is performed.

7. The website color matching method according to claim 1, characterized in that: The obtaining of the website theme color and the website auxiliary color comprises: The website theme color and the website auxiliary color input in the first interface using the RGB color model are received, and the RGB value of the website theme color and the RGB value of the website auxiliary color are obtained.

8. The website color matching method according to any one of claims 1 to 7, characterized in that: Obtaining the location of one or more areas to be filled in the website includes: Obtaining a web page layout template, wherein the web page layout template is used to construct a web page framework; According to the web page layout template, the position of one or more areas to be filled is determined; the one or more areas to be filled are one or more of the title area, table area, map area, web page background area, tab area, button area, calendar area, advertising column area, and input box area.

9. A website color matching device, characterized in that: include: An acquisition module, used to acquire a website theme color and a website auxiliary color and a position of one or more areas to be filled in the website; A determination module, used to determine RGB values ​​of one or more areas to be filled according to the RGB values ​​of the website theme color and the website auxiliary color; The filling module is used to fill the color of one or more areas to be filled according to the RGB values ​​of the areas to be filled and the positions of the areas to be filled.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the method according to any one of claims 1 to 8 is implemented.

11. A computer program product, characterized in that When the computer program product runs on an electronic device, the electronic device is enabled to execute the method according to any one of claims 1 to 8.

Images