Interactive color card editing method and system based on color model

Abstract

The invention discloses an interactive color card editing method and system based on a color model, and the method comprises the steps: receiving color card editing information inputted by a user, and the color card editing information comprises a brightness value and a hue value or a picture file or a screen color taking coordinate; color card generation processing is carried out on the color card editing information to generate corresponding initial color card data, and the initial color card data comprises an initial color card matrix or an HSL color matrix or a user-defined color card matrix; structured recombination and visual optimization are conducted on the initial color card data to obtain a corresponding color card form, and the color card form comprises a color card matrix which is grouped according to hues and ranked in brightness or a standardized picture color card or a user-defined color matching color card; and outputting the corresponding color card form. According to the method and the system, the problems of single color model, low color matching efficiency, operation splitting and the like of a traditional tool are solved, and the design efficiency and the user experience are remarkably improved.

Description

Technical Field

[0001] The present invention relates to the technical field of computer graphics processing, and particularly to an interactive color card editing method and system based on a color model. Background Art

[0002] Traditional color card editing tools have the following technical defects: The color model is single, relying on the static RGB model, which is difficult to intuitively reflect the dynamic relationship between hue, saturation, and brightness, resulting in limited color adjustment dimensions. The color matching efficiency is low. Schemes such as complementary colors and similar colors need to be designed manually, which is time-consuming and error-prone. The tools are fragmented. Screen color picking, picture import, and color card editing need to be completed by switching different tools, and the operation process is cumbersome. The color card management is disordered. There is a lack of automated logic for grouping by hue and sorting by brightness, and the color arrangement is messy, affecting the design efficiency. Although there are color card generation tools in the prior art, the above problems have not been systematically solved. The present invention significantly improves the intelligent level and user experience of color card editing through dynamic HSL hue ring generation, intelligent color matching algorithms, cross-tool integration, and color level sorting mechanisms. Summary of the Invention

[0003] To solve the technical problems in the background art, the present invention proposes an interactive color card editing method and system based on a color model.

[0004] An interactive color card editing method based on a color model proposed by the present invention includes: Receiving color card editing information input by a user, where the color card editing information includes a brightness value and a hue value or a picture file or screen color picking coordinates; Performing color card generation processing on the color card editing information to generate corresponding initial color card data, where the initial color card data includes an initial color card matrix or an HSL color matrix or a custom color card matrix; Performing structured reorganization and visual optimization on the initial color card data to obtain a corresponding color card form, where the color card form includes a color card matrix grouped by hue and sorted by brightness or a standardized picture color card or a user-defined color matching color card; Outputting the corresponding color card form.

[0005] Preferably, the color card editing information is specifically a brightness value and a hue value; the performing color card generation processing on the color card editing information to generate corresponding initial color card data is specifically: Generating an initial color card matrix based on the brightness value, the hue value, and the HSL to RGB color conversion formula.

[0006] Preferably, the initial color card data is specifically an initial color card matrix; the performing structured reorganization and visual optimization on the initial color card data to obtain a corresponding color card form is specifically: Map the hue value to the hue ring in the HSL model and evenly divide it into 12 hue groups; Arrange the colors in the initial color card matrix in ascending order of brightness within each hue group; Transpose the rows and columns of the sorted initial color card matrix to generate a color card matrix grouped by hue and sorted by brightness.

[0007] Preferably, the color card editing information is specifically a picture file; the process of generating a color card from the color card editing information to generate corresponding initial color card data is specifically as follows: Perform bilinear interpolation on the imported picture file to scale it to a fixed canvas size, and divide the scaled picture file into grids according to the target color card size k×k, sample the RGB color data corresponding to the scaled picture file according to the grid center points, and convert the RGB color data into an HSL color matrix.

[0008] Preferably, the initial color card data is specifically an HSL color matrix; the process of structurally reorganizing and visually optimizing the initial color card data to obtain the corresponding color card form is specifically as follows: Extract the colors from the picture file, classify them by hue, map the hue values corresponding to the picture file to the hue ring in the HSL model, and evenly divide them into 12 hue groups; Arrange the colors in the HSL color matrix in ascending order of brightness within each hue group; After transposing the rows and columns of the sorted HSL color matrix, perform color deduplication, outlier filtering, and color correction processing to generate a standardized picture color card.

[0009] Preferably, the color card editing information is specifically the screen color picking coordinates; the process of generating a color card from the color card editing information to generate corresponding initial color card data is specifically as follows: Capture the pixel RGB value corresponding to the newly added color according to the screen color picking coordinates; Input the pixel RGB value into the HSL model to obtain the hue value and brightness value corresponding to the newly added color; Fill the newly added color into the color card cells specified by the user to obtain a custom color card matrix.

[0010] Preferably, the process of structurally reorganizing and visually optimizing the initial color card data to obtain the corresponding color card form is specifically as follows: Map the hue value corresponding to the newly added color to the hue ring in the HSL model and evenly divide it into 12 hue groups; Arrange the colors in the custom color card matrix in ascending order of the corresponding brightness values within each hue group; Transpose the sorted custom color card matrix by rows and columns to generate a user-defined color matching color card.

[0011] Preferably, it further includes: Record all operations of the user on the color card, and save all color card versions in the order of operations, so that undo or redo operations can be performed during the operation process.

[0012] Preferably, it further includes: Convert the color card form into an image matrix and output it in PNG or JPEG format.

[0013] An interactive color card editing system based on a color model proposed by the present invention includes: A data acquisition module for receiving color card editing information input by the user, where the color card editing information includes a brightness value and a hue value or a picture file or a screen color picking coordinate; A color card generation module for performing color card generation processing on the color card editing information to generate corresponding initial color card data, where the initial color card data includes an initial color card matrix or an HSL color matrix or a custom color card matrix; A color card processing module for performing structural reorganization and visual optimization on the initial color card data to obtain a corresponding color card form, where the color card form includes a color card matrix grouped by hue and sorted by brightness or a standardized picture color card or a user-defined color matching color card; An output module for outputting the corresponding color card form.

[0014] In the present invention, the proposed interactive color card editing method and system based on a color model solve the problems of single color model, low color matching efficiency, and fragmented operations in traditional tools through dynamic HSL hue ring generation, intelligent color matching algorithms, cross-tool integration, and color level sorting mechanisms. The system supports functions such as automated generation, picture parsing, manual adjustment, and history management, and can output professional color cards grouped by hue and sorted by brightness, significantly improving the design efficiency and user experience. Description of the Drawings

[0015] Figure 1 It is a schematic structural diagram of the working process of the interactive color card editing method based on a color model proposed by the present invention; Figure 2 It is a schematic structural diagram of the implementation process of the interactive color card editing method based on a color model proposed by the present invention; Figure 3 It is a schematic structural diagram of the initial color card matrix of Embodiment 1 of the interactive color card editing method based on a color model proposed by the present invention; Figure 4 It is a schematic structural diagram of the color card matrix grouped by hue and sorted by brightness of Embodiment 1 of the interactive color card editing method based on a color model proposed by the present invention; Figure 5 Schematic diagram of the picture file structure of Embodiment 2 of the interactive color card editing method based on a color model proposed by the present invention; Figure 6 Schematic diagram of the structure of the standardized picture color card of Embodiment 2 of the interactive color card editing method based on a color model proposed by the present invention. Detailed implementation manners

[0016] Referring to Figures 1-6 , an interactive color card editing method based on a color model proposed by the present invention includes the following steps: S1: Receive color card editing information input by a user, where the color card editing information includes a brightness value and a hue value, or a picture file, or a screen color picking coordinate.

[0017] S2: Perform color card generation processing on the color card editing information to generate corresponding initial color card data, where the initial color card data includes an initial color card matrix, or an HSL color matrix, or a custom color card matrix.

[0018] S3: Perform structured reorganization and visual optimization on the initial color card data to obtain a corresponding color card form, where the color card form includes a color card matrix grouped by hue and sorted by brightness, or a standardized picture color card, or a user-defined color matching color card.

[0019] S4: Output the corresponding color card form.

[0020] Embodiment 1: In this embodiment, the color card editing information is specifically a brightness value and a hue value; performing color card generation processing on the color card editing information to generate corresponding initial color card data, specifically: generating an initial color card matrix based on the brightness value, the hue value, and the HSL-to-RGB color conversion formula.

[0021] In this embodiment, the initial color card data is specifically an initial color card matrix; performing structured reorganization and visual optimization on the initial color card data to obtain a corresponding color card form, specifically: mapping the hue value to the hue ring in the HSL model, evenly dividing it into 12 hue groups; sorting the colors in the initial color card matrix in ascending order of brightness within each hue group; performing row-column transposition on the sorted initial color card matrix to generate a color card matrix grouped by hue and sorted by brightness.

[0022] In this embodiment, by adjusting the brightness of the edit, different brightness values are changed to cooperate with the change of the hue to generate color changes.

[0023] Specifically, click on global tone filling. The brightness value (marked as ) represents the lightness and darkness of the color in the HSL color model, and the value range is (0, 1). Suppose = 0 represents pure black (regardless of hue), such as = 1 represents pure white, such as 0< < 1 represents the mixed result of hue and brightness. Combining with the hue (Hue marked as h) to express the basic attributes of colors (such as red, green, blue), the value range in the HSL color model is h (0, 1), corresponding to the angle 0° ≤ h < 360°. For example, h = 0 represents red, h = 0.33 represents green, and h = 0.66 represents blue.

[0024] By traversing each grid, after randomly generating the hue, the color object is filled in the grid by converting the color. Traverse all cells. Let i represent the row number and j represent the column number, and their value ranges are i (0, number of rows - 1), j (0, number of columns - 1), and then generate a uniformly distributed random floating-point value h through random.random() [0, 1) to ensure color diversity. Then convert Hsl to Rgb color through color conversion. The core steps of the conversion are: ; Among them, is the brightness, and its value range is from 0 to 1, 0 is pure black, and 1 is pure white. is the saturation, and its value range is from 0 to 1, 0 is grayscale, and 1 is fully saturated; q is the dynamically adjusted brightness critical value used to calculate the intermediate transition parameter of the RGB component; P is the intermediate variable symmetric to q, used to jointly define the interpolation range of the RGB component as [p, q], which is the basic threshold for color channel calculation.

[0025] Then through the defined by the user and h, the hue h is mapped to 6 phase intervals (red → yellow → green → cyan → blue → purple → red). The values of the RGB components within each interval are calculated by linear interpolation of p and q. For example, the red channel may be q in a certain phase interval, and the green channel is p + (q - p) × f (f is the decimal part of the phase). Finally, by combining the traversed cells, call self.draw_cell(i, j, color) to perform random color arrangement for each cell.

[0026] In this embodiment, the function of sorting by color level includes: obtaining the pixel RGB values of the positions of each cell by calculating the central coordinates of all cells.

[0027] Traverse all cells. The traversal logic is as described in the above traversal process. Subsequently, assuming that the image area is rectangular, calculate the center point coordinates to obtain the pixel RGB value at that position, which represents the "main color" of the area. The calculation method is , where and are the center point coordinates, and width and height are the width and height (in pixels) of the image area.

[0028] In this embodiment, by converting the pixel RGB color to HSL and grouping the colors with similar hues into the same group, and then mapping them to 12 groups for subsequent analysis and output.

[0029] Specifically, convert the RGB color of the pixel to HSL, and perform color conversion through the following conversion formula: , where The value needs to be normalized to to take values The value obtained in represents the hue angle, corresponding to the position on the color wheel, The value obtained in represents the saturation and the vividness of the color, The value obtained in represents the brightness and the lightness of the color. Then, perform grouped calculation on the obtained HSL colors (using a 12-group strategy) and map the hue (already normalized to the 0-1 range) to 12 groups. The formula is: , Its logical meaning is to divide the 360° hue wheel into 12 intervals (each 30° as a group), corresponding to 12 basic colors (such as red, orange, yellow, etc.), realizing color classification management by hue. Then, group the colors with similar hues into the same group for subsequent analysis and sorting and output of the color groups. Sort the obtained color groups according to the brightness sorting logic, so as to present the gradual change logic of the color from dark to bright, and thus achieve the color scale sorting.

[0030] Specifically, sort each color group according to the brightness by obtaining the above color groups. The sorting logic is group_colors.sort(key=lambda ), where the meaning is that X represents the color data item, and X[1]: represents extracting the brightness as the sorting key, and sort in ascending order (from small to large) according to . After sorting, the color groups present a gradual change effect from dark to bright, achieving the logic of sorting the unified hue groups by brightness and forming the logic of color scale sorting. Transpose the rows and columns of the obtained hue arrangement groups according to the corresponding column filling strategy to obtain a more intuitive visual expression.

[0031] In this embodiment, by obtaining the above-mentioned hue sorting group, the corresponding cells are filled from left to right and top to bottom according to the column filling strategy, and the original row-column indexes (i, j) are exchanged to (j, i) to achieve the row-column transposition of the matrix, converting the element in the i-th row and j-th column of the original matrix to the element in the j-th row and i-th column, and then arranging them. For example, if the input color matrix is 5 rows × 12 columns (grouped by 12 hues), after brightness sorting and row-column transposition, a color card matrix of 12 rows × 5 columns is output, with each row corresponding to a hue group and each column arranged in ascending order of brightness.

[0032] In this embodiment, the global color tone filling function, combined with the adjustment of the brightness threshold, can randomly generate a color matrix with free combinations. Or through the function of sorting by color scale, all its colors are sorted in an orderly manner according to the RGB color scale of brightness to optimize the color visual sequence.

[0033] Embodiment 2: In this embodiment, the color card editing information is specifically a picture file; the color card editing information is processed to generate corresponding initial color card data, specifically: The imported picture file is scaled to a fixed canvas size by bilinear interpolation and divided into grids according to the target color card size k×k. The RGB color data corresponding to the scaled picture file is obtained by sampling at the center points of the grids, and the RGB color data is converted into an HSL color matrix.

[0034] In this embodiment, the initial color card data is specifically an HSL color matrix; the initial color card data is structurally reorganized and visually optimized to obtain the corresponding color card form, specifically: the colors extracted from the picture file are classified according to hue, and the hue values corresponding to the picture file are mapped to the hue ring in the HSL model and evenly divided into 12 hue groups; the colors in each hue group of the HSL color matrix are arranged in ascending order of brightness value; after row-column transposition of the sorted HSL color matrix, color deduplication, outlier filtering, and color correction processing are performed to generate a standardized picture color card.

[0035] In this embodiment, scaling the imported picture file to a fixed canvas size by bilinear interpolation specifically includes: importing an image file and standardizing the image through coordinate mapping and interpolation.

[0036] Specifically, select an image file to import and load the image, and force it to be scaled to the canvas size through image.resize((900, 900)). The core of this method is coordinate mapping and interpolation calculation. Assume the original image is , and the target size is , then the scaling formula is: ; wherein, is the coordinate (floating point number) of the corresponding pixel in the original image, is the coordinate of the current pixel in the target image ( _dst _dst ). Its fundamental purpose is to scale an image of any size to a fixed size (900×900), ensure a unified canvas for subsequent processing, and retain the main content of the image through uniform sampling and interpolation to avoid deformation and information loss.

[0037] In this embodiment, the scaled picture file is divided into grids according to the target color card size k×k, the RGB color data corresponding to the scaled picture file is obtained by sampling at the center points of the grids, and the RGB color data is converted into an HSL color matrix, which specifically includes: performing grid center sampling on the processed standardized image data based on the current color card size, and outputting a two-dimensional color matrix. Through the initial color card data and the current size card parameters, by calculating the unit size, and ensuring that each cell size is an integer pixel by integer division to avoid drawing misalignment. The significance of this mathematical equation is to divide the 900*900 canvas into size×size grids, and each cell is a square. For example, if size = 10, then cell_size = 90, generating a 10×10 color card matrix, and each cell is 90×90 pixels. Then traverse each grid, calculate the center coordinates, sample the color, and set and represent the row and column indices, with the range 0 ≤ , <size ( controls the vertical direction, controls the horizontal direction), and let x and y represent the screen coordinates of the center point of the cell for precise color filling positioning, then the derivation formula is: , For example, if cell_suze = 100, then the center coordinates of the second row and the third column ([[ID= thirty-five]] = 2) are (2×100 + 50, 1×100 + 50) = (250, 150). Through double-loop traversal of the obtained color matrix, each grid is sampled at the strict center point without interpolation, and then the color is mapped into the color card. Based on the above matrix, for each cell, the logical method self.draw_cell(i, j, color) is called for cell drawing. Its logic is to first convert the obtained index ( , ) into screen coordinates. The conversion method is that X and Y represent the start and end of x, and the start and end of y respectively , Then, by calling the create_rectangle method of Tkinter Canvas, the call form of Canvas.create_rectangle in Tkinter is as follows: (rect_id = canvas.create_rectangle(x0, y0, x1, y1, # Diagonal coordinates of the rectangle fill="color", # Filling color (HEX or color name) outline="border_color", # Border color width=border_width, # Border thickness (in pixels) tags=("tag1", "tag2") # Object tags (for batch operations)); Its purpose is to strictly map the color 1:1 to the color swatch grid after central point sampling, and finally complete the processing of the imported picture.

[0038] In this embodiment, after importing the picture, a color swatch corresponding to the color sample of the picture will be automatically generated according to the parsing of the sampling data of the picture, which can be conveniently used for selecting colors with a unified color tone for the picture.

[0039] Embodiment 3: In this embodiment, the color swatch editing information is specifically the screen color pick-up coordinates; performing color swatch generation processing on the color swatch editing information to generate corresponding initial color swatch data, specifically: capturing the pixel RGB value corresponding to the newly added color according to the screen color pick-up coordinates; inputting the pixel RGB value into the HSL model to obtain the hue value and brightness value corresponding to the newly added color; filling the newly added color into the color swatch cell specified by the user to obtain a custom color swatch matrix.

[0040] In this embodiment, performing structured reorganization and visual optimization on the initial color swatch data to obtain the corresponding color swatch form, specifically: mapping the hue value corresponding to the newly added color to the hue ring in the HSL model and evenly dividing it into 12 hue groups; arranging the colors in the custom color swatch matrix in ascending order of the corresponding brightness value within each hue group; performing row-column transposition on the sorted custom color swatch matrix to generate a user-defined color matching color swatch.

[0041] In this embodiment, by clicking the eyedropper tool, the content of the screen can be observed through the semi-transparent window to obtain the content captured from the screen.

[0042] Specifically, after clicking the eyedropper tool button, a full-screen semi-transparent overlay is created, and the parameters alpha=0.3 and -topmost=True are used for semi-transparency. The parameter alpha=0.3 represents the mixing weight of the overlay color and the background color (30% overlay, 70% background prominence) to achieve the semi-transparent window effect, and -topmost=True means forcing the window to be always on top to ensure the window.

[0043] In this embodiment, coordinate tracking is achieved by obtaining the coordinate position of the mouse.

[0044] Specifically, by calling the operating system's API, pyautogui.position() is used to obtain the mouse coordinate position. The mathematical expression is (x, y) = GetCursorPos(), where x and y are the returned integer tuples, and GetCursorPos is the operating system API command of (Windows API) or XQueryPointer() (Linux X11). What is achieved is to call the operating system API to obtain the absolute screen coordinates of the mouse in real time (unit: pixel). The coordinate origin is the upper left corner of the screen. For example, the return value is an integer tuple (x, y), such as (960, 540) representing the center point of the screen (assuming the resolution is 1920×1080).

[0045] In this embodiment, by clicking on the corresponding color to be selected on the screen, the color information of the corresponding point is obtained, and then the obtained color is placed in the color palette.

[0046] Specifically, the mouse position obtained is used to select the corresponding color to be selected on the screen and click. When clicking, the operation pyautogui.screenshot().getpixel((x, y)) is performed on the selected content. The logic is that screenshot() takes a screenshot to generate the pixel matrix of the current screen as (x,y), with dimensions of W (image width) × H (image height) × 3 (the color channels are R (red), G (green), and B (blue) respectively). Then, getpixel((x, y)) is used to access the pixel value at (x, y) in the matrix, and a triple (R,G,B) is returned, with a value range of [0,255]. Finally, the obtained color is placed in the color palette.

[0047] In this embodiment, the color picker tool function includes: creating a dynamic color ring so that color selection can be performed on the color ring image.

[0048] Specifically, the dynamic color ring algorithm is generated through to be generated. where Represents the absolute coordinates (integer type) of the canvas pixels used to identify the position of the currently processed pixel. If the canvas size is (such as ), then . Represents the Euclidean distance (floating point number) from the pixel point to the center of the color ring. Its calculation formula is: , Its constraint condition is that if , this pixel does not participate in the color ring rendering. Among them, Represents the maximum radius of the color ring, which is used to limit the display range of the color ring and avoid overflowing the canvas. In the HSL color parameters, H represents hue, expressing the basic attribute of the color, corresponding to the color ring angle, and the range is , mapped to (such as corresponding to cyan). S represents saturation, expressing the purity of the color, gradually changing from the center to the edge. Its range is the normalized value is gray, is pure color, and the calculation method is . L represents brightness, expressing the light and dark degree of the color, and the range is is black, is white. The purpose of hsl_to_rgb is to convert the HSL color space to the standard function of the RGB color space, and the conversion logic is the same as the above conversion process, obtaining the RGB triple (R, G, B), and the range of each channel is 0~255. Canvas represents performing the following operations on each pixel of the canvas: 1. Calculate the distance from the current pixel to the center of the color ring ; 2. If , calculate the corresponding and ; 3. Combine the current brightness , generate the RGB color and fill the pixel; Generate a color ring through the above logical algorithm.

[0049] In this embodiment, the corresponding color panel is obtained by clicking on the canvas and the brightness bar below the canvas, and the color of the corresponding color card is obtained by clicking on the corresponding color.

[0050] Specifically, click on the color wheel canvas to obtain the coordinates of the color wheel click (event.x, event.y), where event.x represents the horizontal coordinate of the mouse pointer on the canvas control when clicking, and event.y represents the vertical coordinate on the canvas control when clicking, thus triggering the click content. Then, calculate the offsets dx = x - center_x and dy = y - center_y relative to the center of the color wheel, where x and y represent the absolute coordinates of the click position on the canvas, center_x and center_y represent the center coordinates of the color wheel, and dx and dy represent the horizontal and vertical offsets of the click position relative to the center of the color wheel, thereby obtaining the values of H and S. Through the brightness slider in the control, synchronously obtain the current brightness value as L, and combine the previous values to obtain the complete HSL color parameters as (H, S, L). Then, generate the RGB color by calling hsl_to_rgb(H, S, L) as mentioned in 4 - S4, and then obtain the color corresponding to the mouse coordinates and put the obtained color into the color palette.

[0051] In this embodiment, the color matching scheme function includes: providing and using suggestions for three color matching schemes based on the colors obtained from the color picker tool function and the eyedropper tool function.

[0052] Specifically, provide color schemes of complementary colors, analogous colors, and triadic colors based on the colors obtained from the color picker tool function and the eyedropper tool function. Among them, the generation logic of complementary colors is: , where h represents the position of the original color on the hue wheel, +0.5 represents the half - turn offset of the hue wheel, and the mod 1.0 operation ensures that the result falls within the valid range to prevent overflow. For example, when h = 0.7, 0.7 + 0.5 = 1.2, and after taking the modulus, it is 0.2. The obtained complementary color is used to maximize color contrast and is used for emphasis or visual impact design.

[0053] The generation logic of analogous colors is: , The others are the same as above. The meaning of 30 / 360 is the normalized value of a 30° angle, which is used to convert the angle into a ratio. Among them, mod 1.0 is used to handle negative values. For example, when h = 0.1, 0.1 - 0.0833 = 0.0167, then no correction is required. When h = 0.05, the result is -0.0333, and after taking the modulus, it is 0.9667. The obtained analogous color is used for creating a gradient or soft - themed color.

[0054] The triadic color formula is: , The rest is the same as above. 120 / 360 represents the normalized value of a 120° angle. Usually, calling it twice consecutively generates three color schemes. For example, the reference color = 0 (red), the three colors are 0.333 (green) and 0.666 (blue). The obtained three-color color scheme is often used in multi-element designs.

[0055] S5: Record all operations of the user on the color swatch, and save all versions of the color swatch in the order of operations, so that undo or redo operations can be performed during the operation.

[0056] Specifically, by adopting a stack data structure to manage the operation history, a multi-level rollback function is implemented.

[0057] S6: Convert the color swatch form into an image matrix and output it in PNG or JPEG format.

[0058] Specifically, combined with vector graphics rendering technology, color swatches of any size are output, and the display consistency at different resolutions is ensured through an adaptive layout algorithm.

[0059] In this embodiment, the rollback function includes: storing colors in the color swatch editor, so that the functions of adding, undoing, and redoing can be realized.

[0060] Specifically, in the color swatch editor, use color_history, store it as a list, and store the historical color swatch states of user operations. Each element is a complete snapshot of the color swatch matrix. Its formula is , where represents the initial state (empty or default color swatch), expresses that the latest state has a length of n + 1. The logical equation for adding a new state is color_history color_history[:current_index + 1 , which means clearing the history after the current index and appending the new state. current_index represents the updated position to the latest . The logical equation for undo is current_index , current_index - 1 , which means the index moves forward. The logical equation for redo is current_index , current_index + 1 , which means the index moves backward, so as to achieve the realization of the rollback function.

[0061] In this embodiment, the function of exporting the color swatch includes: exporting the picture to a specified location for use after editing.

[0062] Specifically, click the export button to export the picture. The mathematical logic of its image generation lies in the pixel matrix construction: color card matrix is converted into an image matrix : , where represents the color card matrix, k is the number of rows and columns set by the user (such as 12×12), cell_size is the pixel size of the cell, calculated as 900 / / K, expresses the pixel matrix of the output image, with dimensions 900×900×3. Then when exporting the content of this editor as PNG / JPEG, execute: File , format, compression_params , so as to perform the export.

[0063] In this embodiment, the function of selecting the color card size includes: the size of the color card can be changed according to requirements.

[0064] Specifically, a blank canvas is generated by reconstructing the logic Image.new('RGB',(900,900)) based on the power-of-two options (2^1 to 2^9).

[0065] In this embodiment, for the cells of the processed color patches that need to be adjusted, according to the function of the eyedropper tool, the color of the corresponding screen pixels can be extracted to achieve the purpose of picking the screen color to the corresponding edit box to be placed. It is also possible to obtain the corresponding color by adjusting the color ring and brightness threshold in the color selector tool function, so as to achieve the purpose of picking the color from the color ring to the corresponding edit box to be placed. Among the colors based on the functions of the eyedropper tool and the color selector tool, a professional color matching combination of complementary colors, analogous colors, and triadic colors can be selected through the color matching scheme function, and the required color can be selected to achieve the purpose of the corresponding edit box to be placed.

[0066] Refer to Figures 1-6 , a color card editing system based on a color model proposed by the present invention includes: A data acquisition module, configured to receive color card editing information input by a user, where the color card editing information includes a brightness value, a hue value, or a picture file, or screen color picking coordinates.

[0067] A color card generation module, configured to perform color card generation processing on the color card editing information to generate corresponding initial color card data, where the initial color card data includes an initial color card matrix, an HSL color matrix, or a custom color card matrix.

[0068] A color card processing module, which is used to perform structured recombination and visual optimization on the initial color card data to obtain the corresponding color card form. The color card form includes a color card matrix grouped by hue and sorted by brightness, a standardized picture color card, or a user-defined color matching color card.

[0069] An output module, which is used to output the corresponding color card form.

[0070] As mentioned above, the above is only a preferred specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention, according to the technical solution and inventive concept of the present invention, makes equivalent substitutions or changes, and should be covered by the protection scope of the present invention.

Claims

1. An interactive color card editing method based on a color model, characterized in that, Including: Receiving color card editing information input by a user, where the color card editing information includes a brightness value and a hue value, or a picture file, or screen color picking coordinates; Performing color card generation processing on the color card editing information to generate corresponding initial color card data, where the initial color card data includes an initial color card matrix, or an HSL color matrix, or a custom color card matrix; Performing structured reorganization and visual optimization on the initial color card data to obtain a corresponding color card form, where the color card form includes a color card matrix grouped by hue and sorted by brightness, or a standardized picture color card, or a user-defined color matching color card; Outputting the corresponding color card form.

2. The interactive color swatch editing method based on a color model according to claim 1, wherein, The color card editing information is specifically a brightness value and a hue value; the performing of color card generation processing on the color card editing information to generate corresponding initial color card data is specifically: Generating an initial color card matrix based on the brightness value, the hue value, and the HSL to RGB color conversion formula.

3. The interactive color swatch editing method based on a color model according to claim 2, wherein The initial color card data is specifically an initial color card matrix; the performing of structured reorganization and visual optimization on the initial color card data to obtain a corresponding color card form is specifically: Mapping the hue value to the hue ring in the HSL model and evenly dividing it into 12 hue groups; Sorting the colors in the initial color card matrix in ascending order of brightness value within each hue group; Performing row-column transposition on the sorted initial color card matrix to generate a color card matrix grouped by hue and sorted by brightness.

4. The interactive color swatch editing method based on a color model according to claim 1, characterized in that The color card editing information is specifically a picture file; the performing of color card generation processing on the color card editing information to generate corresponding initial color card data is specifically: Performing bilinear interpolation on the imported picture file to scale it to a fixed canvas size, and dividing the scaled picture file into grids according to the target color card size k×k, sampling the RGB color data corresponding to the scaled picture file according to the grid center points, and converting the RGB color data into an HSL color matrix.

5. The interactive color swatch editing method based on a color model according to claim 4, wherein The initial color card data is specifically an HSL color matrix; the performing of structured reorganization and visual optimization on the initial color card data to obtain a corresponding color card form is specifically: Classifying the colors extracted from the picture file by hue, mapping the hue value corresponding to the picture file to the hue ring in the HSL model, and evenly dividing it into 12 hue groups; Sorting the colors in the HSL color matrix in ascending order of brightness value within each hue group; After performing row-column transposition on the sorted HSL color matrix, performing color deduplication, outlier filtering, and color correction processing to generate a standardized picture color card.

6. The interactive color card editing method based on a color model according to claim 1, wherein The color card editing information is specifically screen color picking coordinates; the performing of color card generation processing on the color card editing information to generate corresponding initial color card data is specifically: Capturing the pixel RGB value corresponding to the newly added color according to the screen color picking coordinates; Inputting the pixel RGB value into the HSL model to obtain the hue value and the brightness value corresponding to the newly added color; Filling the newly added color into the color card cells specified by the user to obtain a custom color card matrix.

7. The interactive color swatch editing method based on a color model according to claim 6, characterized in that, The performing of structured reorganization and visual optimization on the initial color card data to obtain a corresponding color card form is specifically: Mapping the hue value corresponding to the newly added color to the hue ring in the HSL model and evenly dividing it into 12 hue groups; Arrange the colors in the custom color swatch matrix in ascending order of the corresponding brightness values within each hue group; Perform row-column transposition on the sorted custom color swatch matrix to generate a user-defined color matching color swatch.

8. The interactive color card editing method based on a color model according to claim 1, wherein, It also includes: Record all operations of the user on the color swatch, and save all versions of the color swatch in the order of operations, so that undo or redo operations can be performed during the operation.

9. The interactive color swatch editing method based on a color model according to claim 1, characterized in that It also includes: Convert the color swatch form into an image matrix and output it in PNG or JPEG format.

10. An interactive color swatch editing system based on a color model, characterized in that, It includes: A data acquisition module for receiving color swatch editing information input by the user, where the color swatch editing information includes brightness values, hue values, or picture files or screen color picking coordinates; A color swatch generation module for performing color swatch generation processing on the color swatch editing information to generate corresponding initial color swatch data, where the initial color swatch data includes an initial color swatch matrix, an HSL color matrix, or a custom color swatch matrix; A color swatch processing module for performing structured reorganization and visual optimization on the initial color swatch data to obtain a corresponding color swatch form, where the color swatch form includes a color swatch matrix grouped by hue and sorted by brightness, a standardized picture color swatch, or a user-defined color matching color swatch; An output module for outputting the corresponding color swatch form.

Images