WO2021135887A1 - 页面配色的方法、装置、存储介质和芯片 - Google Patents

页面配色的方法、装置、存储介质和芯片 Download PDF

Info

Publication number
WO2021135887A1
WO2021135887A1 PCT/CN2020/135179 CN2020135179W WO2021135887A1 WO 2021135887 A1 WO2021135887 A1 WO 2021135887A1 CN 2020135179 W CN2020135179 W CN 2020135179W WO 2021135887 A1 WO2021135887 A1 WO 2021135887A1
Authority
WO
WIPO (PCT)
Prior art keywords
color
page
background
color system
image
Prior art date
Application number
PCT/CN2020/135179
Other languages
English (en)
French (fr)
Inventor
张韵叠
刘爱兵
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Publication of WO2021135887A1 publication Critical patent/WO2021135887A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/189—Automatic justification

Definitions

  • This application relates to the field of multimedia, and more specifically, to a method, device, storage medium, and chip for page color matching.
  • HTML hypertext markup language
  • the present application provides a page color matching method, device, storage medium, and chip, which can automatically match colors of each component element of the page, and improve the efficiency of page design.
  • a method for page color matching includes: acquiring color information of a first image in a first page, the color information including the proportion of colors included in the first image; To determine the color matching of the target page element of the second page, the target page element includes at least one of the following: page global background, page block background, title background, title text, button background, button text, body text.
  • the above technical solution can realize the automatic color matching of each component element of the second page, improve the efficiency of page design, simplify the process of page design, and make the entire page after color matching
  • the front and back scenes are clearly distinguished, the text is readable, and the page is harmonious and beautiful.
  • the first page and the second page may be the same page or different pages.
  • determining the color matching of the target page element of the second page includes: selecting the largest proportion of the colors included in the first image As the color of the global background of the page; or select the color at the first ratio of the first image as the transition color, and select the transition color from the first three color systems with the largest proportion of colors included in the first image The closest color is used as the global background color of the page.
  • This technical solution can keep the global background color of the second page consistent with the color of the first page, so that the color matching of the second page is harmonious and beautiful.
  • the lightness value-saturation value-hue angle value LCH space to which the color of the global background of the page belongs is less than or equal to the first threshold; and/or the The saturation value on the LCH space to which the color of the global background of the page belongs is less than or equal to the second threshold.
  • This technical solution can ensure that the overall tone of the page is unified by setting the global background color of the lightness value and the saturation value in the LCH space within the threshold value, and avoid the phenomenon that a certain color is too prominent and causes the page color to be inharmonious.
  • determining the color matching of the target page element of the second page according to the color information of the first image includes: when the color information of the first image indicates the first image
  • the color system of is configured as the absolute dominant color system
  • the color of the global background of the page belongs to the first color system
  • select at least one color in the second color system as the color of the page block background where the first The color system is the color system with the largest proportion among the color systems to which the colors included in the first image belong
  • the second color system is the color system in which the colors included in the first image belong to other than the first color system.
  • Color system if the color of the global background of the page does not belong to the first color system, at least one color in the first color system is selected as the color of the page block background.
  • the technical solution uses the color that accounts for a larger portion of the color picking result as the color of the page block background, and distinguishes it from the color of the global background of the page, so that the page background is clear and the color matching is harmonious.
  • determining the color matching of the target page element of the second page according to the color information of the first image includes: when the color information of the first image indicates the first image
  • the color system of is configured as dual primary color system, if the color of the global background of the page belongs to the third color system, select at least one color in the fourth color system as the color of the page block background, and the third color system is A color system in the dual main color system, the fourth color system is another color system in the dual main color system, and the third color system is a color system to which the color of the global background of the page belongs.
  • the technical solution uses the color that accounts for a larger portion of the color picking result as the color of the page block background, and distinguishes it from the color of the global background of the page, so that the page background is clear and the color matching is harmonious.
  • determining the color matching of the target page element of the second page includes: when the color information of the first image indicates When the color system of the first image is configured as a non-primary color system, at least one color in the fifth color system is selected as the color of the page block background, where the fifth color system occupies the first image
  • the ratio is smaller than the sixth color system, which is the color system to which the color of the global background of the page belongs, and the fifth color system is the sixth color in addition to the color systems corresponding to the colors included in the first image The color system with the largest proportion outside the series.
  • the technical solution uses the color that accounts for a large part of the color picking result as the page block background color, and distinguishes it from the global background color of the page, so that the page background is clear and the color matching is harmonious.
  • the color of the page block background determined according to the color information of the first image is the first color
  • the color of the global background of the page is the second color
  • the The method further includes: when the first color and the second color are complementary colors, according to the color information of the first image, updating the color of the page block background to a third color, wherein the third color includes the first color.
  • the seventh color system belongs to the color system corresponding to the color included in the first image, excluding the eighth color system and the ninth color system, the eighth The color system is the color system to which the first color belongs, and the ninth color system is the color system to which the second color belongs.
  • the technical solution avoids the phenomenon that the global background color of the page and the background color of the page block are too different, which causes the page color to be inharmonious.
  • determining the color matching of the target page element of the second page according to the color information of the first image includes: selecting at least one color in the tenth color system as the title The color of the background, wherein, the tenth color system belongs to the color system corresponding to the color included in the first image, excluding the eleventh color system and the twelfth color system, and the tenth color system has the largest proportion.
  • the first color system is the color system to which the color of the global background of the page belongs
  • the twelfth color system is the color system to which the color of the block background of the page belongs.
  • the color system with the largest proportion other than the global background color of the page and the block background color is selected as the background color of the title, so that the background of the page is clearly distinguished, and the color matching is harmonious and beautiful.
  • the method further includes: when the title text has the title background, adding a third value to the lightness value on the LCH space to which the color of the page block background belongs The color or white after the threshold is used as the color of the title text; or when the title text does not have the title background, at least one color in the thirteenth color system is selected as the color of the title text, where the thirteenth color system It belongs to the color system with the largest proportion among the color systems corresponding to the colors included in the first image, except for the fourteenth color system and the fifteenth color system.
  • the fourteenth color system is the color of the global background of the page.
  • the fifteenth color system is the color system to which the background color of the page block belongs, and the difference between the color of the title text and the color of the background color of the page block in the LCH space to which it belongs The value is less than the fourth threshold.
  • the technical solution can realize the automatic color matching of the title color of the page components, so that the readability of the title text reaches the standard and the color matching is harmonious.
  • determining the color matching of the target page element of the second page includes: selecting at least one of the sixteenth color system A color is used as the color of the button background, where the sixteenth color system belongs to the color system corresponding to the color included in the first image, with the exception of the seventeenth color system and the eighteenth color system accounting for the largest proportion Color system, the seventeenth color system is the color system to which the color of the global background of the page belongs, and the eighteenth color system is the color system to which the color of the block background of the page belongs; or is included from the first image
  • select the color group that is away from the fifth threshold value of the hue angle value on the LCH space to which the background color of the page block belongs, and select the color opposite to the cold and warm attributes of the background color of the page block from the color group as the button background s color.
  • determining the color matching of the target page element of the second page according to the color information of the first image includes: selecting the brightness value on the LCH space to which the button background color belongs plus the preset The color or white after setting the value is used as the button text color.
  • the technical solution distinguishes the button text color from the button background color, so that the button text meets the readability.
  • the color matching of the target page element of the second page is determined, including: if the color of the background where the text of the text is located If the lightness value on the LCH space to which the background belongs is greater than the sixth threshold, the color after the lightness value and saturation value on the LCH space to which the background color belongs is changed by a preset offset as the color of the body text; if the body text is located If the lightness value on the LCH space to which the background color belongs is less than or equal to the sixth threshold, the color or white after the lightness value on the LCH space to which the background color belongs is changed by a preset offset amount is used as the color of the text.
  • the technical solution realizes the automatic color matching of the text part of the main text of the page, and clearly distinguishes the text color of the main text from the background where the main text is located, so as to satisfy the readability of the text.
  • the method should include: calculating the contrast between the color of the main text and the color of the background where the main text is located; when the color of the main text is different from the background where the main text is located When the color contrast is less than or equal to the seventh threshold, the color of the text is adjusted.
  • This technical solution adjusts the contrast between the text color of the main text and the background color of the main text to meet a preset value, so that the text color of the main text is clearly distinguished from the background of the main text, and the readability of the text is satisfied.
  • a device for page color matching includes: an acquiring module that acquires color information of a first image in a first page, the color information including the proportion of colors included in the first image; a processing module , According to the color information of the first image, determine the color matching of the target page element of the second page.
  • the target page element includes at least one of the following: page global background, page block background, title background, title text, button background, button Text, body text.
  • the processing module is specifically configured to: select the color with the largest proportion among the colors included in the first image as the color of the global background of the page; or select the first The color at the first ratio of the image is used as the transition color, and the color closest to the transition color is selected from the first three color systems with the largest proportion of colors included in the first image as the color of the global background of the page.
  • the lightness value-saturation value-hue angle value to which the color of the global background of the page belongs is less than or equal to the first threshold in the LCH space; and/or the The saturation value on the LCH space to which the color of the global background of the page belongs is less than or equal to the second threshold.
  • the processing module is specifically configured to: when the color information of the first image indicates that the color system configuration of the first image is an absolute dominant color system, if the page is globally The background color belongs to the first color system, then at least one color in the second color system is selected as the color of the page block background, where the first color system is the color system to which the color included in the first image belongs The second color system is the color system other than the first color system in the color system to which the colors included in the first image belong; if the color of the global background of the page does not belong to the first color system If a color system is selected, at least one color in the first color system is selected as the background color of the page block.
  • the processing module is specifically configured to: determine the color matching of the target page element of the second page according to the color information of the first image, including: The color information indicates that when the color system configuration of the first image is dual-primary color system, if the color of the global background of the page belongs to the third color system, at least one color in the fourth color system is selected as the color of the page block background ,
  • the third color system is a color system in the dual main color system
  • the fourth color system is another color system in the dual main color system
  • the third color system is the color of the global background of the page Belonging to the color family.
  • the processing module is specifically configured to select the fifth color when the color information of the first image indicates that the color system configuration of the first image is non-primary color system At least one color in the series is used as the color of the page block background, wherein the fifth color series has a smaller proportion in the first image than the sixth color series, and the sixth color series is the color of the global background of the page Belongs to the color system, and the fifth color system is the color system with the largest proportion among the color systems corresponding to the colors included in the first image except for the sixth color system.
  • the processing module is further configured to: the color of the background of the page block determined according to the color information of the first image is the first color, and the color of the global background of the page Is the second color, and the processing module is further used for: when the first color and the second color are complementary colors, update the color of the background of the page block to the third color according to the color information of the first image ,
  • the third color includes at least one color in the seventh color system
  • the seventh color system belongs to the color system corresponding to the colors included in the first image, excluding the eighth color system and the ninth color system.
  • the color system with the largest ratio, the eighth color system is the color system to which the first color belongs, and the ninth color system is the color system to which the second color belongs.
  • the processing module is specifically configured to: select at least one color in the tenth color system as the color of the title background, where the tenth color system belongs to the first color system.
  • the color system corresponding to the color of an image is the color system with the largest proportion except for the eleventh color system and the twelfth color system.
  • the eleventh color system is the color system to which the color of the global background of the page belongs
  • the twelfth color system is the color system to which the background color of the page block belongs.
  • the processing module is also used to: when the title text has the title background, add the lightness value on the LCH space to which the color of the page block background belongs The color or white after the third threshold is used as the color of the title text; or when the title text does not have the title background, at least one color in the thirteenth color system is selected as the color of the title text, where the thirteenth The color system belongs to the color system corresponding to the color of the first image except for the fourteenth color system and the fifteenth color system.
  • the fourteenth color system is the global background of the page The color family to which the color belongs
  • the fifteenth color family is the color family to which the background color of the page block belongs
  • the difference between the color of the title text and the lightness value of the color of the page block background in the LCH space to which it belongs is smaller than the fourth threshold.
  • the processing module is further configured to: select at least one color in the sixteenth color system as the color of the button background, where the sixteenth color system belongs to The color system corresponding to the color of the first image has the largest proportion in addition to the seventeenth color system and the eighteenth color system.
  • the seventeenth color system belongs to the color of the global background of the page Color system
  • the eighteenth color system is the color system to which the background color of the page block belongs; or the hue angle value in the LCH space that the color of the page block background belongs to is selected from the colors included in the first image
  • a color opposite to the cold and warm attributes of the background of the page block is selected as the color of the button background.
  • the processing module is further used to select the color or white of the lightness value on the LCH space to which the button background color belongs plus a preset value or white as the button text color.
  • the processing module is further configured to: if the lightness value on the LCH space of the background where the text is located is greater than the sixth threshold, then the color of the background belongs to The lightness value and saturation value on the LCH space change the color after the preset offset as the color of the text; if the lightness value on the LCH space of the background color of the text text is less than or equal to the sixth threshold, the The color or white after the lightness value on the LCH space to which the color of the background belongs is changed by a preset offset amount is used as the color of the text.
  • the processing module is also used to: calculate the contrast between the color of the main text and the color of the background where the main text is located; When the contrast of the background color is less than or equal to the tenth threshold, the text color of the text is adjusted.
  • a device for page color matching including: at least one processor, when program instructions are executed in the at least one processor, the device is caused to execute the method according to any one of the first aspects.
  • a computer-readable storage medium including a computer program, which, when running on a computer device, causes a processing unit in the computer device to execute the method described in any one of the first aspect.
  • a chip in a fifth aspect, includes a memory and a processor, the memory is used to store computer instructions, and the processor is used to execute the computer instructions stored in the memory to execute the computer instructions described in any one of the first aspects. Methods.
  • FIG. 1 is a schematic flowchart of a method for page color matching according to an embodiment of the present application.
  • Fig. 2 is a schematic diagram of the division of color systems in an embodiment of the present application.
  • FIG. 3 is a schematic diagram of dividing the color system types included in the first image according to an embodiment of the present application.
  • Fig. 4 is a schematic diagram of page color matching in an embodiment of the present application.
  • Fig. 5 is another schematic diagram of page color matching according to an embodiment of the present application.
  • FIG. 6 is a schematic flowchart of a method for adjusting text color according to an embodiment of the present application.
  • FIG. 7 is a schematic flowchart of background color matching in an embodiment of the present application.
  • Fig. 8 is an example diagram of a page color matching device according to an embodiment of the present application.
  • terminal devices can be applied to various devices that present user interfaces to users through screens (or displays), such as smart phones, tablet computers, and personal computers.
  • screens or displays
  • smart phones such as smart phones, tablet computers, and personal computers.
  • personal computers such as smart phones, tablet computers, and personal computers.
  • terminal devices the above-mentioned devices are collectively referred to as "terminal devices”.
  • the user interface also known as the user interface
  • the user interface is the medium for interaction and information exchange between the system and the user, and it realizes the conversion between the internal form of information and the form acceptable to humans.
  • the user interface includes the software and hardware parts that realize the information exchange between the user and the system.
  • the software part includes processing software such as user and system information exchange agreements, operation commands
  • the hardware part includes input devices and output devices (including but not limited to display screens, touch screens, soft keyboards, virtual controls, physical keyboards, and function keys (such as volume control). Buttons, switch buttons, etc.), trackball, mouse, joystick, camera, and input and output devices that can be realized by future technology).
  • the purpose of the user interface is to enable users to conveniently, efficiently and clearly operate the hardware to achieve interaction and complete the work that they hope to accomplish with the hardware.
  • the user interface is widely defined. There is a user interface in all fields that participate in the information exchange between humans and machines.
  • the user interface may include a graphical user interface, that is, a graphical user interface (graphic user interface, GUI), which is the most common user interface in the world today.
  • GUI graphical user interface
  • the interface displayed on a mobile phone when it is powered on is It is a graphical user interface in which the user interacts with the device hardware through displayed graphics (icons), virtual keyboard (soft keyboard), virtual mouse, etc.
  • the information for interaction and information exchange between the aforementioned system and the user may include auditory information, visual information, tactile information, motion information, odor information, and so on. Users can directly exchange information with the system through the user interface, or interact with the system with the help of devices including stylus, touch gloves, etc.
  • computer-readable media may include, but are not limited to: magnetic storage devices (for example, hard disks, floppy disks or tapes, etc.), optical disks (for example, compact disks (CDs), digital versatile disks (DVDs) Etc.), smart cards and flash memory devices (for example, erasable programmable read-only memory (EPROM), cards, sticks or key drives, etc.).
  • various storage media described herein may represent one or more devices and/or other machine-readable media for storing information.
  • machine-readable medium may include, but is not limited to, wireless channels and various other media capable of storing, containing, and/or carrying instructions and/or data.
  • Color space is a mathematical model that describes a set of values to describe colors. Color space can also be called color space, color model, color model, color system, etc. Through the color space, the color can be described.
  • RGB red-green-blue
  • HSV hue-saturation-lightness
  • CIE International Commission on Illumination
  • CIE Lab LCH color space CIE Lab LCH color space
  • the RGB color space can also be described by a three-dimensional cube.
  • R, G, and B are the three coordinate axes of the Cartesian coordinate system, and one vertex of the cube is located at the origin of the coordinate. The three sides adjacent to this vertex are located on the coordinate axis.
  • Any kind of color light can be formed by adding and mixing the three primary colors of R, G and B in different proportions. When the three primary color components are all 0 (weakest), the mixed color light is black; when the three primary color components are all the strongest When the mixed color light is white.
  • the color parameters in the HSV model are: hue (hue, H), saturation (saturation, S), and lightness (value, V).
  • Hue also known as hue, is the most basic feature of color perception.
  • the value range of H is 0° to 360°.
  • Saturation refers to the vividness of the color, also known as the purity of the color.
  • S is a ratio value ranging from 0 to 1. It is expressed as the ratio between the purity of the selected color and the maximum purity of the color. The larger the value of S, the purer the color, and the smaller the value, the more the color. gray.
  • V represents the brightness of the color, ranging from 0 to 1.
  • V equal to 0 means the bottom fixed point of the cone, which is black
  • the CIE XYZ color space also known as the CIE 1931 color space, is a primary color system similar to RGB, but it is more suitable for color calculations.
  • the figure shows the XYZ primary color values from the wavelength of 400 nanometers (nanometer, nm) (purple) to 700nm (red). This is a cone formed by connecting a curved surface to the origin, and all XYZ stimulation values, All fall within the vertebral body of this positive XYZ quadrant.
  • the origin of the coordinate axis is equivalent to black without light.
  • the curve is the spectral trajectory, and the color on the spectral trajectory represents the maximum saturation that the color can reach.
  • CIE Lab color space is a color system based on physiological characteristics. This means that the CIE Lab color space uses digital methods to describe human visual perception.
  • the L component in the Lab color space is used to represent the brightness of the pixel (light), the value range is [0,100], which means from pure black to pure white, and the brightness can also be called lightness; a represents the range from red to green, The value range is [127,-128]; b represents the range from yellow to blue, and the value range is [127,-128].
  • the Lab color space is the same as the LCH color space chromaticity diagram, but the coordinates are different.
  • L represents the lightness value
  • C represents the saturation value
  • H represents the hue angle value.
  • the color difference between two colors can be determined in different color spaces.
  • Color difference is color difference, which can be used to express the similarity of colors.
  • the color difference can also be called the Euclidean distance of the color, which can be expressed by ⁇ E.
  • the color difference In the RGB color space, the color difference can be expressed as:
  • R 1 , R 2 , G 1 , G 2 , B 1 , and B 2 respectively represent the red, green, and blue values of two points in the color space.
  • the color difference can be expressed as:
  • ⁇ L L 1 -L 2 ;
  • ⁇ C ab C 1 -C 2 ;
  • K C and K H generally take 1, K L , K 1 , K 2 have different values in different application scenarios, L 1 , L 2 , a 1 , a 2 , b 1 , and b 2 respectively represent two points in the color space The value of L, a, b. .
  • the color difference can be expressed as:
  • L 1 , L 2 , a 1 , a 2 , b 1 , and b 2 respectively represent the values of L, a, and b at two points in the color space.
  • the color difference can be expressed as:
  • L 1 , L 2 , C 1 , C 2 , h 1 , and h 2 respectively represent the values of L, C, and h at two points in the color space.
  • the color difference calculated in different color spaces is different from the visual similarity of the human eye.
  • the approximate degree of color difference calculated in Lab space and the color difference observed by human eyes is 75%
  • the approximate degree of color difference calculated in LCH space and the color difference observed by human eyes is 85%
  • the color difference calculated in CMC(l;c) space is equal to
  • the approximate degree of chromatic aberration observed by the human eye is 95%.
  • HTML pages are embedded for the operation of activities or the introduction of new products. Many of these pages are designed for emotional needs and will be bold. Color matching. Generally, this kind of HTML page will use a banner as the jump entrance, and the top of the HTML page has a design cover similar to the banner entrance. The following is the specific page content. Generally, the page content here is designed by the designer in advance Good, such as page layout, color matching, etc. Each page requires designers to match colors one by one, which affects the efficiency of page design.
  • the present application provides a method, device, and computer-readable storage medium and chip for page color matching, which can realize automatic color matching of each component part of the page, improve the efficiency of page color matching, and the page is harmonious and beautiful.
  • FIG. 1 is a schematic flowchart of a method for page color matching according to an embodiment of the present application. As shown in FIG. 1, the method 100 includes step 110 and step 120.
  • Step 110 Obtain color information of a first image in a first page, where the color information includes the proportion of colors included in the first image.
  • the first image may be at least one image in the first page, or the entire page of the first page, which is not specifically limited in the embodiment of the present application.
  • the terminal device obtains color information of at least one image in the first page, and the color information may be a color system to which each color of the at least one image in the first page belongs.
  • One possible way to obtain the color system is to calculate the color system of each pixel according to the color value of each pixel in at least one image in the first page, and calculate the color system of each pixel according to the color value of each pixel. The proportion of the situation.
  • Another possible way to obtain the color system is to divide at least one image in the first page into various color areas, and calculate the proportion of the color system to which the color area belongs in the image according to the proportion of each color area. Than the situation.
  • the method of acquiring the color system will be described below in conjunction with specific embodiments, which will not be described in detail here.
  • the color information may also be the hue value of each color in at least one image on the first page, which is not specifically limited in the embodiment of the present application.
  • Step 120 Determine the color matching of the target page element of the second page according to the color information of the at least one image.
  • the terminal device automatically matches the colors of the components of the second page according to the color information of at least one image in the first page, and completes the color matching of the content part of the second page.
  • the HTML5 long image page can be automatically color-matched according to the color information of the top cover image; another example, the terminal device can also automatically color the content part of the HTML page according to the color information of the Banner; or according to the color of any image
  • the automatic color matching of the component parts of another page or image is realized, which is not specifically limited in the embodiment of the present application.
  • the first page and the second page may be the same page.
  • the terminal device can perform color analysis on the pixels in at least one image in the first page, for example, calculate the hue value of each color in the image, and count the area of the color system to which each color belongs in the image. According to the proportion of each color, determine the color matching of the content part of the second page.
  • the components of the second page include, but are not limited to: page global background, page block background, title background, title text, button background, button text, and body text.
  • the second page may include at least one of the foregoing component parts, or may include at least two of the foregoing content parts.
  • the page global background represents the overall background of the second page; the page segmented background represents the background of the partial blocks in the second page. It should be understood that there may be multiple local backgrounds in the page; the title background represents the background containing the title. The color of the title background is different from the color of the page global background and the color of the page block background.
  • the title is directly displayed on the page global background or the page block background, or the junction of the two page block backgrounds Online, or the boundary line between the page global background and the page block background;
  • the color of the title text represents the text color of the title part;
  • the button background represents the background with the button, when there is no button background, the button is directly displayed on the page global The background or page block background;
  • the button text color represents the text or pattern color of the button part;
  • the body text color represents the color of the text part.
  • the content part of the second page may also include a texture color.
  • a texture color When the color distance between the texture color and the background color, that is, the color difference, does not meet a preset condition, the texture transparency of the texture color is adjusted to make the texture and the background harmonious.
  • the background color can be the color of the global background of the page, or the color of the page block background, or even the color of the title background or the color of the button background, which is not limited in the embodiment of the present application.
  • the color information of at least one image in the first page can be used to determine the color matching of the content part of the second page, which can realize the automatic color matching of the content part of the page and improve the color matching of the page
  • the efficiency of simplifies the process of page design, and makes the entire page after color matching clearly distinguish the front and back scenes, the text is readable, and the page is harmonious and beautiful.
  • FIG. 2 is a schematic flowchart of color system division according to an embodiment of the present application. As shown in FIG. 2, the color system division includes steps S210 to S250.
  • Step S210 each pixel is traversed, and the color x is taken out in turn.
  • the terminal device traverses each pixel in the top cover image, and records the color x of each pixel in turn.
  • step S220 each color system is traversed, and the color y is taken out in turn.
  • the terminal traverses each color system, which can refer to the color system divided according to the hue circle, such as ten hue circle, twelve hue circle, sixteen hue circle, eighteen hue circle, twenty-four hue circle, etc., this application
  • the embodiment is not limited to this.
  • step S230 it is determined whether the hue distance between the color x and the color y is less than 20 degrees.
  • step S210 It is successively determined whether the difference between the hue of the color x extracted in step S210 and the hue of the color y extracted in step S220 in the hue circle is less than 20 degrees. For example, take a color x1 from S210 and compare the color x1 with a color y2 taken from S220. If the difference between the hue of the color x1 and the color y1 in the hue circle is greater than or equal to 20 degrees, then the color x1 is compared with the color y2 taken out from S220, until the hue of the color x1 and a certain color yn in the color y is less than 20 degrees, then go to step S240. Then proceed to the next color judgment and repeat the above process.
  • Step S240 insert the color x into the color system where the color y is located.
  • the color xi is inserted into the color system where the color yi is located.
  • the hue distance between the color x1 and the color yn is less than 20 degrees, the color x1 is inserted into the color system where the color yn is located.
  • step S250 it is judged whether there are any remaining colors in the color x.
  • steps S210 to S250 are repeated; if there are no remaining colors in the color x, the color system division is ended. This step can ensure that the colors of at least one image used for color picking on the first page are all divided into a certain color system, and all color picking processes are completed.
  • the type of the at least one image in the first page is divided into multiple types.
  • Fig. 3 is a way of dividing image types according to an embodiment of the present application. As shown in Figure 3, the color picking results can be divided into three types, namely absolute dominant color system, dual dominant color system and no dominant color system.
  • the absolute dominant color system means that the proportion of the first color system is greater than or equal to 0.5
  • the proportion of the first color system is greater than or equal to 0.1 of the proportion of the second color system
  • dual primary color system means that the sum of the proportions of the first color system and the second color system is greater than or equal to 0.8, the difference in proportions Less than or equal to 0.1
  • no main color system means that the proportion of the color system does not meet the above-mentioned absolute main color system and dual main color system.
  • the three types of the at least one image in the first page can be formed into corresponding color palettes for automatic color matching of the second page.
  • the large area background color (such as the page global background, the page block background) can use the dominant color system as much as possible Color, and for small elements (such as titles, buttons, etc.) on the page, try to use colors in the second or third color system.
  • the small elements on the page preferentially use colors in the second color system and the third color system that are farther away from the main color system (that is, the first color system) in hue.
  • the at least one image in the first page belongs to dual primary color systems
  • large area background colors such as page global background, page separation background
  • For small elements on the page such as titles, buttons, etc.), try to use the colors of the third color system, and you can mix the colors of the first color system or the second color system. colour.
  • the at least one image in the first page belongs to no main color system
  • when matching colors on the second page try to use all the colors of the first, second, and third color systems, without distinction Large area and small element part of the page.
  • Fig. 4 is a schematic diagram of page color matching in an embodiment of the present application.
  • the target page element in the second page includes at least the color of the global background of the page and the color of the background of the page blocks.
  • the global background of the page is a non-transitional background
  • at least one color in the first color system with the largest proportion among the colors included in the first image is selected as the color of the global background of the page.
  • set a preset value for the L and C values of the color in the LCH space When the L and C values of the color do not meet the preset values, adjust the color to make the tone of the entire page Harmonious and beautiful, to avoid the appearance of a particularly abrupt color on the page.
  • the global background of the transition type page indicates that the global background is transitioned from the first image, and has a certain connection with the picture requirements.
  • the color of this type of background take 1 of the transition direction picture.
  • the color at /4 is used as the main transition color, and the closest color is selected from the color palette of the first image in the previous first page as the background color.
  • set a preset value for the L and C values of the color in the LCH space When the L and C values of the color do not meet the preset values, adjust the color to make the tone of the entire page Harmonious and beautiful, to avoid the appearance of a particularly abrupt color on the page.
  • the color of the global background of the page and the color of the background of the page blocks are used as the colors of a large area on the page, and you can try to use the colors of the main color system.
  • the at least one image in the first page that is in the absolute dominant color system when it is determined that the color of the global background of the page belongs to the dominant color system, that is, the color of the global background of the page is the first color system, select the remaining color system At least one color in the color system with the largest proportion is used as the color of the page block background, that is, the second color system is selected as the color of the page block background, and the page block background area can have only one or more. If it is determined that the color of the global background of the page is not the first color system, at least one color in the first color system is selected as the color of the page block background. It should be understood that there may be only one color palette in a color system, or multiple color palettes.
  • the background colors of multiple page blocks can be selected from the same color swatch in the color system, or different color swatches in the color system.
  • This solution makes the final page color matching basically the same as the color matching of the at least one image in the first page, and the page color is more harmonious and beautiful.
  • the at least one image in the first page that has dual primary color systems if it is determined that the color of the global background of the page belongs to the primary color system, then another one of the primary color systems is selected as the color of the page block background. That is, when the color of the global background of the page belongs to the first color system, select at least one color in the second color system as the color of the page block background. When the color of the global background of the page belongs to the second color system, select the first color system At least one of the colors in is used as the background color of the page block. It should be understood that there may be only one color palette in a color system, or multiple color palettes.
  • the background colors of multiple page blocks can be selected from the same color swatch in the color system, or different color swatches in the color system.
  • This solution makes the final page color matching basically the same as the color matching of the at least one image in the first page, and the page color is more harmonious and beautiful.
  • the main color system has only one color swatch, take the global background color of the page and change it on the L value in the LCH space, such as L ⁇ 15, to get the background color of the page block.
  • L the L value in the LCH space
  • This solution makes the final page color matching basically the same as the color matching of the at least one image in the first page, and the page color is more harmonious and beautiful.
  • At least one color in the second color system that is different from the color of the global background of the page is selected as the color background color of the page block background.
  • This solution makes the final page color matching basically the same as the color matching of the at least one image in the first page, avoids the phenomenon of excessive contrast between adjacent colors on the page that causes the page color to be inharmonious, and makes the page color harmonious and beautiful.
  • the color of the page block background has the color of the secondary block background, that is, when there is a block background in the block background, or when the page block background has a decorative color
  • Fig. 5 is another schematic diagram of page color matching according to an embodiment of the present application.
  • the second page includes at least the global background color of the page, the color of the page block background, the color of the title background, the title text color, the button background color, the button text color and the body text color (not shown in the figure). show).
  • the color of the global background of the page and the color of the background of the page blocks can be color-matched using the method described above, and will not be repeated here.
  • the title of the page content part can be divided into three categories, namely, parallel title without block background color 1, parallel title with block background color 2 and overlapping color with block background title.
  • FIG. 5 is only a schematic division manner, and there may be other division manners in the actual design of the second page, which is not specifically limited in the embodiment of the present application.
  • the title part of the embodiment of the present application may be designed with or without the color of the title background.
  • the background color of the title may belong to the third color system, or it may belong to the second color system.
  • the color in the third color system is used as the color of the page block background.
  • the color in the second color system is used as the background color of the page block, and then the third color system is selected
  • the color in the title background is used as the color of the title background; for the parallel title 1 with the color of the non-blocked background, when the color of the second color system and the global background of the page are complementary colors, the color in the third color system is selected as the color of the parallel title 1 The color of the title background.
  • the color in the second color system and the global background of the page are not complementary colors
  • the color in the second color system is selected as the color of the title background of parallel title 1.
  • the color of the heading background is adjusted so that the color of the heading background is the same as There is a certain difference between the color of the global background of the page and the color of the background of the page blocks, so that the background of the page is clearly distinguished, and the color matching is harmonious and beautiful.
  • different color swatches in the color system can be selected as the color of the title background, or the same color swatch in the color system can be selected as the color of the title background.
  • the color of the title text color is divided into two cases.
  • the title has a title background; in the second case, the title does not have a title background, and the title text is directly displayed in the color of the page global background or the page block background.
  • the title has a title background. If the first three color systems that account for the largest proportion of the colors in the first image of the first page above are not used, then Select the unused color system as the title text color, but the readability of the title text needs to be verified.
  • the difference between the title text color and the color of the title background in the LCH space to which it belongs should be greater than the default If the difference is less than or equal to the preset value, adjust the title text color so that the difference between the L value is greater than the preset value, for example, the preset value can be 40; if the title text color is equal to The H value of the title background color in the LCH space to which it belongs is complementary, that is, the difference between the H values is greater than or equal to 150, then adjust the value of the background color of the page block, such as the background color of the page block After adding a preset value to the L value in the LCH space, the color of the title text is obtained. If the changed L value is greater than 90, white is selected as the color of the title text.
  • the first three color systems with the largest proportion of the colors in the first image of the first page have been used in the first three color systems, adjust the value of the background color of the page block, such as block the page background After adding a preset value to the L value on the LCH space that the color belongs to, the color of the title text is obtained. If the changed L value is greater than 90, white is selected as the color of the title text.
  • the title text color does not have a title background. If the color in the first image of the first page has the largest proportion of the first three color systems that are not used, select the remaining color system As the title text color, for example, the first color system has been selected as the color of the page global background, and the second color system is selected as the color of the page block background, then the third color system is selected as the title text color.
  • the readability of the text needs to be verified, that is, the difference between the title text color and the color of the title background in the LCH space to which it belongs should be greater than the preset value, if the difference is less than or equal to the preset value , Adjust the title text color so that the difference between the L values is greater than the preset value, for example, the preset value may be 40. If the color selection result has only two color systems or one color system, select the background color of the page block as the title text color. At this time, the text readability verification is also required.
  • the embodiment of the present application may also include a button part.
  • the button text color 1 may be the title text color of the parallel title 1
  • the button background color 1 may be the title background color of the parallel title 1.
  • other color schemes can also be used.
  • the button is in the background color of the title.
  • a color scheme for the color of the button’s background is to select the remaining color systems in the three color systems that account for the largest proportion of the color selection results in the first image of the first page.
  • Color palette matching that is, select the color group with the closest H value from the color palette, and select the color with the smallest color difference from the color group as the background color of the button.
  • Another color scheme for the background color of the button is when the three color systems with the largest proportion of the color selection results in the first image of the first page are all used or when the color selection results have only two color systems , Select the color of the global background of the page for color palette matching, that is, select the color group with the closest H value from the color palette of the global background of the page, and select the color with the smallest color difference from the color group as the button background.
  • the color picking result of the color in the first image of the first page has only one color system, select the color from the color palette of the color system that is away from the preset value of the H value of the background color of the page block in the LCH space to which it belongs
  • the preset value is 120
  • a color opposite to the cold and warm attributes of the background colors of the page blocks is selected as the background color of the button. For example, blue, green, purple, etc. belong to the cool color system, and orange, yellow, red, etc. belong to the warm color system.
  • the background color of the page block belongs to the cool color system, select the warm color system as the button background color.
  • the button text color is changed according to the brightness of the button background color, for example, the color obtained by adding a preset value to the L value on the LCH space of the button background color is used as the button text color If the default value is 40, if the value of L+40 is greater than 90, white is selected as the button text color.
  • the button can also be presented separately in the global background of the page or in the background of the page segment, or at the junction of the page segment background and the page global background, or at the junction of the two page segment backgrounds.
  • This embodiment of the present application There is no specific restriction on this.
  • the colors of the text parts in the multiple segmented backgrounds may be the same or different.
  • the color matching of the text part in the first divided background can adopt the above-mentioned color scheme.
  • the L value on the LCH space to which the block background two belongs is greater than the preset value, the L value on the LCH space to which the block background two belongs is changed to the color after 20 As the text color of the text, the default value is 50. If the L value on the LCH space to which the second background block belongs is less than or equal to the preset value, white is selected as the color of the text part in the second background block.
  • the text part may also include a background, but it is necessary to ensure that the color of the text of the text and the color of the background of the text meet the readability.
  • FIG. 6 is a schematic flowchart of a method for adjusting the color of a text according to an embodiment of the present application. It should be understood that the text color described here can represent the color of the text in the main text, the color of the title text, or even the color of the button text.
  • the contrast between the text color and the background color can be calculated first, and when the contrast between the text color and the background color does not meet the requirements, the text color is adjusted.
  • the contrast between the text color and the background color is too large, which may cause visual fatigue; the contrast between the text color and the background color is small, which may not meet the basic requirements of reading. Therefore, the text color needs to be adjusted.
  • Step S610 Determine whether the contrast between the text color and the background color meets a preset condition.
  • the preset conditions can be adjusted according to the different people facing the target image, as well as the text size and font.
  • the contrast between the text color and the background color should be maintained at least 4.5:1, and if it is for an older user group, for example, 7:1 is a more suitable choice.
  • step S620 may be performed.
  • the preset condition may be that the contrast is less than the first threshold and greater than the second threshold. That is, the contrast between the text color and the background color is greater than the first threshold, or less than the second threshold, and the first threshold is greater than the second threshold, and step S620 may be performed.
  • the first threshold may be 18:1
  • the second threshold may be 3:1 or 4.5:1.
  • the preset condition may also be that the contrast between the text color and the background color is greater than the second threshold.
  • the color of the background of the text area can be determined. This process is also called intelligent color picking of the text area.
  • the background of the text area can be a solid color background or a gradient background. Use a solid color background, that is, the entire background color in the target image can be the same. Using a gradient background, you can determine the color of one or more points in the color of the gradient background of the text area, such as the color of any point, the color of the two end points, or the color of the key points at both ends.
  • the RGB color space is suitable for the display of colors. Therefore, the color of the background obtained through the intelligent color picking of the text area can be represented by the RGB color space.
  • the background color and text color RGB are normalized, that is, the maximum value of R, G, B is set to 1, and the calculation of the background color and text color R, G, B can simplify the calculation.
  • the contrast between the background color and the text color can be calculated. Through calculation, it can be determined whether the text color and the background color meet the preset conditions.
  • the contrast between the text color and the background color satisfies the preset condition, which may be that the contrast between the text color and the solid color background color or the color of one or more points in the gradient background color meets the preset condition.
  • Step S620 generating a color scale.
  • the color space of the displayed text color can be converted from the RGB color space to the HSV color space.
  • H, S, V segment change the color gradation of text color can be generated.
  • the color space of the displayed text color can be converted from the RGB color space to the LAB color space.
  • L arithmetic change a gray scale of text color can be generated. 611 is an example of the color scale.
  • the text color can be colored or not, that is, any one or more of black, white or gray.
  • step S630 the modified text color is determined.
  • the color that meets the preset conditions in the color scale can be determined as the modified text color.
  • the contrast between each of all the colors in the color scale and the color of the background can be calculated.
  • the contrast between the color in the color scale and the color of the background can be calculated sequentially, and the color that meets the preset condition can be obtained and the calculation can be stopped.
  • the order of sequentially calculating the colors in the color scale can be random, or you can start from the text color in the target color group and calculate the color of the color scale and the background color in the direction of the two endpoints in the order of the color scale. Contrast.
  • the preset condition may be that the contrast between the text color and the background color is greater than 4.5, and among the colors that meet the preset condition in the color scale, a color whose contrast with the background color is close to 4.5 may be used as the modified text color.
  • the text image can be generated by rendering according to the modified text color.
  • the contrast between the text on the page and the color of the background is too large or too small, and the text color on the page is automatically adjusted to make the text on the page meet the readability standard.
  • the color of the background can also be adjusted so that the color of the text and the color of the background meet the contrast.
  • FIG. 7 is a schematic flowchart of a method for adjusting a texture color according to an embodiment of the present application. As shown in FIG. 7, the method 700 includes step S710 and step S720.
  • Step S710 Calculate the color difference between the texture color and the background color.
  • the color difference between the texture color and the background color can be calculated through the Euclidean distance in the CIE lab space, and the texture color and the color difference can also be calculated through the Euclidean distance in the RGB space, LCH space, and CMC l:c space.
  • the color difference between the colors of the background is not specifically limited in the embodiment of the present application.
  • step S720 the transparency of the texture color is reduced.
  • the threshold value of the color difference between the texture color and the background color is preset.
  • the transparency of the texture color can be reduced, so that the texture color does not stand out from the background and the page color is harmonious and beautiful.
  • the color matching of each component of the second page is determined, the color of the global background of the page, the color of the background of the page block, and the color of the title background as described above It can be a solid color or a gradient color.
  • the embodiments of the present application do not specifically limit this.
  • Fig. 8 is a schematic diagram of a page color matching device according to an embodiment of the present application.
  • the device 800 includes an acquisition module 810 and a processing module 820.
  • the acquiring module 810 is configured to acquire the color information of the first image in the first page, and the color information includes the proportion of the colors included in the first image;
  • the processing module 820 is configured to, according to the color information of the at least one image, Determine the color scheme of the components of the second page.
  • the component part of the second page includes at least one of the following: page global background, page block background, title background, title text, button background, button text, body text.
  • processing module 820 is specifically configured to:
  • the L value and C value in the LCH space to which the color of the global background of the page belongs are within a preset range.
  • the processing module is specifically configured to: when the color information of the first image indicates that the color system configuration of the first image is an absolute dominant color system, if the color of the global background of the page belongs to the first color system, select the second color At least one color in the series is used as the color of the page block background, where the first color series is the color series with the largest proportion among the color series to which the colors included in the first image belong, and the second color series is the The colors included in the first image belong to a color system other than the first color system; if the color of the global background of the page does not belong to the first color system, select at least one of the first color systems The color is used as the background color of the page block.
  • the processing module 820 is specifically configured to: determine the color matching of the target page element of the second page according to the color information of the first image, including: when the color information of the first image indicates the color system of the first image
  • the dual-primary color system is configured, if the color of the global background of the page belongs to the third color system, at least one color in the fourth color system is selected as the color of the page block background, and the third color system is the dual-primary color system.
  • a color system in the color system, the fourth color system is another color system in the dual main color system, and the third color system is a color system to which the color of the global background of the page belongs.
  • the processing module 820 is specifically configured to: when the color information of the first image indicates that the color system configuration of the first image is a non-primary color system, select at least one color in the fifth color system as the page component The color of the block background, where the fifth color system accounts for less than the sixth color system in the first image, and the sixth color system is the color system to which the color of the global background of the page belongs, and the first image
  • the five-color system is the color system with the largest proportion among the color systems corresponding to the colors included in the first image except for the sixth color system.
  • the processing module 820 is further configured to: the color of the page block background determined according to the color information of the first image is the first color, the color of the global background of the page is the second color, and the processing module also Used to: when the first color and the second color are complementary colors, according to the color information of the first image, update the color of the page block background to a third color, where the third color includes the seventh At least one color in the color system, the seventh color system belongs to the color system corresponding to the color included in the first image, excluding the eighth color system and the ninth color system, the eighth color The system is the color system to which the first color belongs, and the ninth color system is the color system to which the second color belongs.
  • the processing module 820 is specifically configured to select at least one color in the tenth color system as the color of the title background, where the tenth color system belongs to the color system corresponding to the color included in the first image
  • the eleventh color system is the color system to which the global background color of the page belongs
  • the twelfth color system is the page The color family to which the color of the tiled background belongs.
  • the processing module 820 is further configured to: when the title text has the title background, the color or white of the LCH space to which the color of the page block background belongs plus the third threshold is used as the title The color of the text; or when the title text does not have the title background, at least one color in the thirteenth color system is selected as the color of the title text, where the thirteenth color system belongs to the color included in the first image
  • the corresponding color system has the largest proportion except the fourteenth color system and the fifteenth color system.
  • the fourteenth color system is the color system to which the global background color of the page belongs.
  • the color system is the color system to which the color of the background of the page block belongs, and the difference between the color of the title text and the color of the background of the page block in the LCH space to which it belongs is less than the fourth threshold.
  • the processing module 820 is further configured to: select at least one color in the sixteenth color system as the color of the button background, where the sixteenth color system corresponds to the color included in the first image The color system with the largest proportion in the color system except the seventeenth color system and the eighteenth color system.
  • the seventeenth color system is the color system to which the global background color of the page belongs, and the eighteenth color system is The color family to which the color of the background of the page block belongs; or, from the colors included in the first image, select a color group that is separated from the hue angle value H value in the LCH space to which the color of the background of the page block belongs by the fifth threshold, Choose a color from the color group that is opposite to the color of the background color of the page block as the color of the button background.
  • the processing module 820 is further configured to select the color or white of the L value on the LCH space to which the button background color belongs plus a preset value as the button text color.
  • processing module 820 is also used for:
  • the color after changing the lightness value and saturation value of the background color to the LCH space by the preset offset is used as the text
  • the color of the text if the L value on the LCH space of the background color of the text is less than or equal to the sixth threshold, the lightness value on the LCH space of the background color is changed to the color or white after the preset offset As the color of the body text.
  • the processing module 820 is further configured to: calculate the contrast between the color of the main text and the color of the background where the main text is located; when the contrast between the color of the main text and the color of the background where the main text is located is less than or equal to tenth When the threshold is set, adjust the text color of the text.
  • the size of the sequence number of the above-mentioned processes does not mean the order of execution, and the execution order of each process should be determined by its function and internal logic, and should not correspond to the embodiments of the present application.
  • the implementation process constitutes any limitation.
  • the disclosed system, device, and device may be implemented in other ways.
  • the device embodiments described above are merely illustrative.
  • the division of the units is only a logical function division, and there may be other divisions in actual implementation, for example, multiple units or components may be combined It can be integrated into another system, or some features can be ignored or not implemented.
  • the displayed or discussed mutual coupling or direct coupling or communication connection may be indirect coupling or communication connection through some interfaces, devices or units, and may be in electrical, mechanical or other forms.
  • the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the objectives of the solutions of the embodiments.
  • the functional units in the various embodiments of the present application may be integrated into one processor, or each unit may exist alone physically, or two or more units may be integrated into one unit.
  • the function 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.
  • the technical solution of the present application essentially or the part that contributes to the existing technology or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including Several instructions are used to make a computer device (which may be a personal computer, a server, or a network device, etc.) execute all or part of the steps of the apparatus described in each embodiment of the present application.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (read-only memory, ROM), random access memory (random access memory, RAM), magnetic disk or optical disk and other media that can store program code .
  • the size of the sequence number of the above-mentioned processes does not mean the order of execution, and the execution order of each process should be determined by its function and internal logic, and should not correspond to the embodiments of the present application.
  • the implementation process constitutes any limitation.
  • the disclosed system, device, and method can be implemented in other ways.
  • the device embodiments described above are merely illustrative.
  • the division of the units is only a logical function division, and there may be other divisions in actual implementation, for example, multiple units or components may be combined It can be integrated into another system, or some features can be ignored or not implemented.
  • the displayed or discussed mutual coupling or direct coupling or communication connection may be indirect coupling or communication connection through some interfaces, devices or units, and may be in electrical, mechanical or other forms.
  • the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the objectives of the solutions of the embodiments.
  • the functional units in the various embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units may be integrated into one unit.
  • the function 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.
  • the technical solution of the present application essentially or the part that contributes to the existing technology or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including Several instructions are used to make a computer device (which may be a personal computer, a server, or a network device, etc.) execute all or part of the steps of the methods described in the various embodiments of the present application.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (read-only memory, ROM), random access memory (random access memory, RAM), magnetic disk or optical disk and other media that can store program code .

Abstract

一种页面配色的方法，该方法包括：获取第一页面中的第一图像的颜色信息，该颜色信息包括所述第一图像包括的颜色的占比；根据该至少一幅图像的颜色信息，确定第二页面的目标页面元素的配色，该目标页面元素包括以下至少一项：页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。根据本页面配色的方法，通过第一图像中的颜色信息，可以实现第二页面的目标页面元素的自动配色，提高了页面配色的效率，简化了页面设计的过程，且使得配色后的整个页面前后景明确区分，文字可读性强，页面和谐美观。

Description

页面配色的方法、装置、存储介质和芯片
本申请要求于2019年12月31日提交中国专利局、申请号为201911422117.8、申请名称为“页面配色的方法、装置、存储介质和芯片”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及多媒体领域，并且更具体地，涉及一种页面配色的方法、装置、存储介质和芯片。
背景技术
随着智能终端设备的大范围普及，页面设计应用广泛，例如，超文本标记语言(hypertext marked language,HTML)页面的设计。
在设计该页面时，设计人员通常会事先对该页面进行排版，配色等，每一个页面的组成部分的色彩均需要进行单独设计，因此，在设计页面时会耗费大量的时间、效率较低。
因此，亟需一种页面自动配色的方法。
发明内容
本申请提供一种页面配色方法、装置、存储介质和芯片，能够对页面的各个组成元素进行自动配色，提高了页面设计的效率。
第一方面，提供了一种页面配色的方法，该方法包括：获取第一页面中的第一图像的颜色信息，该颜色信息包括该第一图像包括的颜色的占比；根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，该目标页面元素包括以下至少一项：页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
上述技术方案根据第一页面中第一图像的颜色信息，能够实现对第二页面的各个组成元素的自动配色，提高了页面设计的效率，简化了页面设计的过程，且使得配色后的整个页面前后景明确区分，文字可读性强，页面和谐美观。
可选地，该第一页面和第二页面可以是相同的页面，也可以是不同的页面。
结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：选择该第一图像包括的颜色中的占比最大的颜色作为该页面全局背景的颜色；或者选择该第一图像的第一比例处的颜色作为过渡色，从该第一图像包括的颜色占比最大的前三个色系中选择与该过渡色最接近的颜色作为页面全局背景的颜色。
该技术方案可使得第二页面的页面全局背景色与第一页面的颜色保持一致，使得第二页面的配色和谐美观。
结合第一方面，在第一方面的一些实现方式中，该页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值；和/或该页面全局背景 的颜色所属LCH空间上的饱和度值小于或等于第二阈值。
该技术方案通过设置全局背景色该LCH空间上的明度值和饱和度值在阈值之内，可保证页面的整体基调统一，避免出现某个颜色过于突出，导致页面配色不和谐的现象。
结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：当该第一图像的颜色信息指示该第一图像的色系配置为绝对主色系时，若该页面全局背景的颜色属于第一色系，则选择该第二色系中的至少一个颜色作为该页面分块背景的颜色，其中，该第一色系是该第一图像包括的颜色所属于的色系中占比最大的色系，该第二色系是该第一图像包括的颜色所属于的色系中除该第一色系以外的色系；若该页面全局背景的颜色不属于该第一色系，则选择该第一色系中的至少一个颜色作为该页面分块背景的颜色。
该技术方案根据将取色结果中占比较大的颜色作为页面分块背景的颜色，并且与页面全局背景的颜色区分开来，使得页面前后景明确，配色和谐。
结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：当该第一图像的颜色信息指示该第一图像的色系配置为双主色系时，若该页面全局背景的颜色属于第三色系，则选择第四色系中的至少一个颜色作为该页面分块背景的颜色，该第三色系是该双主色系中的一个色系，该第四色系是该双主色系中的另一个色系，且该第三色系是该页面全局背景的颜色所属于的色系。
该技术方案根据将取色结果中占比较大的颜色作为页面分块背景的颜色，并且与页面全局背景的颜色区分开来，使得页面前后景明确，配色和谐。
结合第一方面，在第一方面的一些实现方式中，其特征在于，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：当该第一图像的颜色信息指示该第一图像的色系配置为无主色系时，选择第五色系中的至少一个颜色作为该页面分块背景的颜色，其中，该第五色系的在该第一图像中的占比小于第六色系，该第六色系是该页面全局背景的颜色所属于的色系，且，该第五色系是该第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。
该技术方案根据将取色结果中占比较大的颜色作为页面分块背景色，并且与页面全局背景色区分开来，使得页面前后景明确，配色和谐。
结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息确定的该页面分块背景的颜色为第一颜色，该页面全局背景的颜色为第二颜色，以及该方法还包括：当该第一颜色和该第二颜色为互补色时，根据该第一图像的颜色信息，将该页面分块背景的颜色更新为第三颜色，其中，该第三颜色包括第七色系中的至少一个颜色，该第七色系属于该第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系，该第八色系是该第一颜色所属于的色系，该第九色系是该第二颜色所属于的色系。
该技术方案避免了页面全局背景色和页面分块背景色反差太大，引起页面配色不和谐的现象。
结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：选择第十色系中的至少一个颜色作为该标题背景的颜色，其中，该第十色系是属于该第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系，该第十一色系是该页面全局背景的颜色所属于的色系，该第十二色系是该页面分块背景的颜色所属于的色系。
该技术方案中，选择除页面全局背景色和分块背景色之外占比最大的色系作为标题的背景色，使得页面前后景明确区分，配色和谐美观。
结合第一方面，在第一方面的一些实现方式中，该方法还包括：当该标题文字有该标题背景时，则将该页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为该标题文字的颜色；或者当该标题文字没有该标题背景时，选择第十三色系中的至少一个颜色作为该标题文字的颜色，其中，该第十三色系是属于该第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系，该第十四色系是该页面全局背景的颜色所属于的色系，该第十五色系是该页面分块背景的颜色所属于的色系，该标题文字的颜色与该页面分块背景的颜色在所属LCH空间上的明度值之间的差值小于第四阈值。
该技术方案可实现页面组成部分的标题色的自动配色，使得标题文字可读性达标，配色和谐。
结合第一方面，在第一方面的一些实现方式中，其特征在于，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：选择第十六色系中的至少一个颜色作为该按钮背景的颜色，其中，该第十六色系是属于该第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系，该第十七色系是该页面全局背景的颜色所属于的色系，该第十八色系是该页面分块背景的颜色所属于的色系；或者从该第一图像包括的颜色中选择与该页面分块背景的颜色所属LCH空间上的色相角度值相距第五阈值的颜色组，从该颜色组中选择与该页面分块背景的颜色冷暖属性相反的颜色作为该按钮背景的颜色。
该技术方案使得按钮背景与页面分块背景反差较大，使得该按钮醒目，容易引起用户的注意。
结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：选择按钮背景色所属LCH空间上明度值加上预设值之后的颜色或白色作为按钮文字色。
该技术方案将按钮文字色与按钮背景色区分开来，使得按钮文字满足可读性。
结合第一方面，在第一方面的一些实现方式中，其特征在于，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：若该正文文字所在的背景的颜色所属LCH空间上的明度值大于第六阈值，则将该背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为该正文文字的颜色；若正文文字所在背景的颜色所属LCH空间上的明度值小于或等于第六阈值，则将该背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为该正文文字的颜色。
该技术方案实现页面正文文字部分的自动配色，并将正文文字色与正文所在的背景明确区分，满足文字的可读性。
结合第一方面，在第一方面的一些实现方式中，该方法该包括：计算该正文文字的颜色与该正文文字所在背景的颜色的对比度；当该正文文字的颜色与该正文文字所在背景的颜色的对比度小于或等于第七阈值时，调整该正文文字的颜色。
该技术方案通过调整正文文字色与正文所在的背景色之间的对比度满足预设值，使得正文文字色与正文所在的背景明确区分，满足文字的可读性。
第二方面，提供了一种页面配色的装置，该装置包括：获取模块，获取第一页面中的 第一图像的颜色信息，该颜色信息包括该第一图像包括的颜色的占比；处理模块，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，该目标页面元素包括以下至少一项：页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
结合第二方面，在第二方面的一些实现方式中，该处理模块具体用于：选择该第一图像包括的颜色中的占比最大的颜色作为该页面全局背景的颜色；或者选择该第一图像的第一比例处的颜色作为过渡色，从该第一图像包括的颜色占比最大的前三个色系中选择与该过渡色最接近的颜色作为页面全局背景的颜色。
结合第二方面，在第二方面的一些实现方式中，该页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值；和/或该页面全局背景的颜色所属LCH空间上的饱和度值小于或等于第二阈值。
结合第二方面，在第二方面的一些实现方式中，该处理模块具体用于：当该第一图像的颜色信息指示该第一图像的色系配置为绝对主色系时，若该页面全局背景的颜色属于第一色系，则选择该第二色系中的至少一个颜色作为该页面分块背景的颜色，其中，该第一色系是该第一图像包括的颜色所属于的色系中占比最大的色系，该第二色系是该第一图像包括的颜色所属于的色系中除该第一色系以外的色系；若该页面全局背景的颜色不是不属于该第一色系，则选择该第一色系中的至少一个颜色作为该页面分块背景的颜色。
结合第二方面，在第二方面的一些实现方式中，该处理模块具体用于：根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：当该第一图像的颜色信息指示该第一图像的色系配置为双主色系时，若该页面全局背景的颜色属于第三色系，则选择第四色系中的至少一个颜色作为该页面分块背景的颜色，该第三色系是该双主色系中的一个色系，该第四色系是该双主色系中的另一个色系，且该第三色系是该页面全局背景的颜色所属于的色系。
结合第二方面，在第二方面的一些实现方式中，该处理模块具体用于：当该第一图像的颜色信息指示该第一图像的色系配置为无主色系时，选择第五色系中的至少一个颜色作为该页面分块背景的颜色，其中，该第五色系的在该第一图像中的占比小于第六色系，该第六色系是该页面全局背景的颜色所属于的色系，且，该第五色系是该第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。
结合第二方面，在第二方面的一些实现方式中，该处理模块还用于：根据该第一图像的颜色信息确定的该页面分块背景的颜色为第一颜色，该页面全局背景的颜色为第二颜色，以及该处理模块还用于：当该第一颜色和该第二颜色为互补色时，根据该第一图像的颜色信息，将该页面分块背景的颜色更新为第三颜色，其中，该第三颜色包括第七色系中的至少一个颜色，该第七色系属于该第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系，该第八色系是该第一颜色所属于的色系，该第九色系是该第二颜色所属于的色系。
结合第二方面，在第二方面的一些实现方式中，该处理模块具体用于：选择第十色系中的至少一个颜色作为该标题背景的颜色，其中，该第十色系是属于该第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系，该第十一色系是该页面全局背景的颜色所属于的色系，该第十二色系是该页面分块背景的颜色所属于的色系。
结合第二方面，在第二方面的一些实现方式中，该处理模块还用于：当该标题文字有 该标题背景时，则将该页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为该标题文字的颜色；或者当该标题文字没有该标题背景时，选择第十三色系中的至少一个颜色作为该标题文字的颜色，其中，该第十三色系是属于该第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系，该第十四色系是该页面全局背景的颜色所属于的色系，该第十五色系是该页面分块背景的颜色所属于的色系，该标题文字的颜色与该页面分块背景的颜色在所属LCH空间上的明度值值之间的差值小于第四阈值。
结合第二方面，在第二方面的一些实现方式中，该处理模块还用于：选择第十六色系中的至少一个颜色作为该按钮背景的颜色，其中，该第十六色系是属于该第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系，该第十七色系是该页面全局背景的颜色所属于的色系，该第十八色系是该页面分块背景的颜色所属于的色系；或者从该第一图像包括的颜色中选择与该页面分块背景的颜色所属LCH空间上的色相角度值H值相距第五阈值的颜色组，从该颜色组中选择与该页面分块背景的颜色冷暖属性相反的颜色作为该按钮背景的颜色。
结合第二方面，在第二方面的一些实现方式中，该处理模块还用于：选择按钮背景色所属LCH空间上明度值加上预设值之后的颜色或白色作为按钮文字色。
结合第二方面，在第二方面的一些实现方式中，该处理模块还用于：若该正文文字所在的背景的颜色所属LCH空间上的明度值大于第六阈值，则将该背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为该正文文字的颜色；若正文文字所在背景的颜色所属LCH空间上的明度值小于或等于第六阈值，则将该背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为该正文文字的颜色。
结合第二方面，在第二方面的一些实现方式中，该处理模块还用于：计算该正文文字的颜色与该正文文字所在背景的颜色的对比度；当该正文文字的颜色与该正文文字所在背景的颜色的对比度小于或等于第十阈值时，调整该正文文字色。
第三方面，提供一种页面配色的装置，包括：至少一个处理器，当程序指令在该至少一个处理器中执行时，使得该装置执行如第一方面中任一项所述的方法。
第四方面，提供一种计算机可读存储介质，包括计算机程序，当其在计算机设备上运行时，使得所述计算机设备中的处理单元执行如第一方面中任一项所述的方法。
第五方面，提供一种芯片，该芯片包括存储器和处理器，该存储器用于存储计算机指令，该处理器用于执行该存储器中存储的计算机指令，以执行如第一方面中任一项所述的方法。
附图说明
图1是本申请实施例的页面配色的方法的示意性流程图。
图2是本申请实施例的色系划分的示意图。
图3是本申请实施例的划分第一图像包括的色系类型的示意图。
图4是本申请实施例的页面配色的示意图。
图5是本申请实施例的页面配色的又一示意图。
图6是本申请实施例的调整文字色的方法的示意性流程图。
图7是本申请实施例的背景配色的示意性流程图。
图8是本申请实施例的页面配色的装置的示例图。
具体实施方式
下面将结合附图，对本申请中的技术方案进行描述。
本申请的技术方案，可以应用于各种通过屏幕(或者说，显示器)向用户呈现用户界面的设备，例如，智能手机、平板电脑、个人电脑等。为了便于理解和说明，在以下说明中，将上述设备统称“终端设备”。
其中，用户界面(user interface,UI)亦称使用者界面，是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。用户界面包括实现用户与系统信息交换的软件、硬件部分。软件部分包括用户与系统信息交换的约定、操作命令等处理软件，硬件部分包括输入装置和输出装置(包括但不限于显示屏、触摸屏、软键盘、虚拟控件、物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆、摄像头，以及未来技术能够实现的输入输出装置)。用户界面目的在于使得用户能够方便有效率明确地去操作硬件以达成交互，完成所希望借助硬件完成之工作，用户界面定义广泛，凡参与人类与机械的信息交流的领域都存在着用户界面。
在本申请实施例中，用户界面可以包括图形化的用户界面，即图形用户界面(graphic user interface,GUI)，是当今世界最常见的一种用户界面，例如手机在通电状态下显示的界面即为图形用户界面，用户通过显示的图形(图标)、虚拟键盘(软键盘)、虚拟鼠标等来与设备硬件进行交互。上述系统和用户之间进行交互和信息交换的信息可以包括听觉信息、视觉信息、触觉信息、动作信息、气味信息等等。用户可以通过用户界面直接与系统进行信息交换，也可以借助包括触控笔，触控手套等在内的设备与系统进行交互。
应理解，以上列举的用户界面仅为本申请的一个实施例，本申请并不限定于此，其他能够通过屏幕等呈现给用户以供用户执行操作的用户界面均落入本申请的保护范围内。
此外，本申请的各个方面或特征可以实现成方法、装置或使用标准编程和/或工程技术的制品。本申请中使用的术语"制品"涵盖可从任何计算机可读器件、载体或介质访问的计算机程序。例如，计算机可读介质可以包括，但不限于:磁存储器件(例如，硬盘、软盘或磁带等)，光盘(例如，压缩盘(compact disk,CD)、数字通用盘(digital versatile disk，DVD)等)，智能卡和闪存器件(例如，可擦写可编程只读存储器(erasable programmable read-only memory,EPROM)、卡、棒或钥匙驱动器等)。另外，本文描述的各种存储介质可代表用于存储信息的一个或多个设备和/或其它机器可读介质。术语"机器可读介质"可包括但不限于，无线信道和能够存储、包含和/或承载指令和/或数据的各种其它介质。
在介绍本申请实施例之前，首先对本申请所涉及的色彩空间做一定的介绍。
实现颜色的合理匹配是图文设计排版中重要的一部分。由于光线可以被反射、吸收或发射，因此人眼可以感知颜色。颜色的感知是人的主观感受。可以通过色彩空间对图片中的颜色进行描述。色彩空间是描述用一组数值来描述颜色的数学模型。色彩空间也可以称为颜色空间、颜色模型、色彩模型、色彩系统等。通过颜色空间，可以对颜色加以说明。
常见的色彩模型有：红-绿-蓝(red,green,blue，RGB)色彩空间，色相-饱和度-明度(hue,saturation,value，HSV)色彩空间，国际照明委员会(commission internationale de L'Eclairage，CIE)XYZ色彩空间，CIE Lab LCH色彩空间等。
RGB色彩空间还可以用一个三维的立方体来描述。R、G、B分别为笛卡尔坐标系的 三个坐标轴，该立方体一个顶点位于坐标原点。该顶点相邻的三条边位于坐标轴上。任何一种色光都可由R、G、B三基色按不同的比例相加、混合而成，当三基色分量都为0(最弱)时，混合色光为黑色；当三基色分量都为最强时，混合色光为白色。
HSV模型中颜色的参数分别是：色相(hue，H)，饱和度(saturation，S)，明度(value，V)。色相又称色调，是颜色感觉最基本的特征。H取值范围是0°至360°。饱和度是指色彩的鲜艳程度，也称色彩的纯度。S为一比例值，范围从0到1，它表示成所选颜色的纯度和该颜色最大的纯度之间的比率，S取值越大，表示色彩越纯，取值越小，表示色彩越灰。V表示色彩的明亮程度，范围从0到1。V等于0表示圆锥的底部定点，也就是黑色，V等于1表示圆锥的顶面，当V＝1并且S＝0时表示纯白色。
CIE XYZ色彩空间，又称为CIE 1931色彩空间，是一种与RGB相关的相像的基色系统，但更适用于颜色的计算。图中表示了从波长400纳米(nanometer，nm)(紫色)到700nm(红色)之间的XYZ三基色值，这是一个曲面向原点连线，形成的锥体，而且所有的XYZ刺激值，都落在这个正XYZ象限的椎体内。坐标轴原点，相当于没有光照的黑色。曲线为光谱轨迹，在光谱轨迹上的颜色，代表了该颜色能达到的最大饱和度。
CIE Lab色彩空间是一种基于生理特征的颜色系统。这也就意味着，CIE Lab色彩空间是用数字化的方法来描述人的视觉感应。Lab颜色空间中的用L分量用于表示像素的亮度(light)，取值范围是[0,100]，表示从纯黑到纯白，亮度也可以称为明度；a表示从红色到绿色的范围，取值范围是[127,-128]；b表示从黄色到蓝色的范围，取值范围是[127,-128]。
Lab色彩空间与LCH色彩空间色度图相同，但坐标不同。LCH色彩空间中，L表示明度值；C表示饱和度值及H表示色相角度值。
本申请实施例中，可以在不同的色彩空间中确定两个颜色之间的色差。色差即色彩差异，可以用于表示色彩的近似程度。在色彩空间中，色差也可以称为色彩的欧氏距离，可以用ΔE表示。在RGB色彩空间中，色差可以表示为：
Figure PCTCN2020135179-appb-000001
其中R 1、R 2、G 1、G 2、B 1、B 2分别表示色彩空间中的两点的红、绿、蓝的值。
在Lch色彩空间，色差可以表示为：
Figure PCTCN2020135179-appb-000002
其中，ΔL＝L 1-L 2；
Figure PCTCN2020135179-appb-000003
Figure PCTCN2020135179-appb-000004
ΔC ab＝C 1-C 2；
Figure PCTCN2020135179-appb-000005
Δa＝a 1-a 2；
Δb＝b 1-b 2；
S L＝1；
S C＝1+K 1C 1；
S H＝1+K 2C 1；
K C和K H一般取1，K L、K 1、K 2在不同应用场景取值不同，L 1、L 2、a 1、a 2、b 1、b 2分别表示色彩空间中的两点的L、a、b的值。。
在Lab色彩空间，色差可以表示为：
Figure PCTCN2020135179-appb-000006
其中，L 1、L 2、a 1、a 2、b 1、b 2分别表示色彩空间中的两点的L、a、b的值。
在CMC(l:c)色彩空间中，色差可以表示为：
Figure PCTCN2020135179-appb-000007
其中，
Figure PCTCN2020135179-appb-000008
Figure PCTCN2020135179-appb-000009
S H＝S C(FT+1-F) ；
Figure PCTCN2020135179-appb-000010
Figure PCTCN2020135179-appb-000011
L 1、L 2、C 1、C 2、h 1、h 2分别表示色彩空间中的两点的L、C、h的值。
在不同的色彩空间中计算的色差与人眼的视觉近似程度不同。在Lab空间计算的色差与人眼观察的色差的近似度为75％，在LCH空间计算的色差与人眼观察的色差的近似度为85％，在CMC(l；c)空间计算的色差与人眼观察的色差的近似度为95％。
在一些服务业务中，例如，智能手机应用程序的云服务业务中，为了活动的运营或者新商品的介绍，会嵌入一些HTML页面，很多这种页面，设计的时候为了情感化的需求，会大胆的进行配色。一般这种HTML页面会用一个横幅Banner作为跳转入口，而HTML页面的顶部有个设计与Banner入口相似的制定封面，下面才是具体的页面内容，一般这里的页面内容是事先通过设计人员设计好的，比如页面的版式、配色等，每个页面都需要设计人员逐个配色，影响了页面设计的效率。
本申请提供一种页面配色的方法、装置计算机可读存储介质和芯片，能够实现页面各个组成部分的自动配色，提高页面配色的效率且页面和谐美观。
图1是本申请实施例的页面配色的方法的示意性流程图。如图1所示，该方法100包括步骤110和步骤120。
步骤110，获取第一页面中第一图像的颜色信息，该颜色信息包括所述第一图像包括的颜色的占比。
该第一图像可以是第一页面中的至少一幅图像，也可以是第一页面的整个页面，本申请实施例对此不做具体限定。示例性的，终端设备获取第一页面中的至少一幅图像的颜色 信息，该颜色信息可以是第一页面中的至少一幅图像的各颜色所属的色系。一种获取色系的可能实现的方式是，可以根据第一页面中的至少一幅图像中各像素的颜色值，根据各像素的颜色值统计各个像素所在的色系，计算各色系在该图像中的占比情况。另一种获取色系可能实现的方式是，将第一页面中的至少一幅图像划分成各个颜色区域，根据各个颜色区域的占比情况，计算该颜色区域所属色系在该图像中的占比情况。下文将结合具体实施例描述该获取色系的方式，此处暂不详述。
该颜色信息还可以是第一页面中的至少一幅图像中各颜色的色相值，本申请实施例对此不做具体限定。
步骤120，根据所述至少一幅图像的颜色信息，确定第二页面的目标页面元素的配色。
终端设备根据该第一页面中的至少一幅图像的颜色信息，对第二页面的各个组成部分进行自动配色，完成第二页面的内容部分的配色。比如，根据顶部封面图的颜色信息对HTML5长图页面进行自动配色；又如，终端设备也可以根据Banner横幅的颜色信息，对HTML页面的内容部分进行自动配色；或者根据任意一幅图像的颜色实现对另一个页面或图像的组成部分的自动配色，本申请实施例对此不做具体限定。
可选地，该第一页面和第二页面可以是同一个页面。
作为一个示例，终端设备可以对该第一页面中的至少一幅图像中的像素进行取色分析，如，计算该图像中各个颜色的色相值，统计各个颜色所属色系的区域在该图像中的占比情况，根据各个颜色的占比情况确定第二页面的内容部分的配色。该第二页面的组成部分包括但不限于：页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。该第二页面可以包含上述组成部分中的至少一个，也可以包含上述内容部分中的至少两个。
其中，页面全局背景表示第二页面的整体背景；页面分块背景表示第二页面中局部分块的背景，应理解，页面中可能会存在多个局部背景；标题背景表示含有标题的背景，该标题背景的颜色有别于页面全局背景的颜色和页面分块背景的颜色，当没有该标题背景时，标题直接显示在页面全局背景或页面分块背景上、或两个页面分块背景的交界线上、或页面全局背景与页面分块背景的交界线上；标题文字的颜色表示标题部分的文字颜色；按钮背景表示含有按钮的背景，当没有该按钮背景时，该按钮直接显示在页面全局背景或页面分块背景上；按钮文字色表示按钮部分的文字或图案颜色；正文文字色表示正文部分的颜色。
第二页面的内容部分还可以包括纹理色，当该纹理色与背景色的色彩距离即色差不满足预设的条件时，调整该纹理色的纹理透明度，使得纹理与背景和谐。应理解，该背景色可以是页面全局背景的颜色，也可以是页面分块背景的颜色，甚至是标题背景的颜色或按钮背景的颜色，本申请实施例对此并不限定。
根据本申请实施例提供的页面配色的方法，通过第一页面中的至少一幅图像的颜色信息，就可以确定第二页面的内容部分的配色，能够实现页面内容部分的自动配色，提高页面配色的效率，简化了页面设计的过程，且使得配色后的整个页面前后景明确区分，文字可读性强，页面和谐美观。
图2是本申请实施例的色系划分的示意性流程图。如图2所示，该色系划分包括步骤S210至S250。
步骤S210，遍历每个像素，依次取出颜色x。
终端设备遍历顶部封面图中的各个像素，依次记录各个像素的颜色x。
步骤S220，遍历每个色系，依次取出颜色y。
终端遍历每个色系，该色系可以指按照色相环划分的色系，如十色相环、十二色相环、十六色相环，十八色相环以及二十四色相环等等，本申请实施例对此并不限定。
步骤S230，判断颜色x与颜色y的色相相距是否小于20度。
依次判断步骤S210取出的颜色x与步骤S220中取出的颜色y的色相在色相环中的差距是否小于20度。比如，从S210中取出一个颜色x1，将该颜色x1与从S220中取出的一个颜色y2进行比较，若颜色x1与颜色y1的色相在色相环中的差距大于或等于20度，则将该颜色x1与从S220中取出的颜色y2进行比较，直至该颜色x1与颜色y中的某个颜色yn的色相相距小于20度，则转入步骤S240。然后进行下一个颜色的判断，重复上述过程。
步骤S240，将颜色x插入颜色y所在的色系。
若颜色x中的某个颜色xi与颜色y中的某个颜色yi的色相相距小于20度，则将该颜色xi插入颜色yi所在的色系中。作为一个示例，若颜色x1与颜色yn的色相相距小于20度，则将颜色x1插入颜色yn所在的色系。
步骤S250，判断颜色x中是否还有剩余颜色。
若颜色x中还有剩余颜色，则重复进行步骤S210至S250；若颜色x中没有剩余颜色，则结束色系划分。该步骤可以保证该第一页面用于取色的至少一幅图像的颜色全部被划分至某个色系中，完成全部的取色过程。
根据取色结果，将第一页面中该至少一幅图像的类型划分成多种。图3是本申请实施例的一种划分图像类型的方式。如图3所示，可以将取色结果分为三种类型，分别是绝对主色系、双主色系和无主色系。若将该取色结果中占比最大的三个色系分别称为第一色系、第二色系和第三色系，则绝对主色系表示第一色系的占比大于或等于0.5，且该第一色系的占比大于或等于第二色系占比的0.1；双主色系表示第一色系与第二色系的占比之和大于或等于0.8，占比之差小于或等于0.1；无主色系表示色系的占比不满足上述绝对主色系和双主色系的情况。
可选地，可以将第一页面中该至少一幅图像的三种类型形成对应的颜色色板，用于第二页面的自动配色。
对于该第一页面中该至少一幅图像属于绝对主色系的情况，在进行第二页面配色时，大面积的背景色(如页面全局背景、页面分块背景)可以尽量使用主色系的颜色，而对于页面上的小元素(如标题、按钮等)则尽量使用第二色系或第三色系中的颜色。可选地，页面上的小元素优先使用第二色系、第三色系中与主色系(即第一色系)在色相上相距较远的颜色。
对于该第一页面中该至少一幅图像属于双主色系的情况，在进行第二页面配色时，大面积的背景色(如页面全局背景、页面分开背景)可以尽量使用两个主色系即第一色系和第二色系的颜色，而对于页面上的小元素(如标题、按钮等)尽量使用第三色系的颜色，并可以参杂第一色系或第二色系的颜色。
对于该第一页面中该至少一幅图像属于无主色系的情况，在进行第二页面配色时，尽量使用到所有第一色系、第二色系和第三色系的颜色，不区分页面的大面积部分和小元素部分。
图4是本申请实施例的页面配色的示意图。如图4所示，该第二页面中的目标页面元素至少包括页面全局背景的颜色和页面分块背景的颜色。当该页面全局背景是非过渡性背景时，选择第一图像包括的颜色中的占比最大的第一色系中的至少一个颜色作为页面全局背景的颜色。同时，对该颜色在LCH空间上的L值和C值设定一个预设值，当该颜色的L和C值不满足该预设值时，对该颜色进行调整，以使得整个页面的基调和谐美观，避免页面中出现某个颜色特别突兀的情况。
对于过渡类型的页面全局背景，该过渡类型的页面全局背景表示该全局背景是由第一图像过渡而来，与图片要求有一定的联系性，针对此类背景的颜色，取过渡方向图片的1/4处的颜色，作为过渡主色，从之前的第一页面中第一图像的取色色板中选择最接近的颜色作为该背景的颜色。同时，对该颜色在LCH空间上的L值和C值设定一个预设值，当该颜色的L和C值不满足该预设值时，对该颜色进行调整，以使得整个页面的基调和谐美观，避免页面中出现某个颜色特别突兀的情况。
页面全局背景的颜色和页面分块背景的颜色作为页面中的大面积的颜色，可以尽量去使用主色系的颜色。
对于该第一页面中该至少一幅图像是绝对主色系的，当判断到页面全局背景的颜色是属于主色系的，即页面全局背景的颜色为第一色系，则选择剩余色系中占比最大的色系中的至少一个颜色作为页面分块背景的颜色，即选择第二色系作为页面分块背景的颜色，页面分块背景区域可以只有一个，也可以有多个。如果判断到页面全局背景的颜色不是第一色系，则选择第一色系中的至少一个颜色作为页面分块背景的颜色。应理解，一个色系中可以只有一个色板，也可以包含有多个色板。当色系中包含有多个颜色色板时，多个页面分块背景的颜色可以选择该色系中的同一个颜色色板，也可以选择该色系中不同的颜色色板。该方案使得最终的页面配色和第一页面中的该至少一幅图像的配色基本一致，页面色彩比较和谐美观。
对于该第一页面中该至少一幅图像是双主色系的，如果判断到页面全局背景的颜色是属于主色系的，则选择主色系中的另一个作为页面分块背景的颜色，即当页面全局背景的颜色属于第一色系时，选择第二色系中的至少一个颜色作为页面分块背景的颜色，当页面全局背景的颜色属于第二色系时，选择第一色系中的至少一个颜色作为页面分块背景的颜色。应理解，一个色系中可以只有一个色板，也可以包含有多个色板。当色系中包含有多个颜色色板时，多个页面分块背景的颜色可以选择该色系中的同一个颜色色板，也可以选择该色系中不同的颜色色板。该方案使得最终的页面配色和该第一页面中该至少一幅图像的配色基本一致，页面色彩比较和谐美观。
如果主色系只有一个颜色色板，则取页面全局背景的颜色在LCH空间上的L值上进行变化处理，比如L±15，得到该页面分块背景的颜色。可选地，需验证该页面全局背景的颜色和该页面分块背景的颜色是否是互补色，如果是互补色，则选择页面全局背景的颜色之外的色系中占比最大的色系的颜色作为页面分块背景的颜色，如果该色系只有一个颜色色板，则选择页面全局背景的颜色在LCH空间上的L值进行变化处理，比如L±15，得到该页面分块背景的颜色。
该方案使得最终的页面配色和该第一页面中该至少一幅图像的配色基本一致，页面色彩比较和谐美观。
对于该第一页面中该至少一幅图像是无主色系的，则选择不同于页面全局背景的颜色 的第二色系中的至少一个颜色作为页面分块背景的颜色背景的颜色。同时，需验证页面全局背景的颜色和该第二色系是否是互补色，如果是互补色，则选择第三色系中的颜色作为页面分块背景的颜色背景的颜色。
该方案使得最终的页面配色和该第一页面中该至少一幅图像的配色基本一致，避免页面中相邻的颜色出现反差过大导致页面色彩不和谐的现象，使得页面色彩和谐美观。
可选地，当页面分块背景的颜色中存在二级分块背景的颜色时，即分块背景中又存在分块背景时，或者页面分块背景存在装饰色的情况时，可选择将页面分块背景的颜色进行简单的颜色调整得到该二级分块背景的颜色或装饰色，比如，对该页面分开背景的颜色在LCH空间上的L值适当变化，得到该二级分块背景的颜色或装饰色。
图5是本申请实施例的页面配色的又一示意图。如图5所示，该第二页面至少包括页面全局背景的颜色、页面分块背景的颜色、标题背景的颜色、标题文字色、按钮背景的颜色、按钮文字色和正文文字色(图中未示出)。
其中，页面全局背景的颜色和页面分块背景的颜色可使用上文中所述的方法进行配色，此处不再赘述。在本申请实施例中，页面内容部分的标题可分为三类，分别是无分块背景的颜色的平行标题1、有分块背景的颜色的平行标题2和有分块背景的颜色的重叠标题。图5中仅是示意性的划分方式，在实际的第二页面的设计中还可以有其他的划分方式，本申请实施例对此不做具体限定。
本申请实施例的标题部分可以设计有标题背景的颜色，也可以没有标题背景的颜色。对于标题部分含有标题背景的颜色的情况，选择除去页面全局背景的颜色和页面分块背景的颜色之外剩余色系中占比最大的色系中的颜色作为标题背景的颜色。该标题背景的颜色可能属于第三色系，也可能属于第二色系。对于有分块背景的平行标题2、有分块背景的重叠标题，当第一色系与第二色系为互补色系时，第三色系中的颜色作为页面分块背景的颜色，此时选择第二色系作为标题背景的颜色，当第一色系与第二色系部位互补色系时，第二色系中的颜色作为页面分块背景的颜色，此时选择第三色系中的颜色作为标题背景的颜色；对于无分块背景的颜色的平行标题1，当第二色系与页面全局背景的颜色为互补色时，选择第三色系中的颜色作为平行标题1的标题背景的颜色，当第二色系与页面全局背景的颜色不为互补色时，选择第二色系中的颜色作为平行标题1的标题背景的颜色。同时，需对平行标题1和平行标题2在LCH空间上的L值设定一个预设值，当不满足该预设值时，对该标题背景的颜色进行调节，使得该标题背景的颜色与页面全局背景的颜色和页面分块背景的颜色之间存在一定的差值，从而使得页面前后景明确区分，配色和谐美观。
可选地，当具有多个标题背景时，可以选择色系中不同的颜色色板作为标题背景的颜色，也可以选择色系中相同的颜色色板作为标题背景的颜色。
标题文字色的配色分为两种情况，第一种情况，该标题有标题背景；第二种情况，该标题没有标题背景，标题文字直接显示在页面全局背景或页面分块背景的颜色中。对于第一种情况，该标题有标题背景，若上文中对于第一页面的第一图像中的颜色取色结果中的占比最大的前三个色系中还有色系未被用到，则选择该未被用到的色系作为标题文字色，但需要验证标题文字的可读性，该标题文字色与标题背景的颜色在所属LCH空间中的L值之间的差值应大于预设值，若该差值小于或等于该预设值，则调整该标题文字色，使得该L值之间的差值大于预设值，例如该预设值可以是40；若该标题文字色与标题背景的颜色在所属LCH空间上的H值是互补的，即H值之间的差值大于或等于150，则调整页 面分块背景的颜色的值，如将该页面分块背景的颜色所属LCH空间上的L值加上一个预设值后得到该标题文字的颜色，若变化后的L值大于90，则选择白色作为标题文字的颜色。若第一页面的第一图像中的颜色取色结果中的占比最大的前三个色系中均已被用到，则调整页面分块背景的颜色的值，如将该页面分块背景的颜色所属LCH空间上的L值加上一个预设值后得到该标题文字的颜色，若变化后的L值大于90，则选择白色作为标题文字的颜色。
对于第二种情况，该标题文字色没有标题背景，若第一页面的第一图像中的颜色取色结果中占比最大的前三个色系中还有色系未被使用，则选择剩下的色系作为标题文字色，例如，第一色系已经选择作为页面全局背景的颜色，第二色系选择作为页面分块背景的颜色，则选择第三色系作为该标题文字色。此时，需验证文字可读性，即该标题文字色与标题背景的颜色在所属LCH空间中的L值之间的差值应大于预设值，若该差值小于或等于该预设值，则调整该标题文字色，使得该L值之间的差值大于预设值，例如该预设值可以是40。若取色结果只有两种色系或一种色系，则选择页面分块背景的颜色作为标题文字色，此时，也需进行文字可读性的验证。
本申请实施例还可以包含按钮部分，如图5所示的按钮文字色1可以是平行标题1的标题文字色，按钮背景的颜色1可以是平行标题1的标题背景的颜色。可选地，也可以是其他的配色方案。
可选地，如图5所示的按钮，该按钮在标题的背景的颜色中。该按钮背景的颜色的一种配色方案是，第一页面的第一图像中的颜色取色结果中占比最大的三个色系中还有色系未被用到，则选择剩余的色系进行色板匹配，即从色板中选择H值最接近的颜色色组，从该颜色色组中选择色差最小的颜色作为该按钮背景的颜色。该按钮背景的颜色的另一种配色方案是，第一页面的的第一图像中的颜色取色结果中占比最大的三个色系均被用到或取色结果只有两个色系时，则选择页面全局背景的颜色进行色板匹配，即从该页面全局背景的颜色色板中选择H值最接近的颜色色组，从该颜色色组中选择色差最小的颜色作为该按钮背景。若第一页面第一图像中的颜色的取色结果只有一个色系，则从该色系的色板中选择与页面分块背景的颜色在所属LCH空间上的H值相距预设值的颜色组，如该预设值为120，然后根据页面分块背景的颜色的冷暖属性，从该颜色组中选择与页面分块背景的颜色冷暖属性相反的颜色作为按钮的背景的颜色。例如，蓝色、绿色、紫色等属于冷色系，橙色、黄色、红色等属于暖色系，若该页面分块背景的颜色属于冷色系，则选择暖色系作为按钮背景的颜色。
对于按钮文字色的配色，根据按钮背景的颜色的明度进行变化得到该按钮文字色，例如，将按钮背景的颜色所属LCH空间上的L值加一个预设值之后得到的颜色作为该按钮文字色，如该预设值为40，若L+40的值大于90，则选择白色作为按钮文字色。
可选地，该按钮也可以单独呈现在页面全局背景中或页面分块背景中，或页面分块背景与页面全局背景的交界处，或两个页面分块背景的交界处，本申请实施例对此不做具体限定。
本申请实施例还可以包含正文文字部分的配色，若该正文部分在分块背景中，若该页面分块背景的颜色所属LCH空间上的L值大于预设值，则将所述背景的颜色所属LCH空间上的L值和C值变化预设的偏移量之后的颜色作为正文文字色，如将L＝20，C＝C+7的颜色作为正文文字色；若该分块背景的颜色所属LCH空间上的L值小于或等于预设值， 则将该分块背景的颜色所属LCH空间上的L值变化预设的偏移量之后的颜色或白色作为正文文字的颜色，如将L值变为90之后的颜色或白色作为正文文字的颜色。
可选地，当有多个分块背景时，多个分块背景中的正文部分的颜色可以相同，也可以不同。
作为一个示例，若有两个分块背景，分块背景一中的正文部分的配色可以采用上述配色方案。对于分块背景二中的正文部分的配色，若分块背景二所属LCH空间上的L值大于预设值，则将所述分块背景二所属LCH空间上的L值变为20之后的颜色作为正文文字色，如该预设值为50。若该分块背景二所属LCH空间上的L值小于或等于预设值，则选择白色作为该分块背景二中的正文部分的颜色。
可选地，该正文部分也可以包含背景，但需保证正文文字的颜色与该文字背景的颜色满足可读性。
下面将介绍本申请实施例的调整文字色的方法。图6是本申请实施例的一种调整文字色的方法的示意性流程图。应理解，此处所述的文字色可以表示正文文字的颜色，也可以表示标题文字的颜色，甚至还可以表示按钮文字的颜色。
在本申请实施例中，可以先计算文字色与背景的颜色的对比度，当文字色与背景的颜色的对比度不满足要求时，对文字色进行调整。文字色与背景的颜色的对比度过大，可能会导致视觉疲劳；文字色与背景的颜色的对比度较小，可能不满足基本满足阅读需要，因此，需要对文字色进行调整。
步骤S610，判断文字色与背景的颜色的对比度是否满足预设条件。
可以根据目标图像的面向人群的不同，以及文字大小、字体的不同，对预设条件进行调整。示例性地，一般情况下文字色与背景的颜色的对比度至少要保持4.5：1，而如果是针对年龄大的用户群体，例如7：1是更合适的选择。
如果文字色与背景的颜色的对比度不满足预设条件，可以进行步骤S620。预设条件可以是对比度小于第一阈值且大于第二阈值。即文字色与背景的颜色的对比度大于第一阈值，或小于第二阈值第一阈值大于第二阈值，可以进行步骤S620。例如，第一阈值可以是18：1，第二阈值可以是3：1或4.5：1。预设条件也可以是文字色与背景的颜色的对比度大于第二阈值。
在步骤S610之前，可以确定文字区域的背景的颜色，该过程也称为文字区域的智能取色。文字区域的背景可以采用纯色的背景，也可以采用渐变色的背景。采用纯色背景，即目标图像中整个背景颜色可以相同的。采用渐变色的背景，可以确定文字区域渐变背景的颜色中一个或多个点的颜色，例如任意一点的颜色、两个端点的颜色或两端点的重点的颜色。
RGB色彩空间适用于色彩的显示。因此，通过文字区域的智能取色获得的背景的颜色可以通过RGB色彩空间表示。将背景的颜色和文字色RGB归一化处理，即设置R、G、B的最大取值为1，计算背景的颜色和文字色的R、G、B，可以简化计算。
可以计算背景的颜色与文字色的对比度。通过计算，可以确定文字色与背景的颜色是否满足预设条件。文字色与背景的颜色的对比度满足预设条件，可以是文字色与纯色背景的颜色或渐变背景的颜色中一个或多个点的颜色的对比度满足预设条件。
步骤S620，生成色阶。
可以将显示文字色的色彩空间由RGB色彩空间转换为HSV色彩空间。通过H、S、 V分段变化，可以生成文字色的彩色色阶。可以将显示文字色的色彩空间由RGB色彩空间转换为LAB色彩空间。通过L等差变化，可以生成文字色的灰色色阶。611是色阶的示例。文字色可以是彩色，也可以不是彩色，即黑色、白色或灰色中的任意一种或几种。
步骤S630，确定修改后的文字色。
可以确定色阶中满足预设条件的颜色作为修改后的文字色。
可以计算色阶中的全部颜色中的每一个与背景的颜色的对比度。可以依次计算色阶中的颜色与背景的颜色的对比度，获得满足预设条件的颜色停止计算。依次计算色阶中的颜色的顺序可以是随机的，也可以从目标颜色组中的文字色开始按照色阶中的顺序分别向两个端点的方向依次计算色阶中的颜色与背景的颜色的对比度。
可以将色阶中满足预设条件的颜色中的一个作为修改后的文字色。例如，预设条件可以是文字色与背景的颜色的对比度大于4.5，可以将色阶中满足预设条件的颜色中，与背景的颜色的对比度接近4.5的颜色作为修改后的文字色。
在步骤S630之后，可以根据修改后的文字色，渲染生成文字图片。
根据本申请实施例的方案，避免出现页面中的文字与背景的颜色的对比度过大或过小的情况，通过自动调节文字色，使得页面中的文字满足可读性标准。
可选地，也可以通过调节背景的颜色，使得文字色与背景的颜色满足对比度。
本申请实施例的页面组成部分还可以包括纹理色。图7是本申请实施例的调节纹理色的方法的示意性流程图。如图7所示，该方法700包括步骤S710和步骤S720。
步骤S710，计算纹理色与背景的颜色的色差。
本申请实施例可以通过CIE lab空间中的欧式距离来计算纹理色与背景的颜色之间的色差，还可以通过RGB空间、LCH空间、CMC l:c空间中的欧氏距离来计算纹理色与背景的颜色之间的色差，本申请实施例对此不做具体限定。当判断到纹理色与背景的颜色之间的色差大于预设的阈值时，执行步骤S720。
步骤S720，降低纹理色的透明度。
本申请实施例会预先设定纹理色与背景的颜色之间色差的阈值，当色差大于该阈值时，可以降低该纹理色的透明度，以使得纹理色不突兀于背景，页面颜色和谐美观。
本申请中根据第一页面的至少一幅图像中的颜色信息，确定第二页面的各个组成部分的配色，上文所述的页面全局背景的颜色、页面分块背景的颜色、标题背景的颜色等，可以是纯色，也可以是渐变色。本申请实施例对此不做具体限定。
图8是本申请实施例的页面配色装置的示意图。如图8所示，该装置800包括获取模块810和处理模块820。该获取模块810用于获取第一页面中的第一图像的颜色信息，该颜色信息包括该第一图像包括的颜色的占比；该处理模块820用于根据该至少一幅图像的颜色信息，确定第二页面的组成部分的配色。
可选地，该第二页面的组成部分至少包括以下中的一种：页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
可选地，该处理模块820具体用于：
选择该第一图像包括的颜色中的占比最大的颜色作为该页面全局背景的颜色；或者选择该第一图像的第一比例处的颜色作为过渡色，从该第一图像包括的颜色占比最大的前三个色系中选择与该过渡色最接近的颜色作为页面全局背景的颜色。
可选地，该页面全局背景的颜色所属LCH空间上的L值和C值在预设的范围内。
该处理模块具体用于：当该第一图像的颜色信息指示该第一图像的色系配置为绝对主色系时，若该页面全局背景的颜色属于第一色系，则选择该第二色系中的至少一个颜色作为该页面分块背景的颜色，其中，该第一色系是该第一图像包括的颜色所属于的色系中占比最大的色系，该第二色系是该第一图像包括的颜色所属于的色系中除该第一色系以外的色系；若该页面全局背景的颜色不是不属于该第一色系，则选择该第一色系中的至少一个颜色作为该页面分块背景的颜色。
可选地，该处理模块820具体用于：根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：当该第一图像的颜色信息指示该第一图像的色系配置为双主色系时，若该页面全局背景的颜色属于第三色系，则选择第四色系中的至少一个颜色作为该页面分块背景的颜色，该第三色系是该双主色系中的一个色系，该第四色系是该双主色系中的另一个色系，且该第三色系是该页面全局背景的颜色所属于的色系。
可选地，该处理模块820具体用于：当该第一图像的颜色信息指示该第一图像的色系配置为无主色系时，选择第五色系中的至少一个颜色作为该页面分块背景的颜色，其中，该第五色系的在该第一图像中的占比小于第六色系，该第六色系是该页面全局背景的颜色所属于的色系，且，该第五色系是该第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。
可选地，该处理模块820还用于：根据该第一图像的颜色信息确定的该页面分块背景的颜色为第一颜色，该页面全局背景的颜色为第二颜色，以及该处理模块还用于：当该第一颜色和该第二颜色为互补色时，根据该第一图像的颜色信息，将该页面分块背景的颜色更新为第三颜色，其中，该第三颜色包括第七色系中的至少一个颜色，该第七色系属于该第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系，该第八色系是该第一颜色所属于的色系，该第九色系是该第二颜色所属于的色系。
可选地，该处理模块820具体用于：选择第十色系中的至少一个颜色作为该标题背景的颜色，其中，该第十色系是属于该第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系，该第十一色系是该页面全局背景的颜色所属于的色系，该第十二色系是该页面分块背景的颜色所属于的色系。
可选地，该处理模块820还用于：当该标题文字有该标题背景时，则将该页面分块背景的颜色所属LCH空间上的L加上第三阈值之后的颜色或白色作为该标题文字的颜色；或者当该标题文字没有该标题背景时，选择第十三色系中的至少一个颜色作为该标题文字的颜色，其中，该第十三色系是属于该第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系，该第十四色系是该页面全局背景的颜色所属于的色系，该第十五色系是该页面分块背景的颜色所属于的色系，该标题文字的颜色与该页面分块背景的颜色在所属LCH空间上的L值之间的差值小于第四阈值。
可选地，该处理模块820还用于：选择第十六色系中的至少一个颜色作为该按钮背景的颜色，其中，该第十六色系是属于该第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系，该第十七色系是该页面全局背景的颜色所属于的色系，该第十八色系是该页面分块背景的颜色所属于的色系；或者从该第一图像包括的颜色中选择与该页面分块背景的颜色所属LCH空间上的色相角度值H值相距第五阈值的颜色组，从该颜色组中选择与该页面分块背景的颜色冷暖属性相反的颜色作为该按钮背景的颜色。
可选地，该处理模块820还用于：选择按钮背景色所属LCH空间上L值加上预设值之后的颜色或白色作为按钮文字色。
可选地，该处理模块820还用于：
若该正文文字所在的背景的颜色所属LCH空间上的L大于第六阈值，则将该背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为该正文文字的颜色；若正文文字所在背景的颜色所属LCH空间上的L值小于或等于第六阈值，则将该背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为该正文文字的颜色。
可选地，该处理模块820还用于：计算该正文文字的颜色与该正文文字所在背景的颜色的对比度；当该正文文字的颜色与该正文文字所在背景的颜色的对比度小于或等于第十阈值时，调整该正文文字色。
应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同装置来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述装置实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和装置，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理器中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述装置的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory,ROM)、随机存取存储器(random access memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟 悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。
应理解，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory,ROM)、随机存取存储器(random access memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (26)

  1. 一种页面配色的方法，其特征在于，包括：
    获取第一页面中的第一图像的颜色信息，所述颜色信息包括所述第一图像包括的颜色的占比；
    根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，所述目标页面元素包括以下至少一项：
    页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
  2. 根据权利要求1所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
    选择所述第一图像包括的颜色中的占比最大的颜色作为所述页面全局背景的颜色；或者
    选择所述第一图像的第一比例处的颜色作为过渡色，从所述第一图像包括的颜色占比最大的前三个色系中选择与所述过渡色最接近的颜色作为页面全局背景的颜色。
  3. 根据权利要求1或2所述的方法，其特征在于，所述页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值；和/或
    所述页面全局背景的颜色所属LCH空间上的饱和度值小于或等于第二阈值。
  4. 根据权利要求1至3中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
    当所述第一图像的颜色信息指示所述第一图像的色系配置为绝对主色系时，若所述页面全局背景的颜色属于第一色系，则选择所述第二色系中的至少一个颜色作为所述页面分块背景的颜色，其中，所述第一色系是所述第一图像包括的颜色所属于的色系中占比最大的色系，所述第二色系是所述第一图像包括的颜色所属于的色系中除所述第一色系以外的色系；
    若所述页面全局背景的颜色不属于所述第一色系，则选择所述第一色系中的至少一个颜色作为所述页面分块背景的颜色。
  5. 根据权利要求1至3中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
    当所述第一图像的颜色信息指示所述第一图像的色系配置为双主色系时，
    若所述页面全局背景的颜色属于第三色系，则选择第四色系中的至少一个颜色作为所述页面分块背景的颜色，所述第三色系是所述双主色系中的一个色系，所述第四色系是所述双主色系中的另一个色系，且所述第三色系是所述页面全局背景的颜色所属于的色系。
  6. 根据权利要求1至3中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
    当所述第一图像的颜色信息指示所述第一图像的色系配置为无主色系时，
    选择第五色系中的至少一个颜色作为所述页面分块背景的颜色，其中，所述第五色系的在所述第一图像中的占比小于第六色系，所述第六色系是所述页面全局背景的颜色所属于的色系，且，所述第五色系是所述第一图像包括的颜色所对应的色系中除第六色系之外 占比最大的色系。
  7. 根据权利要求1至6中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息确定的所述页面分块背景的颜色为第一颜色，所述页面全局背景的颜色为第二颜色，以及
    所述方法还包括：
    当所述第一颜色和所述第二颜色为互补色时，根据所述第一图像的颜色信息，将所述页面分块背景的颜色更新为第三颜色，其中，所述第三颜色包括第七色系中的至少一个颜色，所述第七色系属于所述第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系，所述第八色系是所述第一颜色所属于的色系，所述第九色系是所述第二颜色所属于的色系。
  8. 根据权利要求1至7中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
    选择第十色系中的至少一个颜色作为所述标题背景的颜色，其中，所述第十色系是属于所述第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系，所述第十一色系是所述页面全局背景的颜色所属于的色系，所述第十二色系是所述页面分块背景的颜色所属于的色系。
  9. 根据权利要求1至8中任一项所述的方法，其特征在于，所述方法还包括：
    当所述标题文字有所述标题背景时，则将所述页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为所述标题文字的颜色；或者
    当所述标题文字没有所述标题背景时，选择第十三色系中的至少一个颜色作为所述标题文字的颜色，其中，所述第十三色系是属于所述第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系，所述第十四色系是所述页面全局背景的颜色所属于的色系，所述第十五色系是所述页面分块背景的颜色所属于的色系，所述标题文字的颜色与所述页面分块背景的颜色在所属LCH空间上的L之间的差值小于第四阈值。
  10. 根据权利要求1至9中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
    选择第十六色系中的至少一个颜色作为所述按钮背景的颜色，其中，所述第十六色系是属于所述第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系，所述第十七色系是所述页面全局背景的颜色所属于的色系，所述第十八色系是所述页面分块背景的颜色所属于的色系；或者
    从所述第一图像包括的颜色中选择与所述页面分块背景的颜色所属LCH空间上的色相角度值相距第五阈值的颜色组，从所述颜色组中选择与所述页面分块背景的颜色冷暖属性相反的颜色作为所述按钮背景的颜色。
  11. 根据权利要求1至10中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
    若所述正文文字所在的背景的颜色所属LCH空间上的明度值大于第六阈值，则将所述背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为所述正文文字的颜色；
    若正文文字所在背景的颜色所属LCH空间上的明度值小于或等于第六阈值，则将所述背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为所述正 文文字的颜色。
  12. 根据权利要求11所述的方法，其特征在于，所述方法还包括：
    计算所述正文文字的颜色与所述正文文字所在背景的颜色的对比度；
    当所述正文文字的颜色与所述正文文字所在背景的颜色的对比度小于或等于第十阈值时，调整所述正文文字的颜色。
  13. 一种页面配色的装置，其特征在于，包括：
    获取模块，获取第一页面中的第一图像的颜色信息，所述颜色信息包括所述第一图像包括的颜色的占比；
    处理模块，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，所述目标页面元素包括以下至少一项：
    页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
  14. 根据权利要求13所述的装置，所述处理模块具体用于：
    选择所述第一图像包括的颜色中的占比最大的颜色作为所述页面全局背景的颜色；或者
    选择所述第一图像的第一比例处的颜色作为过渡色，从所述第一图像包括的颜色占比最大的前三个色系中选择与所述过渡色最接近的颜色作为页面全局背景的颜色。
  15. 根据权利要求13或14所述的装置，其特征在于，所述页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值；和/或
    所述页面全局背景的颜色所属LCH空间上的饱和度值小于或等于第二阈值。
  16. 根据权利要求13至15中任一项所述的装置，其特征在于，所述处理模块具体用于：
    当所述第一图像的颜色信息指示所述第一图像的色系配置为绝对主色系时，
    若所述页面全局背景的颜色属于第一色系，则选择所述第二色系中的至少一个颜色作为所述页面分块背景的颜色，其中，所述第一色系是所述第一图像包括的颜色所属于的色系中占比最大的色系，所述第二色系是所述第一图像包括的颜色所属于的色系中除所述第一色系以外的色系；
    若所述页面全局背景的颜色不是不属于所述第一色系，则选择所述第一色系中的至少一个颜色作为所述页面分块背景的颜色。
  17. 根据权利要求13至15中任一项所述的装置，所述处理模块还用于：
    根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
    当所述第一图像的颜色信息指示所述第一图像的色系配置为双主色系时，
    若所述页面全局背景的颜色属于第三色系，则选择第四色系中的至少一个颜色作为所述页面分块背景的颜色，所述第三色系是所述双主色系中的一个色系，所述第四色系是所述双主色系中的另一个色系，且所述第三色系是所述页面全局背景的颜色所属于的色系。
  18. 根据权利要求13至15中任一项所述的装置，所述处理模块还用于：
    当所述第一图像的颜色信息指示所述第一图像的色系配置为无主色系时，
    选择第五色系中的至少一个颜色作为所述页面分块背景的颜色，其中，所述第五色系的在所述第一图像中的占比小于第六色系，所述第六色系是所述页面全局背景的颜色所属于的色系，且，所述第五色系是所述第一图像包括的颜色所对应的色系中除第六色系之外 占比最大的色系。
  19. 根据权利要求13至18中任一项所述的装置，其特征在于，根据所述第一图像的颜色信息确定的所述页面分块背景的颜色为第一颜色，所述页面全局背景的颜色为第二颜色，以及
    所述处理模块还用于：
    当所述第一颜色和所述第二颜色为互补色时，根据所述第一图像的颜色信息，将所述页面分块背景的颜色更新为第三颜色，其中，所述第三颜色包括第七色系中的至少一个颜色，所述第七色系属于所述第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系，所述第八色系是所述第一颜色所属于的色系，所述第九色系是所述第二颜色所属于的色系。
  20. 根据权利要求13至19中任一项所述的装置，所述处理模块具体用于：
    选择第十色系中的至少一个颜色作为所述标题背景的颜色，其中，所述第十色系是属于所述第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系，所述第十一色系是所述页面全局背景的颜色所属于的色系，所述第十二色系是所述页面分块背景的颜色所属于的色系。
  21. 根据权利要求13至20中任一项所述的装置，所述处理模块还用于：
    当所述标题文字有所述标题背景时，则将所述页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为所述标题文字的颜色；或者
    当所述标题文字没有所述标题背景时，选择第十三色系中的至少一个颜色作为所述标题文字的颜色，其中，所述第十三色系是属于所述第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系，所述第十四色系是所述页面全局背景的颜色所属于的色系，所述第十五色系是所述页面分块背景的颜色所属于的色系，所述标题文字的颜色与所述页面分块背景的颜色在所属LCH空间上的明度值之间的差值小于第四阈值。
  22. 根据权利要求13至21中任一项所述的装置，其特征在于，所述处理模块还用于：
    选择第十六色系中的至少一个颜色作为所述按钮背景的颜色，其中，所述第十六色系是属于所述第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系，所述第十七色系是所述页面全局背景的颜色所属于的色系，所述第十八色系是所述页面分块背景的颜色所属于的色系；或者
    从所述第一图像包括的颜色中选择与所述页面分块背景的颜色所属LCH空间上的色相角度值相距第五阈值的颜色组，从所述颜色组中选择与所述页面分块背景的颜色冷暖属性相反的颜色作为所述按钮背景的颜色。
  23. 根据权利要求13至22中任一项所述的装置，其特征在于，所述处理模块具体用于：
    若所述正文文字所在的背景的颜色所属LCH空间上的明度值大于第六阈值，则将所述背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为所述正文文字的颜色；
    若正文文字所在背景的颜色所属LCH空间上的明度值小于或等于第六阈值，则将所述背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为所述正文文字的颜色。
  24. 根据权利要求23所述的装置，其特征在于，所述处理模块还用于：
    计算所述正文文字的颜色与所述正文文字所在背景的颜色的对比度；
    当所述正文文字的颜色与所述正文文字所在背景的颜色的对比度小于或等于第七阈值时，调整所述正文文字色。
  25. 一种计算机可读存储介质，其特征在于，包括计算机程序，当其在计算机设备上运行时，使得所述计算机设备中的处理单元执行如权利要求1至12中任一项所述的方法。
  26. 一种芯片，其特征在于，所述芯片包括存储器和处理器，所述存储器用于存储计算机指令，所述处理器用于执行所述存储器中存储的计算机指令，以执行如权利要求1至12中任一项所述的方法。
PCT/CN2020/135179 2019-12-31 2020-12-10 页面配色的方法、装置、存储介质和芯片 WO2021135887A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201911422117.8 2019-12-31
CN201911422117.8A CN111191424B (zh) 2019-12-31 2019-12-31 页面配色的方法、装置、存储介质和芯片

Publications (1)

Publication Number Publication Date
WO2021135887A1 true WO2021135887A1 (zh) 2021-07-08

Family

ID=70708031

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/135179 WO2021135887A1 (zh) 2019-12-31 2020-12-10 页面配色的方法、装置、存储介质和芯片

Country Status (2)

Country Link
CN (1) CN111191424B (zh)
WO (1) WO2021135887A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116578798A (zh) * 2023-04-25 2023-08-11 之江实验室 一种页面对比度自动校准优化的方法
CN117315172A (zh) * 2023-09-22 2023-12-29 鲸数科技（北京）有限公司 地图页面配置方法、装置、电子设备与计算机可读介质

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111191424B (zh) * 2019-12-31 2023-03-03 北京华为数字技术有限公司 页面配色的方法、装置、存储介质和芯片
CN112543363B (zh) * 2020-12-04 2022-11-22 海看网络科技(山东)股份有限公司 一种iptv多样化配置背景的方法
CN112541334A (zh) * 2020-12-21 2021-03-23 山东师范大学 基于VBA的PowerPoint页面配色自动生成方法及系统
CN113360155A (zh) * 2021-06-23 2021-09-07 平安普惠企业管理有限公司 前端界面背景配色方法、装置、设备及存储介质
CN113656134B (zh) * 2021-08-17 2023-08-04 北京百度网讯科技有限公司 用于界面元素的配色方法、装置、设备和存储介质
CN113742025A (zh) * 2021-09-17 2021-12-03 北京字跳网络技术有限公司 页面生成方法、装置、设备和存储介质
CN113626129B (zh) * 2021-10-09 2022-02-18 北京世纪好未来教育科技有限公司 一种页面颜色的确定方法、装置及电子设备
CN114329278B (zh) * 2021-12-30 2023-09-29 百度在线网络技术（北京）有限公司 搜索结果页的处理方法、装置、电子设备和存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102542017A (zh) * 2010-12-17 2012-07-04 微软公司 将网页的源区域渲染为目标区域
CN104331524A (zh) * 2014-11-28 2015-02-04 广东欧珀移动通信有限公司 页面显示方法、装置及终端
CN104965631A (zh) * 2015-05-26 2015-10-07 深圳市万普拉斯科技有限公司 桌面配色方法、装置及智能终端
CN105786896A (zh) * 2014-12-24 2016-07-20 阿里巴巴集团控股有限公司 一种页面侧边栏的颜色渲染方法及装置
CN108733640A (zh) * 2017-04-24 2018-11-02 珠海金山办公软件有限公司 一种文档配色方案生成方法及装置
CN110377860A (zh) * 2019-07-18 2019-10-25 百度(中国)有限公司 一种页面颜色调整方法、装置及电子设备
CN111191424A (zh) * 2019-12-31 2020-05-22 北京华为数字技术有限公司 页面配色的方法、装置、存储介质和芯片

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP6006560B2 (ja) * 2012-07-18 2016-10-12 株式会社日立公共システム ウェブコンテンツの色作成支援方法およびウェブコンテンツの色作成支援装置
CN105468617B (zh) * 2014-09-03 2019-02-15 优视科技有限公司 调整网页内容颜色的方法及装置
CN104765600A (zh) * 2015-03-13 2015-07-08 深圳市金立通信设备有限公司 一种页面处理方法
CN105511717B (zh) * 2015-11-30 2019-07-02 北京京东尚科信息技术有限公司 页面显示方法和页面显示装置
CN105389403B (zh) * 2015-12-29 2019-01-25 东软集团股份有限公司 页面样式自动匹配方法及系统
CN107943924B (zh) * 2017-11-21 2022-05-13 福州聆花信息科技有限公司 一种自动生成网页主题的方法、存储介质和电子设备
CN110198437B (zh) * 2018-02-27 2021-11-05 腾讯科技（深圳）有限公司 图像的处理方法、装置、存储介质和电子装置
CN109783182B (zh) * 2019-02-15 2022-10-14 百度在线网络技术（北京）有限公司 一种页面主题色调的调整方法、装置、设备及介质
CN110287435A (zh) * 2019-05-21 2019-09-27 百度在线网络技术（北京）有限公司 网页展现方法、系统和机器可读存储介质
CN110609722B (zh) * 2019-08-09 2021-07-20 华为技术有限公司 一种暗模式显示界面处理方法、电子设备与存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102542017A (zh) * 2010-12-17 2012-07-04 微软公司 将网页的源区域渲染为目标区域
CN104331524A (zh) * 2014-11-28 2015-02-04 广东欧珀移动通信有限公司 页面显示方法、装置及终端
CN105786896A (zh) * 2014-12-24 2016-07-20 阿里巴巴集团控股有限公司 一种页面侧边栏的颜色渲染方法及装置
CN104965631A (zh) * 2015-05-26 2015-10-07 深圳市万普拉斯科技有限公司 桌面配色方法、装置及智能终端
CN108733640A (zh) * 2017-04-24 2018-11-02 珠海金山办公软件有限公司 一种文档配色方案生成方法及装置
CN110377860A (zh) * 2019-07-18 2019-10-25 百度(中国)有限公司 一种页面颜色调整方法、装置及电子设备
CN111191424A (zh) * 2019-12-31 2020-05-22 北京华为数字技术有限公司 页面配色的方法、装置、存储介质和芯片

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116578798A (zh) * 2023-04-25 2023-08-11 之江实验室 一种页面对比度自动校准优化的方法
CN116578798B (zh) * 2023-04-25 2024-04-12 之江实验室 一种页面对比度自动校准优化的方法
CN117315172A (zh) * 2023-09-22 2023-12-29 鲸数科技（北京）有限公司 地图页面配置方法、装置、电子设备与计算机可读介质
CN117315172B (zh) * 2023-09-22 2024-04-12 鲸数科技（北京）有限公司 地图页面配置方法、装置、电子设备与计算机可读介质

Also Published As

Publication number Publication date
CN111191424B (zh) 2023-03-03
CN111191424A (zh) 2020-05-22

Similar Documents

Publication Publication Date Title
WO2021135887A1 (zh) 页面配色的方法、装置、存储介质和芯片
US10885677B2 (en) Method and system for setting interface element colors
US8558844B2 (en) Systems, methods, and computer-readable media for changing colors of displayed assets
CN104076928B (zh) 一种调整文字显示区域色调的方法
CN109783182A (zh) 一种页面主题色调的调整方法、装置、设备及介质
WO2020042997A1 (zh) 一种界面元素颜色显示方法及装置
CN110634169A (zh) 图像处理的装置和方法
WO2021035505A1 (zh) 图像处理方法及装置
WO2022068293A1 (zh) 页面展示方法及装置
WO2023045857A1 (zh) 图像处理方法、装置、电子设备及存储介质
CN110473282B (zh) 物体模型的染色处理方法、装置、计算机设备和存储介质
CN103065338A (zh) 为背景图像中的前景图像提供阴影的方法和装置
Bianco et al. Color coding for data visualization
US8830251B2 (en) Method and system for creating an image
CN112395030A (zh) 一种页面处理方法、装置、电子设置以及存储介质
US10628984B2 (en) Facial model editing method and apparatus
WO2021169991A1 (zh) 终端设备主题色彩的配置方法、装置和终端设备
Yang et al. Computer-Aided Design of Visual Communication Expression with Creativity as the Core
WO2023274131A1 (zh) 图像的生成方法、装置、电子设备及可读存储介质
CN108292319B (zh) 确定用于被显示在用户界面上的元素的外观
US8170380B1 (en) Method and apparatus for importing, exporting and determining an initial state for files having multiple layers
TWI478001B (zh) 網頁配色方法及系統
CN115147259A (zh) 一种图像色彩迁移方法、系统及计算机介质
CN114512094B (zh) 屏幕色彩调节方法、装置、终端及计算机可读存储介质
CN104090764B (zh) 一种终端

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20909101

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 20909101

Country of ref document: EP

Kind code of ref document: A1