TW201426372A - Webpage color-matching system and method - Google Patents

Abstract

Disclosed is a webpage color-matching system and method, comprising inputting a picture into a computer device for retrieving a main color of the picture as a theme color for a webpage, searching a color corresponding to the main color from a color phase ring, selecting an assisting color and a decorative color respectively from the color phase ring accordingly, and finally applying the assisting and decorative colors respectively to a plurality of predefined color-matching regions based on predetermined proportions, thereby assisting in webpage color-matching and saving time in the process of webpage configuration.

Description

Web color matching method and system

The present invention relates to a color collocation method, and more particularly to a method for applying personalized web page creation for web page color matching.

Due to the popularity of computers, the number of users of computers and the population of the Internet have grown tremendously in recent years. Due to the large number of services provided by the Internet, there are many personalized web pages for data search, email, online games, online shopping, and marketing functions.

In terms of personalized web pages, due to the rapid rise of online blogs in recent years, the difficulty of creating personalized web pages has been reduced, and many online blogs allow users to upload photos or write articles. Therefore, many users have The creation of personalized web pages is aimed at presenting themselves and communicating with other users of similar nature. In addition to the user's maintenance of their personalized web pages, the presentation of web pages and the color matching of web pages are also factors that attract others to browse during the process of personalizing web pages.

For the web designer, in the process of webpage construction, how to choose the color can highlight the characteristics of the webpage, so that the overall color is not too abrupt, nor too dull, which has been a difficult problem for web designers. For the average user who has no concept of color, it is a big problem.

Therefore, how to overcome the problem of web page color configuration during the webpage construction process has become a problem that is currently being solved.

The invention provides a webpage color matching method for solving the color matching problem generated by a user during webpage construction.

The invention further provides a webpage color matching method, which performs webpage color matching according to the color of the image, without requiring the user to perform any operation, thereby saving time spent on webpage construction.

The webpage color matching method provided by the present invention comprises the following steps: (1) inputting a picture into a computer device to capture the main color of the picture by the computer device; (2) causing the computer device to be in a hue according to the main color The ring finds the color corresponding to the main color; (3) according to the color of the main color, finds the auxiliary color of the main color and the color of the embellishment color in the hue circle; and (4) causes the computer device to be the main The colors of the color, the auxiliary color, and the dotted color are respectively applied to a plurality of color matching areas pre-divided according to a predetermined ratio in a web page.

The present invention provides a computer readable recording medium storing a computer program for causing a computer device to perform the web page color matching method of the present invention.

The invention further provides a webpage color matching system, comprising a color capturing unit, a color searching unit and a color configuration unit. The color capturing unit is configured to capture a main color of a picture; the color searching unit is configured to find a color corresponding to the main color in a hue circle according to the main color, and find out the hue circle according to the color of the main color. The auxiliary color of the primary color and the color of the dotted color; the color configuration unit applies the primary color, the auxiliary color, and the dotted color to the color matching area divided by a predetermined ratio in a web page.

In summary, the method provided by the present invention can find the main color, the auxiliary color and the dotted color of the webpage according to the image as long as the image is input to the computer device. And can be separately applied to a plurality of color matching areas pre-divided according to the proportion in the webpage. Since the webpage color matching method of the invention can complete the webpage color configuration without human operation, the color matching problem generated by the traditional webpage construction is solved, and the time spent on the webpage construction is saved invisibly.

The other embodiments of the present invention will be readily understood by those skilled in the art from this disclosure.

It is to be understood that the structure, the proportions, the size, and the like of the present invention are intended to be used in conjunction with the disclosure of the specification, and are not intended to limit the invention. The conditions are limited, so it is not technically meaningful. Any modification of the structure, change of the proportional relationship or adjustment of the size should remain in this book without affecting the effects and the objectives that can be achieved by the present invention. The technical content disclosed in the invention can be covered. In the meantime, the terms "upper", "lower", "left", "right", "one" and "two" as used in this specification are also for convenience of description, and are not intended to limit the present. The scope of the invention can be implemented, and the change or adjustment of the relative relationship is also considered to be within the scope of the invention.

Please refer to FIG. 1 , which is a flow chart of a webpage color matching method of the present invention. As shown in the figure, the web page color matching method of the present invention comprises the following steps: Step S1, the picture is input to the computer device to capture the main color of the picture by the computer device, and then proceeds to step S2. In step S2, the computer device is caused to find the corresponding main color in a hue circle according to the main color captured. Color, then proceeds to step S3. In step S3, the auxiliary color of the main color and the color of the dotted color are found in the hue circle, and then the process proceeds to step S4. In step S4, the computer device is configured to apply the colors of the primary color, the auxiliary color, and the dotted color to a plurality of color matching regions pre-divided according to a predetermined ratio in a web page.

Please refer to FIG. 2, which is a schematic diagram of the main color capture of the webpage color matching method of the present invention. As shown in the figure, the webpage color matching method of the present invention firstly provides a picture 10, and the picture 10 is input to a computer device (not shown), and the main color of the picture is captured by the computer device as a web page. Theme color. The picture 10 can be a landscape photo or an image file identifiable by other computer devices.

In the present invention, the computer device uses the algorithm to capture the dominant color of the picture 10. In the present embodiment, the algorithm is the Median-Cut algorithm. The Median-Cut algorithm treats all pixels as a group set, and then finds the spectrum with the widest distribution of RGB three spectral gradation values in the group set, and then colors all the pixels in the image according to the selected spectrum. Sorting the order values, finding the gradation value of the median point according to the sorting result, and finally dividing the original pixel group into two groups of pixels and about equal subgroups based on the division of the gradation value of the middle point, and then The result of the splitting of the pixel group is extracted to obtain the desired color.

Since the Median-Cut algorithm is an algorithm known to those skilled in the art, the method applied to the present invention is described only for the Median-Cut algorithm, and the Median-Cut algorithm itself is not described. And the Median-Cut algorithm is only used as an embodiment of the present invention. It is not intended to limit the invention.

Since the color space captured by the Median-Cut algorithm belongs to the color space of RGB, in the field of color science, when color matching is performed on an object, color matching is not performed in the RGB color space, but color in the hue circle is used. Color matching, therefore, the color must be taken out of the hue ring corresponding to the main color captured.

Please refer to Figure 3, which is a schematic diagram of the HSV color space and the Eden phase hue angle. In the process of finding the corresponding color in the hue circle according to the main color of the RGB color space, in order to simplify and shorten the process and time of finding the color, before the hue circle finds the color of the corresponding main color, the first one is taken. The dominant color of the RGB color space is converted to the color corresponding to the primary color in the HSV color space 20.

There is a one-way correspondence between the RGB color space and the HSV color space 20 conversion. When the S value is 0, the H value is not defined, that is, when there is no color saturation state, no color is generated; and the V value is At 0, the S value is not defined, meaning that there is no color saturation when there is no brightness, so the transition between the RGB color space and the HSV color space 20 is non-linear. The formula for converting from RGB color space to HSV color space 20 is as follows: V = max ( R, G, B )

The V value and the S value can be directly obtained from RGB, and the H value is different depending on which of the RGB three values is the maximum value.

Since the webpage color matching method of the present invention performs color matching on the webpage by taking out the color in the hue circle, after completing the conversion of the RGB color space and the HSV color space 20, the HSV color space 20 is then converted into the corresponding color of the hue circle. The color corresponding to the primary color is taken out at the hue circle. The hue ring system used in this embodiment adopts the Eden hue ring 30 as an embodiment of the present invention. For example, if the main color system previously drawn is yellow, in the HSV color space 20, the yellow angle is At 60 degrees, after the angle conversion, the yellow color is obtained at the position of 120 degrees of the Eden hue circle 30. However, it is known to those skilled in the art that the type of hue loop does not stop at the Eden hue ring 30 and should not limit the invention.

Please refer to Figure 4, which is a schematic diagram of the triangle color matching of the Eden hue circle. After finding the color of the main color in the hue circle, the auxiliary color and the embellishment color corresponding to the main color are found according to the main color in the hue circle. In the Eden Hue Loop 30 theory, the color selected by the triangle color matching method can produce a color harmony effect. In order to make the color matching result of the webpage have a good color matching effect, in the embodiment of the present invention, the triangular color matching mode is adopted to select the first auxiliary color and the second auxiliary color of the webpage. Among them, the Eden Hue Loop 30 is a technology for color configuration well known to those skilled in the art, and therefore, This is only described for the application of the Eden Hue Loop 30 in the present invention, and is not described in detail for the Eden Hue Loop 30 itself.

The application of the triangular color matching method in the present invention firstly uses the main color obtained as the first vertex 31 of the triangle, and then rotates 120 degrees on the left and right sides of the Eden hue circle 30 according to the first vertex 31, and the triangle is obtained. The second vertex 32 and the third vertex 33 in the hue circle 30, the colors corresponding to the second vertex 32 and the third vertex 33 are the first auxiliary color and the second auxiliary color of the present invention. However, there is no angle concept in the Eden Hue Loop 30, so during the rotation, the angle is converted in the HSV color space 20, and the result obtained will be again after the angle conversion to correspond to Eden. The color distributed at the angle of the hue circle 30 is the first auxiliary color and the second auxiliary color required for the color matching of the webpage of the present invention.

The triangular color matching manner described in the Eden hue circle 30 is not limited to the form shown in FIG. 3, and any color is taken as the first vertex 31 in the Eden hue circle 30, and then according to the first vertex 31 Rotating 120 degrees, the second vertex 32 and the third vertex 33 of the triangle are obtained as the first auxiliary color and the second auxiliary color.

The above-described triangular color matching method is rotated by 120 degrees on the right and left sides of the Eden hue circle. Therefore, the triangle obtained by the above-described triangular color matching method is an equilateral triangle. However, the triangular color matching method of this mode is merely an embodiment for explaining the triangular color matching method, and those skilled in the art know that the triangular color matching method is not the only one. In another embodiment, the triangle color matching method uses the theme color as the first vertex 31, and then rotates the vertex by 180 degrees to find the contrast color of the theme color, and then selects the color of the left and right sides of the contrast color as the first auxiliary color. And second Auxiliary color.

In addition to the triangular color matching method, there are other color matching methods such as a four-corner color matching method and a hexagonal color matching method, and such color matching methods are well known to those skilled in the art, and thus will not be further described.

Please refer to Figure 5, which is a schematic diagram of the selection of the embellishment color. As shown in the figure, after the first auxiliary color and the second auxiliary color are selected, the dotted color is selected as the color of the area of the webpage to be highlighted, such as the background color of the text field. In order to be able to highlight the brightness of the dotted color in the theme color, the first auxiliary color, and the second auxiliary color, the present invention selects the color of the dotted color by the contrast color matching method. In the Eden phase ring 40 used in the embodiment, since the main color system previously captured is yellow 41, the contrast color capturing mode is rotated by 180 on the Eden hue circle 40 based on the yellow 41. Degree, and the contrast color of the yellow 41 in the Eden hue circle 40, that is, the color of the purple 42 is obtained, then the purple color 42 is the dotted color of the web page. Similarly, the manner in which the contrast colors of yellow 41 and purple 42 are obtained is only used for the description of the embodiment, and is not limited thereto. The contrast color can be obtained by first using any color as a reference and then rotating by 180 degrees.

After selecting the theme color, the first auxiliary color, the second auxiliary color, and the dotted color, the theme color, the first auxiliary color, the second auxiliary color, and the distribution of the dotted color on the web page are then performed.

Please refer to Figure 6, which is a schematic diagram of web page color ratio configuration. After the main color, the first auxiliary color, the second auxiliary color, and the dotted color are selected, the main color, the first auxiliary color, the second auxiliary color, and the embellishment are emphasized in order to highlight the web color matching effect in the subsequent web color matching process. Color ratio Example deployment. In FIG. 6, the color map 50 is divided into a plurality of regions according to the main color, the first auxiliary color, the second auxiliary color, and the dotted color, respectively, a main color matching region 51, a first auxiliary color matching region 52, The second auxiliary color matching area 53 and the dotted color matching area 54. Since the main color is the key color of the entire webpage, in the present embodiment, the main color matching area 51 is defined to occupy about 70% of the entire color arrangement map 50, and the first auxiliary color matching area 52 and the second auxiliary color matching color. The area 53 accounts for about 25% of the overall color map 50, and the dotted color area accounts for about 5% of the total area, and after completing the color ratio configuration, the main color, the first auxiliary color, the second auxiliary color, and the dotted color are respectively respectively. The set is used for a plurality of areas in which the web page is pre-divided according to a predetermined ratio. The configuration ratios used in this embodiment are only for the description of the embodiments, and the ratios of the respective color matching areas may be adjusted according to actual conditions.

Please refer to Figure 7, which is a color set for the web page. After obtaining the main color of the webpage 60, the first auxiliary color, the second auxiliary color, and the embellishment color, and completing the proportioning of the respective colors, then respectively applying the respective colors to the webpage 60, the webpage color configuration can be completed, such as Figure 7 shows.

In FIG. 7, the middle section 61 of the web page 60 is the main color of the web page 60, and the presented content is the webpage 60 theme and the photo. The bottom 62 of the web page 60 is the first auxiliary color of the web page 60, and the presented content is a remark description of the web page 60. At the top 63 of the web page 60 is the second secondary color of the web page 60, and the presented content is the title of the web page 60. The color between the second auxiliary color and the main color is the dotted color of the webpage 60, and the presented content is an option for the user to click.

The color matching method of the webpage of the present invention has been described from the second to seventh figures. The choice of color and the way it is used for web pages. In order to create a color harmony between the colors, and a better visual effect, after the main color, the first auxiliary color, the second auxiliary color, and the dotted color are respectively applied to the webpage, then the brightness can be adjusted for each color. And chroma to highlight the difference between the colors.

Please refer to Figure 8, which is a schematic diagram of color visibility. After the color matching between the theme color, the first auxiliary color, the second auxiliary color and the dotted color, in order to make the text on the webpage clear and easy to recognize, it is necessary to adjust the brightness of the text on the webpage, as shown in the figure. Shown. For example: black and yellow, or white and blue, etc., use the contrast color as the color of the text of the webpage to highlight the clarity of the text on the webpage.

Please refer to FIG. 9, which is a block diagram of a webpage color matching system of the present invention. As shown, the web page color matching system 70 includes a color capture unit 71, a color search unit 72, and a color configuration unit 73.

The color capturing unit 71 is configured to receive a picture and capture a dominant color of the picture. The color search unit 72 finds the color corresponding to the main color in the hue circle as the theme color of the web page according to the main color captured. And according to the color of the main color to find the auxiliary color of the web page and the color of the color. The color capturing unit 71 captures the main color of the image by using the Median-cut algorithm, and the main color captured by the color capturing unit 71 is the color of the RGB color space, and the color searching unit 72 The color of the RGB color space is converted into a corresponding color of the HSV color space, and the color corresponding to the main color is extracted from the hue circle according to the color of the HSV color space. Wherein, the present invention utilizes the Eden Hue Loop to obtain the color of the main color of the webpage Color, and use the triangle color matching method of Eden's hue circle and the contrast color matching method to find the auxiliary color and the dotted color respectively.

After the main color, the auxiliary color, and the dotted color are taken out, the main color, the auxiliary color, and the dotted color are respectively applied by the color configuring unit 73 to the plurality of color matching areas divided by the predetermined proportion of the web page. The brightness and chroma of the main color, the auxiliary color and the dotted color are adjusted, and the brightness of the web page text is adjusted according to the colors of the main color, the auxiliary color and the dotted color. Wherein, the ratio of the main color matching area is 70%, the ratio of the auxiliary color matching area is 25%, and the ratio of the dotted color matching area is 5%.

The present invention provides a computer readable recording medium for storing a computer program, the computer program being applicable to a computer device for causing the computer device to perform the above method. The recording medium can be a floppy disk, a hard disk, a compact disc, a flash drive, a magnetic tape, or other recording medium having the same function.

The above embodiments are intended to illustrate the principles of the invention and its effects, and are not intended to limit the invention. Any of the above-described embodiments may be modified by those skilled in the art without departing from the spirit and scope of the invention. Therefore, the scope of protection of the present invention should be as set forth in the appended claims.

10‧‧‧ Pictures

20‧‧‧HSV color space

30, 40‧‧‧ Eden Hue Loop

31‧‧‧ first vertex

32‧‧‧second vertex

33‧‧‧ third vertex

41‧‧‧Yellow

42‧‧‧ Purple

50‧‧‧Color map

51‧‧‧Main color matching area

52‧‧‧First auxiliary color matching area

53‧‧‧Second auxiliary color matching area

54‧‧‧ dotted color matching area

60‧‧‧Webpage

61‧‧‧ Middle section

62‧‧‧ bottom

63‧‧‧ top

70‧‧‧Web color matching system

71‧‧‧Color capture unit

72‧‧‧Color Search Unit

73‧‧‧Color configuration unit

S1~S4‧‧‧ steps

1 is a flow chart of a method for color matching of a webpage of the present invention; FIG. 2 is a schematic diagram of main color capture of a webpage color matching method of the present invention; and FIG. 3 is a schematic diagram of a corresponding angle of an HSV color space and an Eden hue circle; Figure 4 is a schematic diagram of the triangle color matching of the Eden hue circle; Figure 5 is a schematic diagram of the selection of the dotted color; Figure 6 is a schematic diagram of the color ratio of the webpage; Figure 7 is a color set for the webpage; The figure is a schematic diagram of color visibility; and the ninth figure is a block diagram of the web color matching system of the present invention.

S1~S4‧‧‧ steps

Claims (10)

A webpage color matching method includes: (1) inputting a picture into a computer device to capture a main color of the picture by the computer device; (2) causing the computer device to find a corresponding color in a hue circle according to the main color (3) according to the color of the main color, find the auxiliary color of the main color and the color of the embellishment color in the hue circle; and (4) make the main color, auxiliary color and embellishment of the computer device The colors of the colors are respectively applied to a plurality of color matching areas pre-divided according to a predetermined ratio in a web page. The webpage color matching method according to claim 1, wherein the step (1) comprises converting the main color into a corresponding color of the HSV color space, and converting the color of the HSV color space into the hue circle. The step corresponding to the color of the main color. The webpage color matching method according to claim 1, wherein the hue ring is an Eden hue circle. The method for color matching of a webpage according to claim 1, wherein the step (4) includes the steps of adjusting the brightness and chroma of the primary color, the auxiliary color, and the dotted color. The method for color matching of a webpage as described in claim 4, wherein the step (4) includes the step of adjusting the visibility of the text of the webpage according to the brightness and chroma of the primary color, the auxiliary color, and the dotted color. . The method for color matching of a webpage as described in claim 1 of the patent application, wherein The ratio of the color matching area corresponding to the main color is 70%, the ratio of the color matching area corresponding to the auxiliary color is 25%, and the ratio of the color matching area corresponding to the dotted color is 5%. A computer readable recording medium for storing a computer program for performing the method of claim 1. A webpage color matching system includes: a color capturing unit for capturing a main color of a picture; and a color searching unit for finding a color corresponding to the main color in a hue circle, and according to the color of the main color The hue circle finds the auxiliary color of the main color and the color of the embellishment color; and the color configuration unit applies the main color, the auxiliary color and the embellishment color respectively to a plurality of color matching areas divided by a predetermined ratio in a web page. The webpage color matching system of claim 8, wherein the color configuration unit adjusts the brightness of the primary color, the auxiliary color, and the dotted color after the primary color, the auxiliary color, and the dotted color are disposed on the webpage. Chroma, and adjust the visibility of the text of the web page according to the colors of the main color, the auxiliary color and the dotted color. For example, in the webpage color matching system described in claim 8, wherein the ratio of the color matching area corresponding to the main color is 70%, and the ratio of the color matching area corresponding to the auxiliary color is 25%, corresponding to the color matching of the color The ratio of the regions is 5%.