An interactive color card editing method and system based on a color model

Abstract

The application discloses an interactive color card editing method and system based on a color model, which comprises the following steps: receiving color card editing information input by a user, wherein the color card editing information comprises a brightness value, a hue value, 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, wherein the initial color card data comprises an initial color card matrix, an HSL color matrix or a self-defined color card matrix; performing structured reorganization and visual optimization on the initial color card data to obtain corresponding color card forms, wherein the color card forms comprise a color card matrix grouped according to hue and sorted according to brightness, a standardized picture color card or a user-defined color matching color card; and outputting the corresponding color card forms. The method and system solve the problems of single color model, low color matching efficiency and fragmented operation of traditional tools, and significantly improve design efficiency and user experience.

Description

Technical Field

[0001] This invention relates to the field of computer graphics processing technology, and in particular to an interactive color card editing method and system based on a color model. Background Technology

[0002] Traditional color chart editing tools suffer from the following technical shortcomings: They rely on a single, static RGB model, making it difficult to intuitively reflect the dynamic relationships between hue, saturation, and brightness, thus limiting the dimensions of color adjustment. Color matching efficiency is low; complementary and analogous color schemes require manual design, which is time-consuming and prone to errors. Tools are fragmented; screen color picking, image import, and color chart editing require switching between different tools, resulting in a cumbersome workflow. Color chart management is disorganized, lacking automated logic based on hue grouping and brightness sorting, leading to chaotic color arrangements and impacting design efficiency. While color chart generation tools exist in existing technologies, they do not systematically address the aforementioned problems. This invention significantly improves the intelligence level and user experience of color chart editing through dynamic HSL hue wheel generation, intelligent color matching algorithms, cross-tool integration, and a color level sorting mechanism. Summary of the Invention

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

[0004] This invention proposes an interactive color chart editing method based on a color model, comprising: Receive color chart editing information input by the user, the color chart editing information including brightness value and hue value or image file or screen color coordinates; The color chart editing information is processed to generate the corresponding initial color chart data, which includes an initial color chart matrix, an HSL color matrix, or a custom color chart matrix. The initial color chart data is restructured and visually optimized to obtain the corresponding color chart format, which includes a color chart matrix grouped by hue and sorted by brightness, a standardized image color chart, or a user-defined color chart. Output the corresponding color chart format.

[0005] Preferably, the color chart editing information specifically includes brightness and hue values; the step of performing color chart generation processing on the color chart editing information to generate corresponding initial color chart data specifically includes: An initial color chart matrix is ​​generated based on the brightness value, hue value, and HSL to RGB color conversion formula.

[0006] Preferably, the initial color chart data is specifically an initial color chart matrix; the step of structurally reorganizing and visually optimizing the initial color chart data to obtain the corresponding color chart format specifically involves: The hue values ​​are mapped onto the hue wheel in the HSL model, and evenly divided into 12 hue groups; Arrange the colors in the initial color chart matrix in ascending order of brightness value within each hue group; Transpose the sorted initial color card matrix to generate a color card matrix grouped by hue and sorted by brightness.

[0007] Preferably, the color chart editing information is specifically an image file; the step of performing color chart generation processing on the color chart editing information to generate corresponding initial color chart data specifically involves: The imported image file is scaled to a fixed canvas size using bilinear interpolation, and then adjusted according to the target color swatch size. The scaled image file is divided into a grid using the k×k method. The RGB color data corresponding to the scaled image file is obtained by sampling at the center point of the grid, and the RGB color data is converted into an HSL color matrix.

[0008] Preferably, the initial color chart data is specifically an HSL color matrix; the step of structurally reorganizing and visually optimizing the initial color chart data to obtain the corresponding color chart format specifically involves: The colors extracted from the image files are classified by hue, and the corresponding hue values ​​of the image files are mapped to the hue wheel in the HSL model, which is evenly divided into 12 hue groups. Arrange the colors in the HSL color matrix in ascending order of brightness value within each hue group; After transposing the sorted HSL color matrix, color deduplication, outlier filtering, and color correction are performed to generate a standardized image color chart.

[0009] Preferably, the color chart editing information is specifically screen color coordinates; the step of performing color chart generation processing on the color chart editing information to generate corresponding initial color chart data specifically includes: Capture the pixel RGB value corresponding to the new color based on the screen color picker coordinates; Input the pixel RGB values ​​into the HSL model to obtain the hue and brightness values ​​corresponding to the new color; The new color is filled into the user-specified color swatch cells to obtain a custom color swatch matrix.

[0010] Preferably, the step of structurally reorganizing and visually optimizing the initial color chart data to obtain the corresponding color chart format specifically involves: The hue values ​​corresponding to the new colors are mapped to the hue wheel in the HSL model and evenly divided into 12 hue groups; Arrange the colors in the custom color chart matrix in ascending order according to their corresponding brightness values ​​within each hue group; The sorted custom color swatch matrix is ​​transposed to generate a user-defined color swatch.

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

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

[0013] This invention proposes an interactive color chart editing system based on a color model, comprising: The data acquisition module is used to receive color card editing information input by the user. The color card editing information includes brightness values ​​and hue values, or image files, or screen color coordinates. The color chart generation module is used to process the color chart editing information to generate the corresponding initial color chart data, which includes an initial color chart matrix, an HSL color matrix, or a custom color chart matrix. The color card processing module is used to perform structured recombination and visual optimization on the initial color card data to obtain the corresponding color card format. The color card format includes a color card matrix grouped by hue and sorted by brightness, a standardized image color card, or a user-defined color matching color card. The output module is used to output the corresponding color chart format.

[0014] This invention presents an interactive color chart editing method and system based on a color model. Through dynamic HSL hue wheel generation, intelligent color matching algorithms, cross-tool integration, and a color level sorting mechanism, it solves the problems of traditional tools, such as single color models, low color matching efficiency, and fragmented operations. The system supports automated generation, image parsing, manual adjustment, and history management functions. It can output professional color charts grouped by hue and sorted by brightness, significantly improving design efficiency and user experience. Attached Figure Description

[0015] Figure 1 This is a schematic diagram of the workflow structure of the interactive color card editing method based on a color model proposed in this invention; Figure 2 This is a schematic diagram illustrating the implementation process of the interactive color card editing method based on a color model proposed in this invention. Figure 3 This is a schematic diagram of the initial color card matrix structure of Embodiment 1 of the interactive color card editing method based on a color model proposed in this invention; Figure 4 This is a schematic diagram of the structure of a color card matrix grouped by hue and sorted by brightness, which is an embodiment of the interactive color card editing method based on a color model proposed in this invention. Figure 5 This is a schematic diagram of the image file structure of Embodiment 2 of the interactive color card editing method based on the color model proposed in this invention; Figure 6 This is a schematic diagram of the structure of a standardized image color card in Embodiment 2 of the interactive color card editing method based on a color model proposed in this invention. Detailed Implementation

[0016] Reference Figure 1-6 The present invention proposes an interactive color chart editing method based on a color model, comprising the following steps: S1: Receive color chart editing information input by the user. The color chart editing information includes brightness value and hue value, or image file, or screen color coordinates.

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

[0018] S3: Restructure and visually optimize the initial color chart data to obtain the corresponding color chart format. The color chart format includes a color chart matrix grouped by hue and sorted by brightness, a standardized image color chart, or a user-defined color chart.

[0019] S4: Output the corresponding color chart format.

[0020] Example 1: In this embodiment, the color card editing information specifically includes brightness and hue values; the color card editing information is processed to generate the corresponding initial color card data, specifically by generating an initial color card matrix based on the brightness, hue, and HSL to RGB color conversion formula.

[0021] In this embodiment, the initial color card data is specifically an initial color card matrix. The initial color card data is structurally reorganized and visually optimized to obtain the corresponding color card form. Specifically, the hue values ​​are mapped to the hue wheel in the HSL model and evenly divided into 12 hue groups. The initial color card matrix is ​​arranged in ascending order of brightness value within each hue group. The sorted initial color card matrix is ​​then transposed to generate a color card matrix grouped by hue and sorted by brightness.

[0022] In this embodiment, different brightness values ​​are changed by adjusting the brightness to match the change in hue and produce a color change.

[0023] Specifically, click on Global Tone Fill, and then select the brightness value (marked as...). In the HSL color model, represents the lightness or darkness of a color, with a value range of . (0,1), if =0 indicates pure black (regardless of hue), such as =1 indicates pure white, such as 0 < A value less than 1 indicates a mixture of hue and brightness. Hue (denoted as h) is used to express the basic attributes of color (e.g., red, green, blue), and in the HSL color model, its value range is h. (0,1) corresponds to an angle 0°≤h<360°. For example, h=0 represents red, h=0.33 represents green, and h=0.66 represents blue.

[0024] By iterating through each grid cell, a hue is randomly generated, and then the color object is filled into the grid cell by color conversion. This process iterates through all cells, where i represents the row number and j represents the column number, with values ​​ranging from i to j. (0, row number - 1), j (0, column number - 1), and then generate a uniformly distributed random floating-point value h using random.random(). [0,1), thus ensuring color diversity. Then, HSL is converted to RGB colors via color conversion, the core steps of which are: ; in, This represents brightness, with a value ranging from 0 to 1, where 0 represents pure black and 1 represents pure white. is the saturation, with a value ranging from 0 to 1, where 0 represents grayscale and 1 represents full saturation; q is the threshold value for dynamically adjusted brightness, used to calculate intermediate transition parameters for RGB components; P is an intermediate variable symmetrical to q, used to jointly define the interpolation range of RGB components as [p,q], which is the basic threshold for color channel calculation.

[0025] Then through the user-defined The hue h is mapped to six phase intervals (red→yellow→green→cyan→blue→violet→red). The RGB component values ​​within each interval are calculated using linear interpolation of p and q. For example, a color channel might be q in a certain phase interval, while the green channel might be p + (q - p) × f (where f is the decimal part of the phase). Finally, by combining the iterated cells, `self.draw_cell(i,j,color)` is called to randomly arrange the colors in each cell.

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

[0027] Iterate through all cells, following the logic described above. Then, assuming the image region is rectangular, calculate the center point coordinates to obtain the pixel RGB value at that location, representing the region's "dominant color tone." This calculation method is as follows: ,in and Here are the coordinates of the center point, and width and height are the width and height (in pixels) of the image region.

[0028] In this embodiment, after converting the RGB color of the pixels to HSL, they are grouped into the same group according to similar hues, and then mapped to 12 groups to facilitate subsequent analysis and output.

[0029] Specifically, the RGB color of a pixel is converted to HSL using the following conversion formula: , in, The value needs to be normalized to Get the value from the middle The value obtained represents the hue angle, corresponding to the position on the color wheel. The values ​​obtained represent saturation and color vibrancy. The values ​​obtained represent the brightness and color intensity. Then, the obtained HSL colors are grouped and calculated (using a 12-group strategy) to determine the hue. (Normalized 0-1 range) mapped to 12 groups, the formula is: , The logical significance lies in dividing the 360° color wheel into 12 intervals (each 30° group), corresponding to 12 basic colors (such as red, orange, and yellow), thus enabling color classification and management by hue. Colors with similar hues are grouped together, facilitating subsequent analysis and sorting of color groups. These color groups are then sorted by brightness, presenting a gradient from dark to light, thereby achieving a color gradation sort.

[0030] Specifically, each color group is sorted according to its brightness by obtaining the aforementioned color groups. The sorting logic is group_colors.sort(key=lambda). ), its meaning is that X represents the color data item, X[1]: represents the extracted brightness As a sorting key, according to The colors are sorted in ascending order (from smallest to largest), resulting in a gradient effect from dark to light. This unifies the sorting of hues by brightness, creating a sorting logic based on color levels. The resulting hue arrangements are then arranged in rows and columns according to a corresponding column-filling strategy, resulting in a more intuitive visual representation.

[0031] In this embodiment, by obtaining the aforementioned hue sorting groups, the corresponding cells are filled from left to right and top to bottom according to the column filling strategy, and the original row and column indices (i,j) are swapped to (j,i), thus achieving the row and column transposition of the matrix. The i-th row and j-th column of the original matrix is ​​converted to the j-th row and i-th column, and then arranged. For example, if the input color matrix is ​​5 rows × 12 columns (grouped by 12 hues), after brightness sorting and row and column transposition, a 12-row × 5-column color card matrix 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 hue fill function, combined with brightness threshold adjustment, can randomly generate a freely matched color matrix. Alternatively, by using the color level sorting function, all colors can be ordered according to their RGB color levels based on brightness, thereby achieving color visual sequence optimization.

[0033] Example 2: In this embodiment, the color chart editing information is specifically an image file; the color chart editing information is processed to generate the corresponding initial color chart data, specifically as follows: The imported image file is scaled to a fixed canvas size using bilinear interpolation, and then adjusted according to the target color swatch size. The scaled image file is divided into a grid using the k×k method. The RGB color data corresponding to the scaled image file is obtained by sampling at the center point of the grid, and then the RGB color data is converted into an HSL color matrix.

[0034] In this embodiment, the initial color chart data is specifically an HSL color matrix. The initial color chart data is structurally reorganized and visually optimized to obtain the corresponding color chart format. Specifically, the colors are extracted from the image files and classified according to hue. The hue values ​​corresponding to the image files are mapped to the hue wheel in the HSL model, and the data is 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 the sorted HSL color matrix is ​​transposed, color deduplication, outlier filtering, and color correction are performed to generate a standardized image color chart.

[0035] In this embodiment, the imported image file is scaled to a fixed canvas size using bilinear interpolation, specifically including: importing the image file and standardizing the image through coordinate mapping and interpolation.

[0036] Specifically, the image file is selected for import and loading. It is then forcibly scaled to the canvas size using `image.resize((900, 900))`. The core of this method is coordinate mapping and interpolation calculation. Assuming the original image is... The target size is The scaling formula is: ; in, These are the coordinates (floating-point numbers) of the corresponding pixels in the original image. The coordinates of the current pixel in the target image ( _dst _dst Its fundamental purpose is to scale images of any size to a fixed size (900×900), ensuring a uniform canvas for subsequent processing, and preserving the main content of the image by uniform sampling and interpolation to avoid distortion and information loss.

[0037] In this embodiment, the scaled image file is divided into a grid according to the target color chart size k×k. RGB color data corresponding to the scaled image file is obtained by sampling at the grid center point, and the RGB color data is converted into an HSL color matrix. Specifically, this includes: sampling the processed standardized image data at the grid center based on the current color chart size, and outputting a two-dimensional color matrix. Using the initial color chart data and the current size chart parameters, through... The cell size is calculated to ensure that each cell size is an integer pixel, preventing drawing misalignment. This mathematical equation divides the 900*900 canvas into a grid of size × size, with each cell being a square. For example, if size = 10, then cell_size = 90, generating a 10 × 10 color matrix with each cell being 90 × 90 pixels. Then, each grid is traversed, its center coordinates are calculated, and colors are sampled. and Represents row and column index, ranging from 0 to 1. , <size( Control the vertical direction. (Controlling the horizontal direction), let x and y represent the screen coordinates of the cell center point, used for precise color fill positioning, then the derived formula is: , For example, if cell_suze=100, then the second row and the third column ( The center coordinates of (2×100+50, 1×100+50) = (250, 150). A double loop is used to iterate through the obtained color matrix, sampling each grid cell with strict center point sampling to ensure no interpolation, and then mapping the colors to the color chart. Based on the above matrix, the logical method `self.draw_cell(i, j, color)` is called for each cell to draw the cell. The logic involves first obtaining the index (...). , Convert to screen coordinates using the following method: where X and Y represent the start and end points of x and y, respectively. , Then, by calling the `create_rectangle` method of `Tkinter Canvas`, which takes the following form in `Tkinter Canvas.create_rectangle`: (rect_id = canvas.create_rectangle( x0, y0, x1, y1, # Diagonal coordinates of the rectangle) fill="color", # Fill color (HEX or color name) outline="border_color", # Border color width=border_width, # Border thickness (pixels) tags=("tag1", "tag2") # Object tags (used for batch operations) )); Its purpose is to strictly sample the center point and then map the colors 1:1 onto the color chart grid, finally completing the processing of the imported image.

[0038] In this embodiment, after importing the image, a color chart with a color scheme corresponding to the image color sample will be automatically generated based on the image's sampling data, which can be conveniently used for color selection to unify the color tone of the image.

[0039] Example 3: In this embodiment, the color chart editing information is specifically the screen color sampling coordinates; the color chart editing information is processed to generate the corresponding initial color chart data, specifically: capturing the pixel RGB value corresponding to the new color according to the screen color sampling coordinates; inputting the pixel RGB value into the HSL model to obtain the hue value and brightness value corresponding to the new color; filling the new color into the color chart cell specified by the user to obtain a custom color chart matrix.

[0040] In this embodiment, the initial color card data is structurally reorganized and visually optimized to obtain the corresponding color card format. Specifically, the hue values ​​corresponding to the newly added colors are mapped to the hue wheel in the HSL model and evenly divided into 12 hue groups. The custom color card matrix is ​​arranged in ascending order of the corresponding brightness values ​​within each hue group. The sorted custom color card matrix is ​​then transposed to generate a user-defined color card.

[0041] In this embodiment, clicking the eyedropper tool allows one to observe the screen content through a semi-transparent window and obtain the captured screen content.

[0042] Specifically, after clicking the eyedropper tool button, a full-screen semi-transparent overlay is created. The parameters alpha=0.3 and -topmost=True are used to make it semi-transparent. The parameter alpha=0.3 represents the blending weight of the overlay color and the background color (30% overlay, 70% background protrusion) to achieve the semi-transparent window effect. -topmost=True means to force the window to be displayed on top to ensure the window is visible.

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

[0044] Specifically, by calling the operating system's API, pyautogui.position(), the mouse coordinates are obtained. The mathematical expression is (x, y) = GetCursorPos(), where x and y are the returned integer tuples. GetCursorPos is the operating system API command (Windows API) or XQueryPointer() (Linux X11). It achieves the real-time acquisition of the absolute screen coordinates (unit: pixels) of the mouse by calling the operating system API. The origin of the coordinates is the top left corner of the screen. For example, the returned value is an integer tuple (x, y), such as (960, 540) which represents the center point of the screen (assuming a resolution of 1920×1080).

[0045] In this embodiment, the color information of the corresponding point is obtained by clicking on the corresponding color on the screen, and then the obtained color is put into the color chart.

[0046] Specifically, the mouse position is used to select the desired color on the screen and click it. When clicking, the selected content is processed by the pyautogui.screenshot().getpixel((x, y)) operation. The logic is that screenshot() generates a pixel matrix (x, y) of the current screen, with dimensions W (image width) × H (image height) × 3 (the number of color channels are R (red), G (green), and B (blue) respectively). Then, getpixel((x, y)) is used to access the pixel value of (x, y) in the matrix and returns a triple (R, G, B), with a value range of [0, 255]. Finally, the obtained color is put into the color chart.

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

[0048] Specifically, the dynamic color wheel algorithm uses... Generate, in The absolute coordinates (integer type) of the canvas pixels are used to identify the currently processed pixel position. If the canvas size is... (like ),but . Representing pixels The Euclidean distance (floating-point number) to the center of the color ring is calculated using the following formula: , Its constraint condition is if This pixel does not participate in color wheel rendering. Represents the maximum radius of the color wheel, its function is to limit the display area of ​​the color wheel and prevent it from overflowing the canvas. In HSL color parameters, H represents hue, expressing the basic attribute of color, corresponding to the color wheel angle, with a range of... , mapped to (like (Corresponding to cyan). S represents saturation, expressing color purity, gradation from the center to the edge, and its range is a normalized value. Grayscale For solid colors, the calculation method is: L represents brightness, expressing the lightness or darkness of a color, with a range of... It is black. The color is white. The purpose of hsl_to_rgb is to convert the HSL color space to the RGB color space using standard functions. The conversion logic is the same as the conversion process described above, resulting in an RGB triplet (R, G, B) with each channel ranging from 0 to 255. Canvas represents the operation to be performed on each pixel of the canvas: 1. Calculate the distance from the center of the current pixel's color ring. ; 2. If Calculate the corresponding and ; 3. Combined with the current brightness Generate RGB colors and fill pixels; The color wheel is generated using 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 corresponding color card color is obtained by clicking on the corresponding color.

[0050] Specifically, clicking on the color wheel canvas retrieves the coordinates of the click (event.x, event.y), where event.x represents the horizontal coordinate of the mouse pointer on the canvas control at the time of the click, and event.y represents the vertical coordinate of the mouse pointer on the canvas control at the time of the click, thus triggering the click content. Then, by calculating the offsets relative to the center of the color wheel: dx = x - center_x, dy = y - center_y, 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, the values ​​of H and S are obtained. Simultaneously, the current brightness value L is obtained through the brightness slider in the control, and combined with the previous values, the complete HSL color parameters are obtained as (H, S, L). Then, according to the call to hsl_to_rgb(H, S, L) mentioned in 4-S4, RGB colors are generated, and the color corresponding to the mouse coordinates is obtained and placed into the color chart.

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

[0052] Specifically, color schemes for complementary colors, analogous colors, and triadic colors are provided based on colors obtained from the color picker and eyedropper tools. The logic for generating complementary colors is as follows: , That This indicates the position of the original color on the color wheel. +0.5 represents the half-circle offset of the color wheel. The modulo 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 the modulo result is 0.2. The meaning of obtaining the complementary color is to maximize color contrast, which is used for emphasis or visual impact design.

[0053] The logic for generating similar colors is as follows: , The rest is the same as above. 30 / 360 means the normalized value of a 30° angle, which is used to convert the angle into a ratio. The mod 1.0 is used to handle negative values, such as... When h = 0.1, 0.1 - 0.0833 = 0.0167, so no correction is needed. When h = 0.05, the result is -0.0333, which becomes 0.9667 after taking the modulus. The meaning of the obtained similar color is to use the color to create a gradient or soft theme.

[0054] The three-color matching formula is: , The rest is the same as above. 120 / 360 represents the normalized value of a 120° angle. Usually, two consecutive calls are made to generate three color schemes, such as the base color. =0 (red), the three colors are 0.333 (green) and 0.666 (blue), and the three-color scheme is often used in multi-element design.

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

[0056] Specifically, a stack-based data structure is used to manage operation history, enabling multi-level rollback functionality.

[0057] S6: Converts the color chart format into an image matrix and outputs it in PNG or JPEG format.

[0058] Specifically, it combines vector graphics rendering technology to achieve color chart output of any size, and uses an adaptive layout algorithm to ensure display consistency at different resolutions.

[0059] In this embodiment, the undo function includes: storing colors in the color chart editor, thereby enabling the functions of adding, undoing, and redoing.

[0060] Specifically, the color chart editor uses `color_history` to store the historical color chart states of user operations. Each element is a complete snapshot of the color chart matrix, and its formula is: ,in This indicates the initial state (empty or default color chart). The latest state has a length of n+1. The logical equation for the newly added state is color_history. color_history[:current_index +1 This means clearing the history after the current index and appending the new state. `current_index` represents updating to the latest position. The logical equation for its cancellation is current_index. current_index -1 This indicates an index shift. The reworked logical equation is current_index. current_index +1 This indicates that the index is shifted forward, thereby achieving the rollback function.

[0061] In this embodiment, the export color chart function includes: exporting the image to a designated location for use after editing.

[0062] Specifically, clicking the export button to export the image utilizes the mathematical logic of image generation, which involves pixel matrix construction and color swatch matrix construction. Convert to image matrix : ,in This represents the color chart matrix, where k is the number of rows and columns set by the user (e.g., 12×12), and cell_size is the cell pixel size, calculated as 900 / / K. The output image should have pixel dimensions of 900×900×3. Then, when exporting the content of this editor as PNG / JPEG, execute: File ,format, compression_params This allows for export.

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

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

[0065] In this embodiment, the cells for which the processed color blocks need adjustment can be extracted using the eyedropper tool to extract the corresponding screen pixel colors, thus achieving the goal of selecting colors from the screen and placing them in the corresponding editing boxes. Alternatively, the color wheel in the color picker tool can be used in conjunction with brightness threshold adjustments to obtain the corresponding colors, achieving the goal of selecting colors from the color wheel and placing them in the corresponding editing boxes. By combining the colors from the eyedropper and color picker tools with the color scheme function, professional color combinations such as complementary colors, analogous colors, and triadic color schemes can be selected, allowing the desired colors to be placed in the corresponding editing boxes.

[0066] Reference Figure 1-6 The present invention proposes an interactive color card editing system based on a color model, comprising: The data acquisition module is used to receive color chart editing information input by the user. The color chart editing information includes brightness and hue values, or image files, or screen color coordinates.

[0067] The color chart generation module is used to process the color chart editing information to generate the corresponding initial color chart data. The initial color chart data includes an initial color chart matrix, an HSL color matrix, or a custom color chart matrix.

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

[0069] The output module is used to output the corresponding color chart format.

[0070] The above description is only a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any equivalent substitutions or modifications made by those skilled in the art within the scope of the technology disclosed in the present invention, based on the technical solution and inventive concept of the present invention, should be covered within the scope of protection of the present invention.

Claims

1. An interactive color chart editing method based on a color model, characterized in that, include: Receive color chart editing information input by the user, the color chart editing information including brightness value and hue value, image file, and screen color picking coordinates; The color chart editing information is processed to generate the corresponding initial color chart data, which includes an initial color chart matrix, an HSL color matrix, and a custom color chart matrix. When the color chart editing information specifically includes brightness and hue values, an initial color chart matrix is ​​generated based on the brightness, hue, and HSL to RGB color conversion formula. Specifically, each grid is traversed, and color objects are filled into the grid based on the hue value using HSL to RGB color conversion. The core steps of the HSL to RGB color conversion are: , ;in, This represents brightness, with a value ranging from 0 to 1, where 0 represents pure black and 1 represents pure white. Saturation, ranging from 0 to 1, where 0 represents grayscale and 1 represents full saturation; q is the dynamically adjusted brightness threshold used to calculate intermediate transition parameters for RGB components; p is an intermediate variable symmetrical to q, used to jointly define the interpolation range of RGB components as [p, q], which is the basic threshold for color channel calculation; then hue... Mapped to 6 phase intervals, the values ​​of the RGB components in each interval are obtained through... and Linear interpolation calculation; The initial color chart data is restructured and visually optimized to obtain the corresponding color chart format, which includes a color chart matrix grouped by hue and sorted by brightness, a standardized image color chart, or a user-defined color chart. When the initial color chart data is specifically an initial color chart matrix, the center coordinates of all cells are obtained to acquire the pixel RGB values ​​of each cell position; the RGB colors of the pixels are converted to HSL; the hue values ​​are mapped to the color wheel in the HSL model, uniformly divided into 12 hue groups. The logical meaning of this uniform division into 12 hue groups is to divide the 360° hue wheel into 12 intervals, each 30° group, corresponding to 12 basic colors, realizing color classification and management by hue, and then grouping colors with similar hues into the same group for convenience. The subsequent analysis and sorting output color groups are then sorted by brightness to present a gradient logic from dark to light, thus achieving color gradation sorting. The initial color card matrix after sorting is transposed to generate a color card matrix grouped by hue and sorted by brightness. The transposition of the initial color card matrix after sorting is specifically performed by filling columns from left to right and from top to bottom, exchanging the original row and column indices (i, j) with (j, i), and converting the i-th row and j-th column of the original matrix to the j-th row and i-th column. Output the corresponding color chart format.

2. The interactive color chart editing method based on a color model according to claim 1, characterized in that, The color chart editing information is specifically an image file; the color chart generation process, which involves processing the color chart editing information to generate corresponding initial color chart data, specifically includes: The imported image file is scaled to a fixed canvas size using bilinear interpolation. The scaled image file is then divided into a grid according to the target color chart size k×k. The RGB color data corresponding to the scaled image file is obtained by sampling at the center point of the grid, and the RGB color data is converted into an HSL color matrix.

3. The interactive color chart editing method based on a color model according to claim 2, characterized in that, The initial color chart data is specifically an HSL color matrix; the structural reorganization and visual optimization of the initial color chart data to obtain the corresponding color chart format specifically involves: The colors extracted from the image files are classified by hue, and the corresponding hue values ​​of the image files are mapped to the hue wheel in the HSL model, which is evenly divided into 12 hue groups. Arrange the colors in the HSL color matrix in ascending order of brightness value within each hue group; After transposing the sorted HSL color matrix, color deduplication, outlier filtering, and color correction are performed to generate a standardized image color chart.

4. The interactive color chart editing method based on a color model according to claim 1, characterized in that, The color chart editing information specifically refers to screen color coordinates; the color chart generation process, which involves processing the color chart editing information to generate corresponding initial color chart data, specifically includes: Capture the pixel RGB value corresponding to the new color based on the screen color picker coordinates; Input the pixel RGB values ​​into the HSL model to obtain the hue and brightness values ​​corresponding to the new color; The new color is filled into the user-specified color swatch cells to obtain a custom color swatch matrix.

5. The interactive color chart editing method based on a color model according to claim 4, characterized in that, The process of reorganizing and visually optimizing the initial color chart data to obtain the corresponding color chart format specifically involves: The hue values ​​corresponding to the new colors are mapped to the hue wheel in the HSL model and evenly divided into 12 hue groups; Arrange the colors in the custom color chart matrix in ascending order according to their corresponding brightness values ​​within each hue group; The sorted custom color swatch matrix is ​​transposed to generate a user-defined color swatch.

6. The interactive color chart editing method based on a color model according to claim 1, characterized in that, Also includes: Record all user actions on the color chart and save all color chart versions in the order of the actions, so that undo or redo operations can be performed during the operation.

7. The interactive color chart editing method based on a color model according to claim 1, characterized in that, Also includes: Convert the color chart format to an image matrix and output it in PNG or JPEG format.

8. An interactive color chart editing system based on a color model, characterized in that, include: The data acquisition module is used to receive color chart editing information input by the user. The color chart editing information includes brightness and hue values, image files, and screen color coordinates. The color chart generation module is used to process color chart editing information to generate corresponding initial color chart data. This initial color chart data includes an initial color chart matrix, an HSL color matrix, and a custom color chart matrix. When the color chart editing information specifically consists of brightness and hue values, the initial color chart matrix is ​​generated based on the brightness, hue, and HSL-to-RGB color conversion formula. Specifically, after randomly generating a hue based on the hue value, the color object is filled into a grid through HSL-to-RGB color conversion. The core steps of the HSL-to-RGB color conversion are as follows: , ;in, This represents brightness, with a value ranging from 0 to 1, where 0 represents pure black and 1 represents pure white. Saturation, ranging from 0 to 1, where 0 represents grayscale and 1 represents full saturation; q is the dynamically adjusted brightness threshold used to calculate intermediate transition parameters for RGB components; p is an intermediate variable symmetrical to q, used to jointly define the interpolation range of RGB components as [p, q], which is the basic threshold for color channel calculation; then hue... Mapped to 6 phase intervals, the values ​​of the RGB components in each interval are obtained through... and Linear interpolation calculation; The color chart processing module is used to perform structured reorganization and visual optimization on the initial color chart data to obtain the corresponding color chart format. The color chart format includes a color chart matrix grouped by hue and sorted by brightness, a standardized image color chart, or a user-defined color chart. Specifically, when the initial color chart data is an initial color chart matrix, the module obtains the center coordinates of all cells to obtain the pixel RGB values ​​at each cell position; converts the RGB colors of the pixels to HSL; and maps the hue values ​​to the hue wheel in the HSL model, uniformly dividing it into 12 hue groups. The logical meaning of this uniform division into 12 hue groups is that it divides the 360° hue wheel into 12 intervals, each group being 30°. Corresponding to 12 basic colors, colors are categorized and managed by hue. Colors with similar hues are grouped together for easier subsequent analysis and sorting. The resulting color groups are then sorted by brightness, presenting a gradient from dark to light, thus achieving color gradation sorting. The initial color card matrix after sorting is transposed to generate a color card matrix grouped by hue and sorted by brightness. Specifically, the initial color card matrix after sorting is transposed by filling columns from left to right and top to bottom, exchanging the original row and column indices (i, j) with (j, i), and converting the i-th row and j-th column of the original matrix to the j-th row and i-th column. The output module is used to output the corresponding color chart format.

Images