Automated graphical user interface customization based on brand color

Abstract

To disclose a system, method, and computer program product embodiment for customizing a GUI (Graphical User Interface) based on one or more brand colors of an organization.SOLUTION: For example, an organization's brand color may be obtained by a design system and analyzed based on default colors assigned to various parameters of the design system. The parameters may correspond to various UI elements (e.g., buttons, text, background, borders, etc.) of a GUI of the application. In one example, the design system may determine the similarity between each of the obtained brand colors and the default colors assigned to the various parameters. For a parameter, the design system may assign the brand color that has the maximum similarity with respect to the default color to the parameter. The application GUI may be rendered according to the newly assigned brand color.SELECTED DRAWING: Figure 1

Description

Technical Field

[0001] The present invention relates to systems, apparatuses, devices, methods and / or computer program product embodiments for customizing a GUI based on one or more brand colors of an organization, and / or combinations and sub - combinations thereof.

Background Art

[0002] Custom themes play an important role for an organization. For example, such themes add uniqueness and personalization to the user experience. A user interface theme designer can provide a convenient starting point for devising a theme tailored to individual preferences. By using a user interface theme designer, a customer can easily incorporate their corporate branding into their application. However, generating a theme is not always easy. The user needs to know the company's corporate branding guidelines and then map them according to the theme parameters. The problem is that a user interface theme designer can have hundreds of different customizable parameters. The user must take great care when generating a theme to ensure that the custom theme provides a desirable appearance that matches the organization's brand.

Summary of the Invention

Means for Solving the Problems

[0003] The accompanying drawings are incorporated herein and form a part of this specification.

Brief Description of the Drawings

[0004]

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6

Figure 7

Figure 8

Figure 9

Figure 10

DETAILED DESCRIPTION OF THE INVENTION

[0005] In the drawings, like reference numerals generally indicate identical or similar elements. Additionally, generally, the most significant digit of a reference numeral identifies the drawing in which that reference numeral first appears.

[0006] Provided herein are systems, apparatuses, devices, methods, and / or computer program product embodiments for customizing a GUI based on one or more brand colors of an organization, and / or combinations and sub - combinations thereof. For example, the brand colors of an organization may be obtained by a design system and analyzed with respect to default colors assigned to various parameters of the design system. The parameters may correspond to various UI elements (e.g., buttons, text, backgrounds, borders, etc.) of the GUI of an application. In one example, the design system may determine a similarity between each of the obtained brand colors and the default colors assigned to various parameters. For a certain parameter, the design system may assign the brand color having the maximum similarity with respect to the default color to the parameter. The GUI of the application may be drawn according to the newly assigned brand colors.

[0007] The embodiments described herein automatically select a harmonious set of colors for hundreds of different parameters for a user without having the user manually select colors, and weave them into an entirely new custom theme. For example, the design system may provide an interface through which a user can identify brand colors. In another example, the design system may provide an interface through which a user can upload an image (e.g., a logo) representing the organization. In response to the uploaded image, the design system may analyze the image and automatically determine the brand colors representing the organization. In either example, once the brand colors are determined, the design system automatically determines, based on the various techniques described herein, which parameters will be assigned which brand colors.

[0008] Such a simple and user-friendly interaction becomes the user's freedom, and the user is provided with a custom theme creation process that is not only accessible but also significantly efficient. Moreover, the embodiments described herein provide improvements to the GUI. For example, the simplicity of simply entering a brand color and automatically assigning the brand color to appropriate design system parameters greatly reduces the number of user interface elements required to generate a custom theme, thus greatly simplifying the GUI of the design system. As an example, a conventional design system may provide user interface elements for each parameter that enables a user to manually set colors for the corresponding GUI of an application. Thus, a design system with hundreds of parameters would include hundreds of such user interface elements. The enormity of the user interface elements clutters the GUI of the design system and makes navigation cumbersome. The embodiments described herein correct such problems because hundreds of user interface elements required to specify colors for hundreds of parameters are no longer needed.

[0009] FIG. 1 shows a block diagram of a system 100 configured to customize a user interface of an application, according to some embodiments. As shown in FIG. 1, system 100 includes one or more servers 102 and a computing device 104. Servers 102 and computing device 104 may be communicatively coupled to each other via a network 106. Network 106 may consist of one or more networks such as a local area network (LAN), a wide area network (WAN), a corporate network, the Internet, etc., and may include one or more of the wired and / or wireless portions.

[0010] In one embodiment, server 102 may form a network-accessible server set (e.g., a cloud-based environment or platform). Server 102 may be accessible via network 106 (e.g., in a “cloud-based” embodiment) for building, deploying, and managing applications and services. Server 102 may be located in the same location (e.g., housed in one or more nearby buildings along with associated components such as backup power, redundant data communication, environmental control, etc.) to form a data center, or may be arranged in other ways. Thus, in one embodiment, server 102 may be one data center in a distributed collection of data centers.

[0011] Server 102 may be configured to execute one or more software applications (or “applications”) (e.g., application 109) and / or services. Server 102 may be configured for a specific purpose. For example, as illustrated in FIG. 1, server 102 may include a design system 110, a graph representation generator 112, a brand color acquirer 116, and a graphical user interface (GUI) customizer 114 for application 109. The design system 110 may include a set of components, rules, style guides, and / or documentation used to construct, generate, and / or modify the appearance of the user interface of application 109. For example, the design system 110 may provide a plurality of parameters that define various colors, styles, and / or assets that describe the appearance of application 109. While FIG. 1 depicts application 109, design system 110, graph representation generator 112, brand color acquirer 116, and GUI customizer 114 as separate components, it is noted that design system 110, graph representation generator 112, brand color acquirer 116, and / or GUI customizer 114 may be incorporated into application 109. It is further noted that design system 110, graph representation generator 112, brand color acquirer 116, and GUI customizer 114, and / or application 109 may execute on computing device 104 instead of and / or in addition to executing on server 102.

[0012] The user may access and / or utilize the design system 110, the graph representation generator 112, the brand color acquirer 116, and / or the GUI customizer 114 via the computing device 104. As shown in FIG. 1, the computing device 104 includes a display screen 118 and a browser 120. The user may access and / or utilize the design system 110, the graph representation generator 112, the brand color acquirer 116, and / or the GUI customizer 114 by interacting with an application on a computing device 104 capable of accessing the design system 110. For example, the user may use the browser 120 to pass a network address (e.g., a uniform resource locator) to the design system 110, the graph representation generator 112, the brand color acquirer 116, and / or the GUI customizer 114, thereby invoking a user interface 122 (e.g., a web page) in a browser window drawn on the computing device 104. By interacting with the user interface, the user may invoke the design system 110, the graph representation generator 112, the brand color acquirer 116, and / or the GUI customizer 114. The computing device 104 may be any type of fixed device, such as a desktop computer or a PC (personal computer), or a mobile computing device (such as a laptop computer, a notebook computer, a tablet computer, etc.).

[0013] The design system 110 may include a plurality of parameters, and some or all of such parameters may be mapped to other parameters (e.g., a certain parameter may refer to other parameters). In one example, one or more of the parameters may be color parameters for defining the color for a particular user interface element (e.g., a button, text, border, background, etc.). The following code snippet is an example of the design system 110 (also referred to as parameter mapping):

[0014]

Table 1

[0015] In the code snippet shown above, the background of the emphasized button (i.e., @myButton_Emphasized_Background) and the border color of the emphasized button (i.e., @myButton_Emphasized_BorderColor) are mapped to a more general brand color (i.e., @myBrandColor). Also as shown above, certain parameters may include specific color functions (e.g., darken()) to alter the appearance of the color to which they are mapped. Further as shown above, certain parameters may be mapped to other parameters through multiple levels of nesting (e.g., @myButton_Emphasized_Background is mapped to @myComponent_Background, which is then mapped to @myBrandColor). The parameters described may be mapped to default color values by the design system 110. As described herein, the color values mapped to such parameters may be automatically customized according to one or more brand colors of the organization. Brand colors may consist of a set of colors utilized to represent the identity or style of a particular organization. Examples of organizations include, but are not limited to, companies, governments, charities, educational institutions, etc. It is noted that the parameter names described in the code snippet above and the mappings therebetween are merely examples and that other parameter names and mappings therebetween may be utilized. It is further noted that while the code snippet of the design system 110 described above follows a LESS-based representation, other representations may be utilized.

[0016] The graph representation generator 112 may be configured to generate a directed graph representation 117 of the design system 110. For example, the graph representation generator 112 may analyze the design system 110 to determine dependencies between various parameters and generate a data structure representing a directed graph with the parameters of the design system 110.

[0017] For example, FIG. 2 is a directed graph representation 200 of a design system 110 according to some embodiments. The directed graph representation 200 is an example of the directed graph representation 117 as illustrated in FIG. 1. As illustrated in FIG. 2, the directed graph representation 200 may include a plurality of nodes 202, 204, 206, 208, 210, 212, and 214. Node 202 represents the @myBrandColor parameter, node 204 represents the @myComponent_Background parameter, node 206 represents the @myButton_Emphasized_Background parameter, node 208 represents the @myButton_Emphasized_TextColor parameter, node 210 represents the @myButton_Emphasized_BorderColor parameter, node 212 represents the @myTextColor parameter, and node 214 represents the @myContrastTextColor parameter. Based on the analysis of the design system 110, the graph representation generator 112 may determine the mapping (or dependency) between various parameters. For example, according to the directed graph representation 200, the graph representation generator 112 may determine that the @myBrandColor parameter is mapped to the @myComponent_Background parameter, the @myComponent_Background parameter is mapped to the @myButton_Emphasized_Background parameter, and the @myButton_Emphasized_Background parameter is mapped to the @myButton_Emphasized_TextColor parameter. To represent such a dependency, the graph representation generator 112 may connect node 202 and 204 with an outgoing edge 216 from node 202 to node 204, connect node 204 and 206 with an outgoing edge 218 from node 204 to node 206, and connect node 206 and 208 with an outgoing edge 220 from node 206 to node 208.Chaining of such nodes indicates that the color mapped to the @myBrandColor parameter (i.e., light green) is assigned to each of the @myBrandColor, @myComponent_Background, @myButton_Emphasized_Background, and @myButton_Emphasized_TextColor parameters. In another example, the graph representation generator 112 may also determine that the @myBrandColor parameter is mapped to the @myButton_Emphasized_BorderColor parameter. Thus, the graph representation generator 112 may connect node 202 and node 210 with an outgoing edge 222. As further illustrated in FIG. 2, multiple parameters may be mapped to a particular parameter. For example, the @myTextColor and @myContrastTextColor parameters may be mapped to the @myButton_Emphasized_TextColor parameter. Thus, the graph representation generator 112 may connect node 212 and node 208 with an outgoing edge 224, and may connect node 214 and node 208 with an outgoing edge 226.

[0018] The GUI customizer 114 may be configured to customize the GUI of the application 109 based on the organization's brand colors. For example, the GUI customizer 114 may analyze the directed graph representation 117 and determine the parameters that have the most influence on the GUI (e.g., the color parameters with the most dependencies). Such a metric may indicate how prominent a particular color appears through the GUI. To determine the most influential parameters, the GUI customizer 114 may analyze the directed graph representation 117 and determine its root nodes (i.e., nodes that have no parents or only have outgoing edges starting from them and no incoming edges). In the example illustrated in FIG. 2, nodes 202, 212, and 214 may be determined to be root nodes, and nodes 204, 206, 208, and 210 may be considered child nodes (e.g., nodes with incoming edges). For each determined root node, the GUI customizer 114 may recursively traverse the directed graph representation 200 to determine the number of direct and indirect outgoing edges starting from the root node. For example, as illustrated in FIG. 2, the GUI customizer 114 may determine that node 202 may have two direct outgoing edges 216 and 222 (such that they directly connect node 202 to nodes 204 and 210, respectively) and two indirect outgoing edges 218 and 220 (where edge 218 indirectly connects node 206 to node 202 and edge 220 indirectly connects node 208 to node 202). The GUI customizer 114 may also determine that each of nodes 212 and 214 may have one direct outgoing edge (i.e., edges 224 and 226, respectively).

[0019] The GUI customizer 114 may sort the determined root nodes based on the total number of outgoing edges for each root node. The GUI customizer 114 may sort such nodes in ascending or descending order. In an example where the root nodes are sorted in descending order, node 202 may be listed first (since it has the most outgoing edges (i.e., 4)), and since both node 212 and node 214 have one outgoing edge, either one may be listed second or third, respectively. In one embodiment, the GUI customizer 114 may limit the number of the total number of determined root nodes based on the number of outgoing edges. For example, the GUI customizer 114 may select root nodes having a number of outgoing edges that meet a predetermined threshold (e.g., a number of edges of 2 or more).

[0020] After determining the most influential parameter, the GUI customizer 114 may determine the similarity between each of the organization's brand color and the default color assigned to the most influential parameter. The brand color may be obtained by the brand color acquirer 116. The brand color acquirer 116 may be configured to determine the organization's brand color in various ways. For example, the user may specify the organization's brand color via the user interface 122. In another example, the user may upload an image (e.g., a logo) representing the organization via the user interface 122, and the brand color acquirer 116 may automatically determine the brand color based on the image. For example, the color acquirer 116 may generate a color histogram based on the image, and the color histogram represents the distribution of the composition of colors in the image. It may be determined that the top N colors of the image most represented via the histogram are the brand colors, where N is any positive integer. In a further example, the color acquirer 116 may include an LLM-based interface that enables the user to instruct a large language model (LLM) using natural language to determine the brand color represented by the image. The LLM may be trained to output a set of brand colors based on the image input thereto. The LLM may be further trained to map a set of brand colors to various parameters of the GUI. According to one embodiment, the image may be an extensible markup language (XML)-based image, such as a scalable vector graphics (SVG)-based image. However, it is noted that other image formats may be utilized, including but not limited to joint photographic experts group (JPEG)-based images, bitmap images, etc.

[0021] Referring again to the GUI customizer 114, the GUI customizer 114 may be configured to determine the similarity between the acquired brand color and each of the default colors assigned to the most influential parameters in various ways. For example, the GUI customizer 114 may determine the similarity based on the product of the squared differences between the acquired brand color and each of the default colors assigned to the most influential parameters. For example, FIG. 3 is a table 300 including a list of acquired brand colors and a list of default colors assigned to parameters determined to be the most influential according to some embodiments. As shown in FIG. 3, the table 300 includes a column 302 including the brand colors acquired by the brand color acquirer 116 and a list of default colors assigned to the most influential parameters as determined by the brand color acquirer 116. In the example shown in FIG. 3, the acquired brand colors are light pink (hexadecimal value #facade) and bright turquoise (hexadecimal value #0ff1ce), and the default colors assigned to the most influential parameters (e.g., @myBrandColor, @myTextColor, and @myContrastTextColor parameters) are light green (hexadecimal value #c0ffee), black, and white, respectively. As further shown in FIG. 3, each of the colors in column 302 may be associated with a plurality of color values defining the color. In one example, the plurality of color values include a hue value, a saturation value, and a lightness value, as shown in columns 304, 306, and 308, respectively. The hue value may be between 0 and 360, representing degrees on the color wheel, with a value of 0 representing red, a value of 120 representing green, and a value of 240 representing blue. The saturation value may be a percentage value that varies between 0% and 100%, where 0% represents a faint gray and 100% corresponds to full color. The lightness value may also be a percentage value that varies between 0% and 100%, where 0% represents black and 100% represents white. It is noted that color schemes other than hue, saturation, and lightness (including, but not limited to, the red-green-blue (RGB) color scheme) may be used to represent a specific color.

[0022] The GUI customizer 114 may be configured to determine similarity based on the product of the squared differences between a plurality of color values. For example, FIG. 4 is a table 400 with similarity determined based on the product of squared differences according to some embodiments. As shown in FIG. 4, the GUI customizer 114 may determine the similarity between each of the acquired brand colors and each of the default colors assigned to the most influential parameters. For example, to determine the similarity between the acquired light pink brand color and the default color value of the @myBrandColor parameter (i.e., light green), the GUI customizer 114 may square the difference between the hue value of light pink (i.e., 335) and the hue value of light green (i.e., 164) to generate a first squared difference value, square the difference between the saturation value of light pink (i.e., 0.83) and the saturation value of light green (i.e., 1) to generate a second squared difference value, and square the difference between the lightness value of light pink (i.e., 0.89) and the lightness value of light green (i.e., 0.88) to generate a third squared difference value. The GUI customizer 114 may then determine the product of the first squared difference value, the second squared difference value, and the third squared difference value. The determined product corresponds to the similarity between the light pink color and the light green color (i.e., 0.08450649).

[0023] To determine the similarity between the obtained bright turquoise brand color and the default color value of the @myBrandColor parameter (i.e., light green), the GUI customizer 114 may square the difference between the hue value of bright turquoise (i.e., 171) and the hue value of light green (i.e., 164) to generate a first squared difference value, square the difference between the saturation value of bright turquoise (i.e., 0.89) and the saturation value of light green (i.e., 1) to generate a second squared difference value, and square the difference between the lightness value of bright turquoise (i.e., 0.50) and the lightness value of light green (i.e., 0.88) to generate a third squared difference value. The GUI customizer 114 may then determine the product of the first squared difference value, the second squared difference value, and the third squared difference value. The determined product corresponds to the similarity between the bright turquoise color and the light green color (i.e., 0.08561476).

[0024] To determine the similarity between the obtained light pink brand color and the default color value of the @myTextColor parameter (i.e., black), the GUI customizer 114 may square the difference between the hue value of light pink (i.e., 335) and the hue value of black (i.e., 0) to generate a first squared difference value, square the difference between the saturation value of light pink (i.e., 0.83) and the saturation value of black (i.e., 0) to generate a second squared difference value, and square the difference between the lightness value of light pink (i.e., 0.89) and the lightness value of black (i.e., 0) to generate a third squared difference value. The GUI customizer 114 may then determine the product of the first squared difference value, the second squared difference value, and the third squared difference value. The determined product corresponds to the similarity between the light pink color and the black color (i.e., 61,238.67876).

[0025] To determine the similarity between the obtained bright turquoise brand color and the default color value of the @myTextColor parameter (i.e., black), the GUI customizer 114 may square the difference between the hue value of bright turquoise (i.e., 171) and the hue value of black (i.e., 0) to generate a first squared difference value, square the difference between the saturation value of bright turquoise (i.e., 0.89) and the saturation value of black (i.e., 0) to generate a second squared difference value, and square the difference between the lightness value of bright turquoise (i.e., 0.50) and the lightness value of black (i.e., 0) to generate a third squared difference value. The GUI customizer 114 may then determine the product of the first squared difference value, the second squared difference value, and the third squared difference value. The determined product corresponds to the similarity between the bright turquoise color and the black color (i.e., 5,790.449025).

[0026] To determine the similarity between the obtained light pink brand color and the default color value of the @myContrastTextColor parameter (i.e., white), the GUI customizer 114 may square the difference between the hue value of light pink (i.e., 335) and the hue value of white (i.e., 0) to generate a first squared difference value, square the difference between the saturation value of light pink (i.e., 0.83) and the saturation value of white (i.e., 0) to generate a second squared difference value, and square the difference between the lightness value of light pink (i.e., 0.89) and the lightness value of white (i.e., 1) to generate a third squared difference value. The GUI customizer 114 may then determine the product of the first squared difference value, the second squared difference value, and the third squared difference value. The determined product corresponds to the similarity between the light pink color and the white color (i.e., 935.4728102).

[0027] To determine the similarity between the obtained bright turquoise brand color and the default color value of the @myContrastTextColor parameter (i.e., white), the GUI customizer 114 may square the difference between the hue value of the bright turquoise (i.e., 171) and the hue value of white (i.e., 0) to generate a first squared difference value, square the difference between the saturation value of the bright turquoise (i.e., 0.89) and the saturation value of white (i.e., 0) to generate a second squared difference value, and square the difference between the lightness value of the bright turquoise (i.e., 0.50) and the lightness value of white (i.e., 1) to generate a third squared difference value. The GUI customizer 114 may then determine the product of the first squared difference value, the second squared difference value, and the third squared difference value. The determined product corresponds to the similarity between the bright turquoise color and white (i.e., 5,790.449025).

[0028] In one embodiment, the GUI customizer 114 may discard the determined similarity that exceeds a predetermined threshold. In one example, the predetermined threshold may be a value of 1. In such an example, the determined similarities between light pink and light green (i.e., 0.08450649) and between bright turquoise and light green (i.e., 0.08561476) do not exceed the value of 1, so they are maintained and all other determined similarities are discarded. It is noted that the embodiments described herein are not limited to the above-described predetermined threshold and that other predetermined thresholds may be utilized. The resulting similarity may be weighted by the influence of the corresponding parameter. For example, the similarity between light pink and light green (i.e., 0.08450649) may be combined with (e.g., multiplied by) the represented determined influence of the @myBrandColor parameter to which light green is assigned. As described above, since the @myBrandColor parameter is associated with a total of four outward edges (as depicted in FIG. 2), the influence of the @myBrandColor parameter was 4. The represented determined influence may include, but is not limited to, the determined influence value itself, the reciprocal of the determined influence value, a decimal value based on the influence value, or any other representation. Similarly, the similarity between bright turquoise and light green (i.e., 0.08561476) may be combined with the determined influence (e.g., 4) of the @myBrandColor parameter to which light green is assigned. The resulting weighted similarity may be sorted, for example, in ascending or descending order and may be referred to as a potential mapping. The following snippet represents a potential mapping according to the above-described example:

[0029]

Table 2

[0030] For each parameter, the GUI customizer 114 may assign the acquired brand color that has the highest weighted similarity (or potential mapping value) to the parameter. In the example described above, since the bright turquoise color has the highest weighted similarity with respect to the @myBrandColor parameter, the @myBrandColor parameter is assigned this color. For example, the GUI customizer 114 may replace the default color of the @myBrandColor parameter (i.e., light green) with the bright turquoise color. The following snippet represents the new color assignment:

[0031] [Table 3]

[0032] According to the example shown in Figure 2, such an assignment affects a plurality of other parameters that depend on the @myBrandColor parameter, including the @myComponent_Background parameter, the @myButton_Emphasized_Background parameter, and the @myButton_Emphasized_TextColor parameter. That is, the bright turquoise color is also applied to these parameters.

[0033] All other potential mappings for the @myBrandColor parameter may be discarded, and the above-described process may be repeated for any other parameter associated with a similarity to a specific color that does not exceed a predetermined threshold. In the example described above, there are no such parameters, and thus no other color assignments are made.

[0034] In one exemplary embodiment, the GUI customizer 114 may determine the similarity based on the difference of a subset of the plurality of color values rather than the difference of all the plurality of color values. For example, the similarity may be based on the difference of one or more of the hue value, the saturation value, or the lightness value of the corresponding color.

[0035] In another example embodiment, the similarity may be based on the sum of the normalized difference and the weighted difference, where each color value is normalized between the values 0 and 1 and each of the color values is weighted by a specific weight parameter. For example, FIG. 5 is a table 500 comprising a list of normalized brand color values and a list of normalized default color values assigned to the parameters determined to be the most influential, according to some embodiments. As shown in FIG. 5, table 500 includes a column 502 comprising a list of brand colors obtained by the brand color acquirer 116 and default colors assigned to the most influential parameters as determined by the GUI customizer 114. Column 504 comprises normalized hue values corresponding to the hue values represented in column 304 of FIG. 3, column 506 comprises normalized saturation values corresponding to the saturation values represented in column 306 of FIG. 3, and column 508 comprises normalized lightness values corresponding to the lightness values represented in column 308 of FIG. 3.

[0036] FIG. 6 is a table 600 with similarity determined based on the sum of weighted squared differences according to some embodiments. To determine the similarity between the acquired light pink brand color and the default color value of the @myBrandColor parameter (i.e., light green), the GUI customizer 114 squares the difference between the normalized hue value of light pink (i.e., 0.93055556) and the normalized hue value of light green (i.e., 0.455555564), and may apply a first weight parameter (e.g., 10%) to the determined squared difference value to generate a first weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized saturation value of light pink (i.e., 0.83) and the normalized saturation value of light green (i.e., 1), and apply a second weight parameter (e.g., 30%) to the determined squared difference value to generate a second weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized lightness value of light pink (i.e., 0.89) and the normalized lightness value of light green (i.e., 0.88), and apply a third weight parameter (e.g., 60%) to the determined squared difference value to generate a third weighted squared difference value. The GUI customizer 114 may then determine the sum of the first weighted squared difference value, the second weighted squared difference value, and the third weighted squared difference value. The determined sum corresponds to the similarity between the light pink color and the light green color (i.e., 0.0312925).

[0037] To determine the similarity between the obtained bright turquoise brand color and the default color value of the @myBrandColor parameter (i.e., light green), the GUI customizer 114 squares the difference between the normalized hue value of bright turquoise (i.e., 0.475) and the normalized hue value of light green (i.e., 0.455555564), and may apply a first weight parameter (e.g., 10%) to the determined squared difference value to generate a first weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized saturation value of bright turquoise (i.e., 0.89) and the normalized saturation value of light green (i.e., 1), and apply a second weight parameter (e.g., 30%) to the determined squared difference value to generate a second weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized lightness value of bright turquoise (i.e., 0.50) and the normalized lightness value of light green (i.e., 0.88), and apply a third weight parameter (e.g., 60%) to the determined squared difference to generate a third weighted squared difference value. The GUI customizer 114 may then determine the sum of the first weighted squared difference value, the second weighted squared difference value, and the third weighted squared difference value. The determined sum corresponds to the similarity between the bright turquoise color and the light green color (i.e., 0.09030780847).

[0038] To determine the similarity between the obtained light pink brand color and the default color value of the @myTextColor parameter (i.e., black), the GUI customizer 114 may square the difference between the normalized hue value of light pink (i.e., 0.93055556) and the normalized hue value of black (i.e., 0), and apply a first weight parameter (e.g., 10%) to the determined squared difference value to generate a first weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized saturation value of light pink (i.e., 0.83) and the normalized saturation value of black (i.e., 0), and apply a second weight parameter (e.g., 30%) to the determined squared difference value to generate a second weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized lightness value of light pink (i.e., 0.89) and the normalized lightness value of black (i.e., 0), and apply a third weight parameter (e.g., 60%) to the determined squared difference value to generate a third weighted squared difference value. The GUI customizer 114 may then determine the sum of the first weighted squared difference value, the second weighted squared difference value, and the weighted third squared difference value. The determined sum corresponds to the similarity between the light pink color and the black color (i.e., 0.768523365).

[0039] To determine the similarity between the obtained bright turquoise brand color and the default color value of the @myTextColor parameter (i.e., black), the GUI customizer 114 may square the difference between the normalized hue value of bright turquoise (i.e., 0.475) and the normalized hue value of black (i.e., 0), and apply a first weight parameter (e.g., 10%) to the determined squared difference value to generate a first squared difference value. The GUI customizer 114 may also square the difference between the normalized saturation value of bright turquoise (i.e., 0.89) and the normalized saturation value of black (i.e., 0), and apply a second weight parameter (e.g., 30%) to the determined squared difference value to generate a second weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized lightness value of bright turquoise (i.e., 0.50) and the normalized lightness value of black (i.e., 0), and apply a third weight parameter (e.g., 60%) to the determined squared difference value to generate a third weighted squared difference value. The GUI customizer 114 may then determine the sum of the first weighted squared difference value, the second weighted squared difference value, and the third weighted squared difference value. The determined sum corresponds to the similarity between the bright turquoise color and the black color (i.e., 0.4101925).

[0040] To determine the similarity between the obtained light pink brand color and the default color value of the @myContrastTextColor parameter (i.e., white), the GUI customizer 114 may square the difference between the normalized hue value of light pink (i.e., 0.93055556) and the normalized hue value of white (i.e., 0), and apply a first weight parameter (e.g., 10%) to the determined squared difference value to generate a first weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized saturation value of light pink (i.e., 0.83) and the normalized saturation value of white (i.e., 0), and apply a second weight parameter (e.g., 30%) to the determined squared difference value to generate a second weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized lightness value of light pink (i.e., 0.89) and the normalized lightness value of white (i.e., 1), and apply a third weight parameter (e.g., 60%) to the determined squared difference value to generate a third weighted squared difference value. The GUI customizer 114 may then determine the sum of the first weighted squared difference value, the second weighted squared difference value, and the third weighted squared difference value. The determined sum corresponds to the similarity between the light pink color and the white color (i.e., 0.300523365).

[0041] To determine the similarity between the obtained bright turquoise brand color and the default color value of the @myContrastTextColor parameter (i.e., white), the GUI customizer 114 may square the difference between the normalized hue value of bright turquoise (i.e., 0.475) and the normalized hue value of white (i.e., 0), and apply a first weight parameter (e.g., 10%) to the determined squared difference value to generate a first weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized saturation value of bright turquoise (i.e., 0.89) and the normalized saturation value of white (i.e., 0), and apply a second weight parameter (e.g., 30%) to the determined squared difference value to generate a second weighted squared difference value. The GUI customizer 114 may also square the difference between the normalized lightness value of bright turquoise (i.e., 0.50) and the normalized lightness value of white (i.e., 1), and apply a third weight parameter (e.g., 60%) to the determined squared difference value to generate a third weighted squared difference value. The GUI customizer 114 may then determine the sum of the first weighted squared difference value, the weighted second squared difference value, and the weighted third squared difference value. The determined sum corresponds to the similarity between the bright turquoise color and the white color (i.e., 0.4101925).

[0042] As described above with reference to FIGS. 3 and 4, the determined similarity that exceeds a predetermined threshold may be discarded by the GUI customizer 114. The predetermined threshold used in the example described above with reference to FIGS. 5 and 6 may be different from the predetermined threshold described above with reference to FIGS. 3 and 4. For example, the predetermined threshold may be a value of 0.1. In such an example, the determined similarities between light pink and light green (i.e., 0.0312925) and between bright turquoise and light green (i.e., 0.09030980847) do not exceed the value of 0.1, so they are maintained and all other determined similarities are discarded. It is noted that the embodiments described herein are not limited to the predetermined threshold described above and that other predetermined thresholds may be used. The resulting similarity may be weighted by the influence of the corresponding parameters to generate a list of potential mappings, as described above with reference to FIGS. 3 and 4. For each parameter, the GUI customizer 114 may assign the acquired brand color having the highest weighted similarity (or potential mapping value) to the parameter.

[0043] It is noted that the GUI customizer 114 can automatically assign brand colors to multiple and various parameters, including hundreds or even thousands of parameters, according to the various embodiments described above.

[0044] After assigning brand colors to various parameters, the GUI customizer 114 may cause the GUI of the application 109 to be drawn (e.g., on the display screen 118) based on the assigned brand colors. In embodiments where the design system 110, the graph representation generator 112, the brand color acquirer 116 and / or the GUI customizer 114 are incorporated into the application 109, the user interface 122 may be the GUI of the application 109, calling and / or utilizing the design system 110, the graph representation generator 112, the brand color acquirer 116 and / or the GUI customizer 114 within the application 109 to identify brand colors and / or to provide one or more user interface elements for uploading an image representing an organization for analysis by the design system 110.

[0045] FIG. 7 is a flowchart for a method 700 for customizing a GUI based on brand colors, according to some embodiments. The method 700 can be performed by processing logic that can comprise hardware (e.g., circuits, dedicated logic, programmable logic, microcode, etc.), software (e.g., instructions executed on a processing device), or a combination thereof. It should be recognized that not all steps may be required to practice the disclosure provided herein. Further, some of the steps may be performed simultaneously or in a different order than that shown in FIG. 7, as would be understood by one of ordinary skill in the art.

[0046] The method 700 will be described with reference to FIG. 1. However, the method 700 is not limited to the illustrated embodiments.

[0047] At 702, the brand color acquirer 116 may acquire an indication of one or more brand colors associated with an organization. For example, as described herein, the brand color acquirer 116 may determine a brand color based on a color histogram of an organization's logo or may acquire an indication of the brand color by determining the brand color via a large language model instructed to extract the brand color from an image comprising the organization's logo.

[0048] At 704, the graph representation generator 112 may generate a directed graph representation 117 of a plurality of parameters of the design system 110 for the GUI of the application 109 (e.g., the user interface 122), and each of the plurality of parameters is assigned a respective default parameter color.

[0049] At 706, the GUI customizer 114 may determine at least one parameter out of a plurality of parameters corresponding to each respective root node of the directed graph representation 117, and each respective root node has a respective number of outgoing edges connecting each parameter of the at least one parameter to at least one child node of the directed graph representation 117 corresponding to at least one other parameter out of the plurality of parameters. For example, as illustrated in FIG. 2, the GUI customizer 114 may determine that the @myBrandColor, @myTextColor, and @myContrastTextColor parameters correspond to root nodes (i.e., root nodes 202, 212, and 214). In one example, as described herein, the GUI customizer 114 may order each parameter of the at least one parameter based on each respective number of the outgoing edges of each respective root node corresponding to each parameter.

[0050] At 708, the GUI customizer 114 may determine a respective similarity between each brand color of one or more brand colors and each default parameter color associated with the brand color and at least one parameter. Additional details regarding determining the similarity are described below with reference to FIGS. 8 and 9. In one example, as described herein, the GUI customizer 114 may determine that the respective similarity between each brand color and each default parameter color associated with the brand color and at least one parameter exceeds a predetermined threshold, and in response to the determination that the respective similarity between each brand color and each default parameter color associated with the brand color and at least one parameter exceeds a predetermined threshold, may avoid assigning the brand color to at least one parameter.

[0051] At step 710, the GUI customizer 114 may generate a respective combined value associated with the brand color and at least one parameter by combining each similarity with the number of respective outward edges of each root node corresponding to at least one parameter.

[0052] At step 712, the GUI customizer 114 may determine a particular parameter among at least one parameter for the brand color having the respective maximum combined value with respect to the brand color.

[0053] In step 714, in response to a determination that each combination value for which a particular parameter is maximum has the maximum combination value, the GUI customizer 114 may assign a brand color to the particular parameter. In one example, as described herein, the GUI customizer 114 may avoid each brand color and the particular parameter associated with each combination value for assignment for each combination value that is less than the maximum combination value. That is, the brand color associated with each combination value that is less than the maximum combination value may not be assigned to the corresponding parameter.

[0054] In step 716, the GUI customizer 114 may cause the GUI of the application 109 (e.g., the user interface 122) to be drawn (e.g., via the display screen 118) based on the brand color assigned to the particular parameter.

[0055] In one embodiment, the brand color is associated with a plurality of first color values, and each default parameter color associated with at least one parameter is associated with a plurality of second color values.

[0056] In one embodiment, the plurality of first color values include a first hue value, a first saturation value, and a first lightness value, and the plurality of second color values include a second hue value, a second saturation value, and a second lightness value.

[0057] FIG. 8 is a flowchart for a method 800 for determining a similarity between a brand color and a default parameter color associated with a parameter based on a product of differences of various color values according to some embodiments. The method 800 can be performed by processing logic that can comprise hardware (e.g., circuitry, dedicated logic, programmable logic, microcode, etc.), software (e.g., instructions executing on a processing device), or a combination thereof. It should be recognized that not all steps may be required to practice the disclosure provided herein. Further, some of the steps may be performed simultaneously or in a different order than that illustrated in FIG. 8, as would be understood by one of ordinary skill in the art.

[0058] The method 800 will be described with reference to FIG. 1. However, the method 800 is not limited to the illustrated embodiments.

[0059] At 802, the GUI customizer 114 may determine a first difference based on a first hue value and a second hue value. For example, referring to FIG. 4, the GUI customizer 114 may determine the difference between the hue value for the brand color light pink and the hue value for the default parameter color light green. In one embodiment, the GUI customizer 114 may square the determined difference.

[0060] At 804, the GUI customizer 114 may determine a second difference based on a first saturation value and a second saturation value. For example, referring to FIG. 4, the GUI customizer 114 may determine the difference between the saturation value for the brand color light pink and the saturation value for the default parameter color light green. In one embodiment, the GUI customizer 114 may square the determined difference.

[0061] At 806, the GUI customizer 114 may determine a third difference based on the first lightness value and the second lightness value. For example, referring to FIG. 4, the GUI customizer 114 may determine the difference between the lightness value for the brand color light pink and the lightness value for the default parameter color light green. In one embodiment, the GUI customizer 114 may square the determined difference.

[0062] At 808, the GUI customizer 114 may determine a product based on the first difference, the second difference, and the third difference, and the product corresponds to the similarity.

[0063] FIG. 9 is a flowchart of a method 900 for determining the similarity between a brand color and a default parameter color associated with a parameter based on the sum of differences of various color values according to some embodiments. The method 900 can be performed by processing logic that can comprise hardware (e.g., circuits, dedicated logic, programmable logic, microcode, etc.), software (e.g., instructions executed on a processing device), or a combination thereof. It should be recognized that not all steps may be required to practice the disclosure provided herein. Further, some of the steps may be performed simultaneously or in a different order than that illustrated in FIG. 9, as would be understood by one of ordinary skill in the art.

[0064] The method 900 will be described with reference to FIG. 1. However, the method 900 is not limited to the illustrated embodiments.

[0065] At 902, the GUI customizer 114 may normalize the first hue value, the second hue value, the first saturation value, the second saturation value, the first lightness value, and the second lightness value.

[0066] At 904, the GUI customizer 114 may determine a first difference based on the normalized first hue value and the normalized second hue value. For example, referring to FIG. 6, the GUI customizer 114 may determine the difference between the normalized hue value for the brand color light pink and the normalized hue value for the default parameter color light green. In one embodiment, the GUI customizer 114 may square the determined difference.

[0067] At 906, the GUI customizer 114 may apply a first weight parameter to the first difference to generate a weighted first difference.

[0068] At 908, the GUI customizer 114 may determine a second difference based on the normalized first saturation value and the normalized second saturation value. For example, referring to FIG. 6, the GUI customizer 114 may determine the difference between the normalized saturation value for the brand color light pink and the normalized saturation value for the default parameter color light green. In one embodiment, the GUI customizer 114 may square the determined difference.

[0069] At 910, the GUI customizer 114 may apply a second weight parameter to the second difference to generate a weighted second difference.

[0070] At 912, the GUI customizer 114 may determine a third difference based on the normalized first lightness value and the normalized second lightness value. For example, referring to FIG. 6, the GUI customizer 114 may determine the difference between the normalized lightness value for the brand color light pink and the normalized lightness value for the default parameter color light green. In one embodiment, the GUI customizer 114 may square the determined difference.

[0071] At 914, the GUI customizer 114 may apply a third weight parameter to the third difference to generate a weighted third difference.

[0072] At 916, the GUI customizer 114 may determine a sum based on the weighted first difference, the weighted second difference, and the weighted third difference, and the sum corresponds to a similarity.

[0073] Various embodiments may be implemented using one or more well-known computer systems, such as the computer system 1000 illustrated in FIG. 10. For example, in addition to the embodiments described herein, one or more computer systems 1000 may be used to implement any of its combinations and sub-combinations.

[0074] The computer system 1000 may include one or more processors (also referred to as central processing units or CPUs), such as the processor 1004. The processor 1004 may be connected to a communication infrastructure or bus 1006.

[0075] The computer system 1000 may also include user input / output devices 1003, such as a monitor, keyboard, pointing device, etc., that may communicate with the communication infrastructure 1006 through the user input / output interface 1002.

[0076] One or more of the processors 1004 may be a graphics processing unit (GPU). In one embodiment, the GPU may be a processor that is a dedicated electronic circuit designed to process math-intensive applications. The GPU may have a parallel structure that is efficient for parallel processing of large data blocks, such as math-intensive data, images, videos, etc., common to computer graphic applications.

[0077] The computer system 1000 may also include main or primary memory 1008, such as random access memory (RAM). The main memory 1008 may include one or more levels of cache. The main memory 1008 may store control logic (i.e., computer software) and / or data.

[0078] Computer system 1000 may also include one or more secondary storage devices or memories 1010. The secondary memory 1010 may include, for example, a hard disk drive 1012 and / or a removable storage device or drive 1014. The removable storage drive 1014 may be a floppy disk drive, magnetic tape drive, compact disk drive, optical storage device, tape backup device, and / or any other storage device / drive.

[0079] The removable storage drive 1014 may interact with a removable storage unit 1018. The removable storage unit 1018 may include a computer-usable or readable storage device storing computer software (control logic) and / or data. The removable storage unit 1018 may be a floppy disk, magnetic tape, compact disk, DVD, optical storage disk, and any other computer data storage device. The removable storage drive 1014 may read and / or write to the removable storage unit 1018.

[0080] The secondary memory 1010 may include other means, devices, components, conveniences, or other techniques to enable a computer program and / or other instructions and / or data to be accessed by the computer system 1000. Such means, devices, components, conveniences, or other techniques may include, for example, a removable storage unit 1022 and an interface 1020. Examples of the removable storage unit 1022 and the interface 1020 may include a program cartridge and a cartridge interface (such as those found in video game devices), a removable memory chip (such as an EPROM or PROM) and an associated socket, a memory stick and a USB port, a memory card and an associated memory card slot, and / or any other removable storage unit and an associated interface.

[0081] The computer system 1000 may further include a communication or network interface 1024. The communication interface 1024 may enable the computer system 1000 to communicate and interact with any combination of external devices, external networks, external entities, etc. (collectively and individually referred to by reference numeral 1028). For example, the communication interface 1024 may enable the computer system 1000 to communicate with an external or remote device 1028 through a communication path 1026, which may be wired and / or wireless (or a combination thereof), and may include any combination of a LAN, a WAN, the Internet, etc. Control logic and / or data may be transmitted between the computer system 1000 and via the communication path 1026.

[0082] The computer system 1000 can be, by way of several non - limiting examples, a personal digital assistant (PDA), a desktop workstation, a laptop or notebook computer, a netbook, a tablet, a smartphone, a smartwatch or other wearable, an appliance, a part of the Internet of Things and / or an embedded system, or any combination thereof.

[0083] The computer system 1000 can be a client or a server, and can access any application and / or data or host any application and / or data through any delivery method, including but not limited to remote or distributed cloud computing solutions; local or on - premise software (an "on - premise" cloud - based solution); a "service - as - a - model" (e.g., content as a service (CaaS), digital content as a service (DCaaS), software as a service (SaaS), management software as a service (MSaaS), platform as a service (PaaS), desktop as a service (DaaS), framework as a service (FaaS), backend as a service (BaaS), mobile backend as a service (MBaaS), infrastructure as a service (IaaS), etc.); and / or a hybrid model including any combination of the above examples or other services or delivery methods.

[0084] Any applicable data structures, file formats, and schemas in computer system 1000 may be derived from standards including, but not limited to, JavaScript Object Notation (JSON), Extensible Markup Language (XML), YAML (Yet Another Markup Language), Extensible Hypertext Markup Language (XHTML), Wireless Markup Language (WML), MessagePack, XML User Interface Language (XUL), or any other functionally equivalent representation, alone or in combination. Alternatively, proprietary data structures, formats, or schemas may be used exclusively or in combination with known or open standards.

[0085] In some embodiments, a tangible, non-transitory computer-usable or readable medium storing control logic (software) may also be referred to herein as a computer program product or program storage device. This includes, but is not limited to, tangible products embodying any of the above combinations in addition to computer system 1000, main memory 1008, secondary memory 1010, and removable storage units 1018 and 1022. Such control logic, when executed by one or more data processing devices (such as computer system 1000), may cause such data processing devices to operate as described herein.

[0086] Based on the teachings contained in this disclosure, it will be apparent to those skilled in the art how to make and use embodiments of this disclosure using data processing devices, computer systems, and / or computer architectures other than those illustrated in FIG. 10. In particular, embodiments may operate with software, hardware, and / or operating system implementations other than those described herein.

[0087] It should be recognized that the "Mode for Carrying Out the Invention" section is not any other section and is intended to be used for interpreting the scope of the claims. The other sections can define one or more (but not all) exemplary embodiments contemplated by the inventor(s), and thus are not intended to limit the present disclosure or the scope of the appended claims in any way.

[0088] It should be understood that the present disclosure describes exemplary embodiments for exemplary fields and applications, but is not limited thereto. Other embodiments and modifications thereof are possible and are within the scope and spirit of the present disclosure. For example, without limiting the generality of this paragraph, the embodiments are not limited to the software, hardware, firmware and / or entities illustrated in the figures and / or described herein. Further, the embodiments have significant utility in fields and applications beyond the examples described herein, whether or not explicitly described herein.

[0089] The embodiments are described herein using functional building blocks that illustrate the implementation of specific functions and their relationships. The boundaries of these functional building blocks are arbitrarily defined herein for the sake of explanation. Alternative boundaries can be defined as long as the specific functions and relationships (or their equivalents) are appropriately performed. Also, alternative embodiments can perform functional blocks, steps, operations, methods, etc. using an order different from that described herein.

[0090] References in this specification to "one embodiment", "an embodiment", "an example embodiment" or similar phrases indicate that the embodiment described may include a particular feature, structure, or characteristic, but every embodiment may not necessarily include the particular feature, structure, or characteristic. Moreover, such phrases are not necessarily referring to the same embodiment. Further, when a particular feature, structure, or characteristic is described in connection with an embodiment, it will be within the knowledge of one of ordinary skill in the art to incorporate such feature, structure, or characteristic into other embodiments whether or not explicitly recited or described herein. Additionally, some embodiments may be described using the terms "coupled" and "connected" and their derivatives in addition to those terms. These terms are not necessarily intended as synonyms for each other. For example, some embodiments may be described using the terms "connected" and / or "coupled" to indicate that two or more elements are in direct physical or electrical contact with each other. However, the term "coupled" can also mean that two or more elements are not in direct contact with each other but still cooperate or interact with each other.

[0091] The breadth and scope of the present disclosure should not be limited by any of the above exemplary embodiments, but should be defined only in accordance with the following claims and their equivalents.

Description of Reference Numerals

[0092] 100 System 102 Server 104 Computing Device 106 Network 109 Application 110 Design System 112 Graphical Representation Generator 114 Graphical User Interface (GUI) Customizer 116 Brand Color Acquirer 117 Directed Graphical Representation 118 Display Screen 120 Browser 122 User Interface 200 Directed Graph Representation 202, 204, 206, 208, 210, 212, 214 Nodes 216, 218, 220, 222, 224, 226 Edges 1000 Computer System 1002 User Input / Output Interface 1003 User Input / Output Device 1004 Processor 1006 Communication Infrastructure 1008 Main Memory 1010 Secondary Memory 1012 Hard Disk Drive 1014 Removable Storage Drive 1018 Removable Storage Unit 1020 Interface 1022 Removable Storage Unit 1024 Communication Interface 1026 Communication Path 1028 Remote Device, Remote Network, Remote Entity

Claims

1. Obtaining an indication of one or more brand colors associated with an organization; Generating a directed graph representation of a plurality of parameters of a design system for a graphical user interface (GUI) of an application, each of the plurality of parameters being assigned a respective default parameter color; Determining at least one parameter among the plurality of parameters corresponding to each root node of the directed graph representation, each root node having a respective number of outgoing edges that couple the respective parameter of the at least one parameter to at least one child node of the directed graph representation corresponding to at least one other parameter among the plurality of parameters; For each brand color of the one or more brand colors, Determining a respective similarity between the brand color and the respective default parameter color associated with the at least one parameter; Combining the respective similarities with the respective number of outgoing edges of the respective root nodes corresponding to the at least one parameter to generate respective combination values associated with the brand color and the at least one parameter; Determining a specific parameter among the at least one parameter for the brand color having the maximum respective combination value; Assigning the brand color to the specific parameter in response to a determination that the specific parameter has the maximum respective combination value; Causing the GUI of the application to be rendered based on the brand color assigned to the specific parameter A computer-implemented method comprising.

2. The step of obtaining the one or more brand colors is Determining the one or more brand colors based on a color histogram of a logo of the organization, or Determining the one or more brand colors via a large language model instructed to extract the one or more brand colors from an image comprising the logo of the organization The computer-implemented method according to claim 1, comprising

3. The step of arranging each of the at least one parameter in order based on each respective number of the out-edges of each respective root node corresponding to each parameter The computer-implemented method according to claim 1, further comprising

4. The step of determining that each respective similarity between the brand color and each respective default parameter color associated with the at least one parameter exceeds a predetermined threshold; and In response to the determination that each respective similarity between the brand color and each respective default parameter color associated with the at least one parameter exceeds the predetermined threshold, the step of avoiding assigning the brand color to the at least one parameter The computer-implemented method according to claim 1, further comprising

5. For each respective combination value smaller than the largest respective combination value, the step of avoiding each respective brand color of the one or more brand colors associated with the respective combination value and the specific parameter for assignment The computer-implemented method according to claim 1, further comprising

6. The computer-implemented method according to claim 1, wherein the brand color is associated with a plurality of first color values, and each respective default parameter color associated with the at least one parameter is associated with a plurality of second color values.

7. The computer-implemented method according to claim 6, wherein the plurality of first color values include a first hue value, a first saturation value, and a first lightness value, and the plurality of second color values include a second hue value, a second saturation value, and a second lightness value.

8. The step of determining each respective similarity between the brand color and each respective default parameter color associated with the at least one parameter comprises The step of determining a first difference based on the first hue value and the second hue value; The step of determining a second difference based on the first saturation value and the second saturation value; The step of determining a third difference based on the first lightness value and the second lightness value; A step of determining a product based on the first difference, the second difference, and the third difference, wherein the product corresponds to the similarity The computer-implemented method according to claim 7, comprising: **Claim 9** The step of determining the respective similarity between the brand color and each of the respective default parameter colors associated with the at least one parameter Normalizing the first hue value, the second hue value, the first saturation value, the second saturation value, the first lightness value, and the second lightness value Determining a first difference based on the normalized first hue value and the normalized second hue value Applying a first weight parameter to the first difference to generate a weighted first difference Determining a second difference based on the normalized first saturation value and the normalized second saturation value Applying a second weight parameter to the second difference to generate a weighted second difference Determining a third difference based on the normalized first lightness value and the normalized second lightness value Applying a third weight parameter to the third difference to generate a weighted third difference A step of determining a sum based on the weighted first difference, the weighted second difference, and the weighted third difference, wherein the sum corresponds to the similarity The computer-implemented method according to claim 7, comprising: **Claim 10** A memory At least one processor coupled to the memory Comprising, wherein the at least one processor Obtaining an indication of one or more brand colors associated with an organization Generating a directed graph representation of a plurality of parameters of a design system for a graphical user interface (GUI) of an application, wherein each of the plurality of parameters is assigned a respective default parameter color Determining at least one parameter among the plurality of parameters corresponding to each root node of the directed graph representation, wherein each root node has a respective number of outgoing edges that couple each parameter of the at least one parameter to at least one child node of the directed graph representation corresponding to at least one other parameter among the plurality of parameters; For each of the one or more brand colors, Determining a respective similarity between the brand color and each respective default parameter color associated with the at least one parameter; Combining each respective similarity with the respective number of outgoing edges of each respective root node corresponding to the at least one parameter to generate a respective combination value associated with the brand color and the at least one parameter; Determining a specific parameter among the at least one parameter for the brand color having the maximum respective combination value; In response to the determination that the specific parameter has the maximum respective combination value, assigning the brand color to the specific parameter; Causing the GUI of the application to be drawn based on the brand color assigned to the specific parameter A system configured to do so.

11. To obtain the one or more brand colors, the at least one processor Determines the one or more brand colors based on a color histogram of the logo of the organization, or Determines the one or more brand colors via a large language model instructed to extract the one or more brand colors from an image comprising the logo of the organization The system according to claim 10, configured as such.

12. The at least one processor The system according to claim 10, further configured to order each parameter of the at least one parameter based on each respective number of outgoing edges of each respective root node corresponding to each parameter.

13. The at least one processor determining that each respective similarity between the brand color and each respective default parameter color associated with the at least one parameter exceeds a predetermined threshold; responding to the determination that each respective similarity between the brand color and each respective default parameter color associated with the at least one parameter exceeds the predetermined threshold by avoiding assigning the brand color to the at least one parameter; The system according to claim 10, further configured to do so.

14. The at least one processor is The system according to claim 10, further configured to avoid, for each respective combination value less than the respective maximum combination value, each respective brand color of the one or more brand colors associated with the respective combination value and the specific parameter for assignment.

15. The system according to claim 10, wherein the brand color is associated with a plurality of first color values, and each respective default parameter color associated with the at least one parameter is associated with a plurality of second color values.

16. The system according to claim 15, wherein the plurality of first color values include a first hue value, a first saturation value, and a first lightness value, and the plurality of second color values include a second hue value, a second saturation value, and a second lightness value.

17. To determine each respective similarity between the brand color and each respective default parameter color associated with the at least one parameter, the at least one processor is determining a first difference based on the first hue value and the second hue value; determining a second difference based on the first saturation value and the second saturation value; determining a third difference based on the first lightness value and the second lightness value; determining a product based on the first difference, the second difference, and the third difference, the product corresponding to the similarity; The system according to claim 16, configured to do so.

18. To determine the respective similarities between the brand color and each of the default parameter colors associated with the at least one parameter, the at least one processor normalizes the first hue value, the second hue value, the first saturation value, the second saturation value, the first lightness value, and the second lightness value; determines a first difference based on the normalized first hue value and the normalized second hue value; applies a first weight parameter to the first difference to generate a weighted first difference; determines a second difference based on the normalized first saturation value and the normalized second saturation value; applies a second weight parameter to the second difference to generate a weighted second difference; determines a third difference based on the normalized first lightness value and the normalized second lightness value; applies a third weight parameter to the third difference to generate a weighted third difference; determining a sum based on the weighted first difference, the weighted second difference, and the weighted third difference, wherein the sum corresponds to the similarity; The system according to claim 16, configured to perform the above.

19. A non-transitory computer-readable device storing instructions that, when executed by at least one computing device, cause the at least one computing device to perform operations, the operations comprising: obtaining an indication of one or more brand colors associated with an organization; generating a directed graph representation of a plurality of parameters of a design system for a graphical user interface (GUI) of an application, wherein each of the plurality of parameters is assigned a respective default parameter color; determining at least one parameter of the plurality of parameters corresponding to each root node of the directed graph representation, each root node having a respective number of outgoing edges connecting the respective parameter of the at least one parameter to at least one child node of the directed graph representation corresponding to at least one other parameter of the plurality of parameters; For each of the one or more brand colors, determine a respective similarity between the brand color and the respective default parameter color associated with the at least one parameter; generate a respective combined value associated with the brand color and the at least one parameter by combining the respective similarities with the number of respective outgoing edges of the respective root nodes corresponding to the at least one parameter; determine a particular parameter among the at least one parameter for the brand color having the largest respective combined value; assign the brand color to the particular parameter in response to a determination that the particular parameter has the largest respective combined value; cause the GUI of the application to be rendered based on the brand color assigned to the particular parameter A non-transitory computer-readable device comprising the above. **Claim 20** The obtaining of the one or more brand colors is determining the one or more brand colors based on a color histogram of the logo of the organization, or determining the one or more brand colors via a large language model instructed to extract the one or more brand colors from an image comprising the logo of the organization The non-transitory computer-readable device according to claim 19, comprising the above.

Images