Automated Image-Based User Interface Color Theme Generation

: Color plays an essential role in the design of user interfaces and significantly impacts the user experience. To create aesthetically pleasing and user-friendly interfaces, the colors of the user interface should be consistent with the images. The latter can be challenging to achieve, as images often have different colors and are often changed by editors or authors who do not have sufficient design knowledge. To solve this problem, we have developed a model that automatically determines the color theme of the user interface based on a given image. The model first extracts the most prominent colors from the image and then considers both aesthetic (color harmony and compatibility with the image) and usability aspects (color contrast, color diversity, and color strength). All color calculations are performed in the perceptually uniform color space CAM02-UCS. In addition, the model can be adapted to the user’s needs and requirements. To test the model, we implemented it in a web-based application in which the colors were automatically selected based on the featured image. The resulting color themes were then evaluated by the users, who were mainly professional designers. According to the results, the model generates color themes that are consistent with the image, aesthetic, and user-friendly. An important observation was also that color harmony can be achieved simply by using the most prominent colors of the image (regardless of their hue), suggesting that color harmony is strongly influenced by the context of use. The presented model holds significant practical importance as it can be utilized in various applications and tools. For instance, it can automatically choose a color theme for a user interface based on a particular image, such as a company logo or a product image. Moreover, it can dynamically adjust the colors of elements in real time based on the image that is visible simultaneously with the elements.


Introduction
Color is one of the most essential elements in the design of user interfaces (UI) and has a major impact on the user experience (UX).From an aesthetic point of view, the UI color theme should be consistent with the images, especially with the featured image that accompanies and highlights the main content.When an image is placed next to elements of the user interface, there is a mutual effect on the color harmony and overall attractiveness.To ensure that the images match the UI color theme, the designer must either select images based on the predefined color theme, or an appropriate color theme based on the preselected images.This is achievable if the designer controls the images and the color theme.For example, when designing a promotional website for a product, the designer may choose the color theme based on the images and the visual identity of the company.However, conforming the color theme with the images becomes more challenging when the images have different colors or when the content of the user interface is dynamic.For example, in applications for music listening (Apple Music, Spotify etc.), the covers of the albums are dynamic and can change over time.A common solution is to use a color theme of achromatic or monochromatic colors.Unfortunately, this may reduce the attractiveness of the user interface and negatively impact the overall user experience.
Much research in recent years has focused on creating models and tools for generating color palettes or themes.Despite being recognized as highly useful and practical, these tools exhibit at least one of the following deficiencies: • They do not consider the properties or characteristics of colors to achieve an optimal user experience (contrast, diversity, or prominence); • They do not support dynamic, real-time computation of color themes; • They do not support customization or settings to match user preferences; • They do not consider images-the focus is solely on color harmony or preference.
To address these shortcomings, we have developed a new model that automatically determines the UI color theme based on a given image and user preferences.When determining the color theme, the model starts by identifying the most prominent colors in the image.It then considers both the aesthetic aspect, such as color harmony and compatibility with the image, and the usability aspect, such as contrast between colors, color diversity, color suitability, and color strength.Furthermore, the model can be customized through settings to ensure that the generated color theme matches the user's requirements.
This article is divided into two parts.The first part explains the framework and structure of the model, while the second part describes its implementation in a web-based application and its evaluation based on user feedback.

Related Work
Much research in recent years has focused on creating models and tools for generating color themes or palettes.Gramazio et al. [1] have presented a tool for creating discriminable and aesthetically-preferred color palettes for information visualization.The tool uses an iterative, semi-random sampling procedure in the CIELAB color space to generate palettes of a given size and allows the user to customize the palette creation by changing the number of colors, defining which hues to sample from, and providing an existing palette to build upon.Even though the tool considers discriminability or color diversity, it does not consider other usability aspects, such as prominence and contrast.Gijsenij et al. [2] presented a method for identifying key colors from the image or mood board using a clustering algorithm similar to k-means.However, in this method, the initial centroids are fixed based on a predefined pattern, and each iteration includes merging based on a predefined color difference threshold.Although the method focuses on finding diverse colors, it does not take into account other usability aspects and aesthetics of colors-color harmony or preference.
A lot of research has been concentrated on creating data-driven models utilizing machine learning techniques.O'Donovan et al. [3] used 327,381 human ratings of 22,376 color themes to train a model with the LASSO algorithm.The proposed model used more than 300 features to describe the color themes.Similarly, Lin et al. collected 1,600 color themes from 160 participants and extracted 70 theme features.O'Donovan's model was recently extended by Kitta et al. [4] to support the creation of color themes with different numbers of colors.Yuan et al. [5] also developed an interactive tool for creating color palettes for infographics that use a recommendation engine based on deep learning to characterize color design practices from data.
Only a limited number of studies focus on the automatic generation of color themes for user interfaces.One of these studies, conducted by Gu et al. [6], introduced a framework for automatically coloring web pages.The framework implements probabilistic models based on data to ensure appropriate visual contrasts, compatibility of multiple colors, and semantic associations.
Table 1 compares the features of the models and methods mentioned in this section with the model presented in this article.Yuan et al. [5] Gu et al. [6] Presented model

Color and User Experience
Studies have shown that color can contribute to better visual hier improving the parsing and interpretation of the content [7].In a exceptional tool for attracting attention and thus influencing the ac Numerous experiments have established that color can also influen and experience by improving visual search efficiency and decreasing Therefore, it is important to choose the appropriate color for background.For optimal user experience, it is recommended to use l for the background and high-contrast colors for the foreground [10,1 In user interface design, color can be used to group elements functionality, and increase aesthetic value [12].One color is typically u color, while another color is used as an accent.The dominant color is used color in the user interface, and it is based on the visual identit product.It is important to remember that color can affect emotions o has symbolic meanings that can impact credibility and the trust of th other hand, the accent color is used to highlight specific elements an them.This is typically achieved by using highly contrasting or satur instance, the accent color is often applied to the call-to-action (CT designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend la colors.While there are no universally attractive single colors, as a p depends on individuals, context, social influence, etc., research show are commonly less appealing to people [13,[17][18][19][20].Although th preference for individual colors, some color combinations are natur (preferred color combinations) or work better together as a whole-h recent years, scientists and researchers have conducted numerous stu and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often co certain common denominators can be identified.Colors are considere have a similar or identical hue (analogous colors), a similar chrom lightness levels (monochromatic colors).On average, people prefer c rather than warm color combinations.Both the preference and harmo similarity of hues, although preference depends more on individual c lightness contrast.At the same time, harmonious colors are more sim , feature is supported Yuan et al. [5] Gu et al. [6] Presented model

Color and User Experience
Studies have shown that color can contribute to better visu improving the parsing and interpretation of the content [7 exceptional tool for attracting attention and thus influencing Numerous experiments have established that color can also i and experience by improving visual search efficiency and decr Therefore, it is important to choose the appropriate colo background.For optimal user experience, it is recommended t for the background and high-contrast colors for the foregroun In user interface design, color can be used to group el functionality, and increase aesthetic value [12].One color is typ color, while another color is used as an accent.The dominant used color in the user interface, and it is based on the visual product.It is important to remember that color can affect emo has symbolic meanings that can impact credibility and the tru other hand, the accent color is used to highlight specific elem them.This is typically achieved by using highly contrasting o instance, the accent color is often applied to the call-to-acti designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface dep colors.While there are no universally attractive single colors depends on individuals, context, social influence, etc., researc are commonly less appealing to people [13,[17][18][19][20]. Althou preference for individual colors, some color combinations ar (preferred color combinations) or work better together as a wh recent years, scientists and researchers have conducted numer and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite o certain common denominators can be identified.Colors are con have a similar or identical hue (analogous colors), a similar lightness levels (monochromatic colors).On average, people p rather than warm color combinations.Both the preference and similarity of hues, although preference depends more on indiv lightness contrast.At the same time, harmonious colors are m , feature is only partially supported with the model presented in this article.[5] Gu et al. [6] Presented model

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, conseque improving the parsing and interpretation of the content [7].In addition, color i exceptional tool for attracting attention and thus influencing the actions of the user Numerous experiments have established that color can also influence user perform and experience by improving visual search efficiency and decreasing cognitive effort [ Therefore, it is important to choose the appropriate color for an element and background.For optimal user experience, it is recommended to use low-saturation co for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meanin functionality, and increase aesthetic value [12].One color is typically used as the domi color, while another color is used as an accent.The dominant color is the most freque used color in the user interface, and it is based on the visual identity of the compan product.It is important to remember that color can affect emotions or moods [13,14], has symbolic meanings that can impact credibility and the trust of the users [15].On other hand, the accent color is used to highlight specific elements and draw attentio them.This is typically achieved by using highly contrasting or saturated colors [16] instance, the accent color is often applied to the call-to-action (CTA) button, whic designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the ch colors.While there are no universally attractive single colors, as a preference for co depends on individuals, context, social influence, etc., research shows that certain co are commonly less appealing to people [13,[17][18][19][20].Although there is no unive preference for individual colors, some color combinations are naturally more attrac (preferred color combinations) or work better together as a whole-harmonious color recent years, scientists and researchers have conducted numerous studies on harmon and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory res certain common denominators can be identified.Colors are considered harmonious if have a similar or identical hue (analogous colors), a similar chroma value, or diffe lightness levels (monochromatic colors).On average, people prefer combinations of rather than warm color combinations.Both the preference and harmony increase with similarity of hues, although preference depends more on individual color preferences lightness contrast.At the same time, harmonious colors are more similar in hue, ten .

Image-Based
Color Harmony or Preference Customization

Dynamic, Real-Time Computation
Gramazio et al. [1] Appl.Sci.2024, 14, x FOR PEER REVIEW 3 of 27 Table 1 compares the features of the models and methods mentioned in this section with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and methods mentioned in this with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, conse improving the parsing and interpretation of the content [7].In addition, colo exceptional tool for attracting attention and thus influencing the actions of the Numerous experiments have established that color can also influence user perfo and experience by improving visual search efficiency and decreasing cognitive eff Therefore, it is important to choose the appropriate color for an element background.For optimal user experience, it is recommended to use low-saturatio for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal mea functionality, and increase aesthetic value [12].One color is typically used as the do color, while another color is used as an accent.The dominant color is the most fre used color in the user interface, and it is based on the visual identity of the com product.It is important to remember that color can affect emotions or moods [13, has symbolic meanings that can impact credibility and the trust of the users [15] other hand, the accent color is used to highlight specific elements and draw atte them.This is typically achieved by using highly contrasting or saturated colors [ instance, the accent color is often applied to the call-to-action (CTA) button, w designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the colors.While there are no universally attractive single colors, as a preference fo depends on individuals, context, social influence, etc., research shows that certai are commonly less appealing to people [13,[17][18][19][20].Although there is no u preference for individual colors, some color combinations are naturally more a (preferred color combinations) or work better together as a whole-harmonious c recent years, scientists and researchers have conducted numerous studies on harm and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory certain common denominators can be identified.Colors are considered harmoniou have a similar or identical hue (analogous colors), a similar chroma value, or d lightness levels (monochromatic colors).On average, people prefer combinations rather than warm color combinations.Both the preference and harmony increase similarity of hues, although preference depends more on individual color preferen lightness contrast.At the same time, harmonious colors are more similar in hue, Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and method with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better vis improving the parsing and interpretation of the content [7 exceptional tool for attracting attention and thus influencing Numerous experiments have established that color can also and experience by improving visual search efficiency and decr Therefore, it is important to choose the appropriate colo background.For optimal user experience, it is recommended for the background and high-contrast colors for the foregroun In user interface design, color can be used to group e functionality, and increase aesthetic value [12].One color is typ color, while another color is used as an accent.The dominant used color in the user interface, and it is based on the visual product.It is important to remember that color can affect emo has symbolic meanings that can impact credibility and the tr other hand, the accent color is used to highlight specific elem them.This is typically achieved by using highly contrasting instance, the accent color is often applied to the call-to-act designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface dep colors.While there are no universally attractive single colors depends on individuals, context, social influence, etc., resear are commonly less appealing to people [13,[17][18][19][20]. Altho preference for individual colors, some color combinations a (preferred color combinations) or work better together as a wh recent years, scientists and researchers have conducted nume and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite o certain common denominators can be identified.Colors are co have a similar or identical hue (analogous colors), a similar lightness levels (monochromatic colors).On average, people rather than warm color combinations.Both the preference and similarity of hues, although preference depends more on indiv lightness contrast.At the same time, harmonious colors are m Gijsenij et al. [2] Appl.Sci.2024, 14, x FOR PEER REVIEW 3 of 27

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to  .[2] et al. [3] ] ] odel 3. Background

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequen improving the parsing and interpretation of the content [7].In addition, color is exceptional tool for attracting attention and thus influencing the actions of the user Numerous experiments have established that color can also influence user performa and experience by improving visual search efficiency and decreasing cognitive effort [8 Therefore, it is important to choose the appropriate color for an element and background.For optimal user experience, it is recommended to use low-saturation co for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning functionality, and increase aesthetic value [12].One color is typically used as the domin color, while another color is used as an accent.The dominant color is the most frequen used color in the user interface, and it is based on the visual identity of the company product.It is important to remember that color can affect emotions or moods [13,14], has symbolic meanings that can impact credibility and the trust of the users [15].On other hand, the accent color is used to highlight specific elements and draw attention them.This is typically achieved by using highly contrasting or saturated colors [16].instance, the accent color is often applied to the call-to-action (CTA) button, whic designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the cho colors.While there are no universally attractive single colors, as a preference for co depends on individuals, context, social influence, etc., research shows that certain co are commonly less appealing to people [13,[17][18][19][20].Although there is no unive preference for individual colors, some color combinations are naturally more attrac (preferred color combinations) or work better together as a whole-harmonious colors recent years, scientists and researchers have conducted numerous studies on harmoni and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory resu certain common denominators can be identified.Colors are considered harmonious if t have a similar or identical hue (analogous colors), a similar chroma value, or differ lightness levels (monochromatic colors).On average, people prefer combinations of c rather than warm color combinations.Both the preference and harmony increase with similarity of hues, although preference depends more on individual color preferences lightness contrast.At the same time, harmonious colors are more similar in hue, tend

Color and User Experience
Studies have shown that color can contribute to better visual h improving the parsing and interpretation of the content [7].In exceptional tool for attracting attention and thus influencing the Numerous experiments have established that color can also influ and experience by improving visual search efficiency and decreasi Therefore, it is important to choose the appropriate color fo background.For optimal user experience, it is recommended to us for the background and high-contrast colors for the foreground [1 In user interface design, color can be used to group eleme functionality, and increase aesthetic value [12].One color is typical color, while another color is used as an accent.The dominant colo used color in the user interface, and it is based on the visual iden product.It is important to remember that color can affect emotion has symbolic meanings that can impact credibility and the trust o other hand, the accent color is used to highlight specific elements them.This is typically achieved by using highly contrasting or sa instance, the accent color is often applied to the call-to-action ( designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend colors.While there are no universally attractive single colors, as depends on individuals, context, social influence, etc., research sh are commonly less appealing to people [13,[17][18][19][20].Although preference for individual colors, some color combinations are na (preferred color combinations) or work better together as a wholerecent years, scientists and researchers have conducted numerous and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often certain common denominators can be identified.Colors are consid have a similar or identical hue (analogous colors), a similar chr lightness levels (monochromatic colors).On average, people pref rather than warm color combinations.Both the preference and har similarity of hues, although preference depends more on individu lightness contrast.At the same time, harmonious colors are more

Color and User Experience
Studies have shown that color can contrib improving the parsing and interpretation o exceptional tool for attracting attention and t Numerous experiments have established that and experience by improving visual search effi Therefore, it is important to choose the a background.For optimal user experience, it is for the background and high-contrast colors fo In user interface design, color can be u functionality, and increase aesthetic value [12].color, while another color is used as an accent used color in the user interface, and it is base product.It is important to remember that colo has symbolic meanings that can impact credib other hand, the accent color is used to highlig them.This is typically achieved by using high instance, the accent color is often applied to designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a us colors.While there are no universally attracti depends on individuals, context, social influe are commonly less appealing to people [1 preference for individual colors, some color c (preferred color combinations) or work better recent years, scientists and researchers have co and preferred color combinations [13,17,19 certain common denominators can be identifie have a similar or identical hue (analogous co lightness levels (monochromatic colors).On a rather than warm color combinations.Both the similarity of hues, although preference depend lightness contrast.At the same time, harmoni O'Donovan et al. [3] FOR PEER REVIEW 3 of 27 Table 1 compares the features of the models and methods mentioned in this section with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and methods m with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better visual h improving the parsing and interpretation of the content [7].In exceptional tool for attracting attention and thus influencing the Numerous experiments have established that color can also influ and experience by improving visual search efficiency and decreasi Therefore, it is important to choose the appropriate color fo background.For optimal user experience, it is recommended to us for the background and high-contrast colors for the foreground [1 In user interface design, color can be used to group eleme functionality, and increase aesthetic value [12].One color is typical color, while another color is used as an accent.The dominant colo used color in the user interface, and it is based on the visual iden product.It is important to remember that color can affect emotion has symbolic meanings that can impact credibility and the trust o other hand, the accent color is used to highlight specific elements them.This is typically achieved by using highly contrasting or sa instance, the accent color is often applied to the call-to-action ( designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend colors.While there are no universally attractive single colors, as depends on individuals, context, social influence, etc., research sh are commonly less appealing to people [13,[17][18][19][20].Although preference for individual colors, some color combinations are na (preferred color combinations) or work better together as a wholerecent years, scientists and researchers have conducted numerous and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often certain common denominators can be identified.Colors are consid have a similar or identical hue (analogous colors), a similar chr lightness levels (monochromatic colors).On average, people pref rather than warm color combinations.Both the preference and har similarity of hues, although preference depends more on individu lightness contrast.At the same time, harmonious colors are more

Color and User Experience
Studies have shown that color can contrib improving the parsing and interpretation o exceptional tool for attracting attention and t Numerous experiments have established that and experience by improving visual search effi Therefore, it is important to choose the a background.For optimal user experience, it is for the background and high-contrast colors fo In user interface design, color can be u functionality, and increase aesthetic value [12].color, while another color is used as an accent used color in the user interface, and it is base product.It is important to remember that colo has symbolic meanings that can impact credib other hand, the accent color is used to highlig them.This is typically achieved by using high instance, the accent color is often applied to designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a us colors.While there are no universally attracti depends on individuals, context, social influe are commonly less appealing to people [1 preference for individual colors, some color c (preferred color combinations) or work better recent years, scientists and researchers have co and preferred color combinations [13,17,19 certain common denominators can be identifie have a similar or identical hue (analogous co lightness levels (monochromatic colors).On a rather than warm color combinations.Both the similarity of hues, although preference depend lightness contrast.At the same time, harmoni

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and methods mentioned in this with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, conse improving the parsing and interpretation of the content [7].In addition, colo exceptional tool for attracting attention and thus influencing the actions of the Numerous experiments have established that color can also influence user perfo and experience by improving visual search efficiency and decreasing cognitive eff Therefore, it is important to choose the appropriate color for an element background.For optimal user experience, it is recommended to use low-saturatio for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal mea functionality, and increase aesthetic value [12].One color is typically used as the do color, while another color is used as an accent.The dominant color is the most fre used color in the user interface, and it is based on the visual identity of the com product.It is important to remember that color can affect emotions or moods [13, has symbolic meanings that can impact credibility and the trust of the users [15] other hand, the accent color is used to highlight specific elements and draw atte them.This is typically achieved by using highly contrasting or saturated colors [ instance, the accent color is often applied to the call-to-action (CTA) button, w designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the colors.While there are no universally attractive single colors, as a preference fo depends on individuals, context, social influence, etc., research shows that certai are commonly less appealing to people [13,[17][18][19][20].Although there is no u preference for individual colors, some color combinations are naturally more a (preferred color combinations) or work better together as a whole-harmonious c recent years, scientists and researchers have conducted numerous studies on harm and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory certain common denominators can be identified.Colors are considered harmoniou have a similar or identical hue (analogous colors), a similar chroma value, or d lightness levels (monochromatic colors).On average, people prefer combinations rather than warm color combinations.Both the preference and harmony increase similarity of hues, although preference depends more on individual color preferen lightness contrast.At the same time, harmonious colors are more similar in hue,

Color and User Experience
Studies have shown that color can contrib improving the parsing and interpretation o exceptional tool for attracting attention and t Numerous experiments have established that and experience by improving visual search effi Therefore, it is important to choose the a background.For optimal user experience, it is for the background and high-contrast colors fo In user interface design, color can be u functionality, and increase aesthetic value [12].color, while another color is used as an accent used color in the user interface, and it is base product.It is important to remember that colo has symbolic meanings that can impact credib other hand, the accent color is used to highlig them.This is typically achieved by using high instance, the accent color is often applied to designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a us colors.While there are no universally attracti depends on individuals, context, social influe are commonly less appealing to people [1 preference for individual colors, some color c (preferred color combinations) or work better recent years, scientists and researchers have co and preferred color combinations [13,17,19 certain common denominators can be identifie have a similar or identical hue (analogous co lightness levels (monochromatic colors).On a rather than warm color combinations.Both the similarity of hues, although preference depend lightness contrast.At the same time, harmoni Yuan et al. [5] FOR PEER REVIEW 3 of 27

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, conse improving the parsing and interpretation of the content [7].In addition, colo exceptional tool for attracting attention and thus influencing the actions of the Numerous experiments have established that color can also influence user perfo and experience by improving visual search efficiency and decreasing cognitive eff Therefore, it is important to choose the appropriate color for an element background.For optimal user experience, it is recommended to use low-saturatio for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal mea functionality, and increase aesthetic value [12].One color is typically used as the do color, while another color is used as an accent.The dominant color is the most fre used color in the user interface, and it is based on the visual identity of the com product.It is important to remember that color can affect emotions or moods [13, has symbolic meanings that can impact credibility and the trust of the users [15] other hand, the accent color is used to highlight specific elements and draw atte them.This is typically achieved by using highly contrasting or saturated colors [ instance, the accent color is often applied to the call-to-action (CTA) button, w designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the colors.While there are no universally attractive single colors, as a preference fo depends on individuals, context, social influence, etc., research shows that certai are commonly less appealing to people [13,[17][18][19][20].Although there is no u preference for individual colors, some color combinations are naturally more a (preferred color combinations) or work better together as a whole-harmonious c recent years, scientists and researchers have conducted numerous studies on harm and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory certain common denominators can be identified.Colors are considered harmoniou have a similar or identical hue (analogous colors), a similar chroma value, or d lightness levels (monochromatic colors).On average, people prefer combinations rather than warm color combinations.Both the preference and harmony increase similarity of hues, although preference depends more on individual color preferen lightness contrast.At the same time, harmonious colors are more similar in hue, Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and method with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better vis improving the parsing and interpretation of the content [7 exceptional tool for attracting attention and thus influencing Numerous experiments have established that color can also and experience by improving visual search efficiency and decr Therefore, it is important to choose the appropriate colo background.For optimal user experience, it is recommended for the background and high-contrast colors for the foregroun In user interface design, color can be used to group e functionality, and increase aesthetic value [12].One color is typ color, while another color is used as an accent.The dominant used color in the user interface, and it is based on the visual product.It is important to remember that color can affect emo has symbolic meanings that can impact credibility and the tr other hand, the accent color is used to highlight specific elem them.This is typically achieved by using highly contrasting instance, the accent color is often applied to the call-to-act designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface dep colors.While there are no universally attractive single colors depends on individuals, context, social influence, etc., resear are commonly less appealing to people [13,[17][18][19][20]. Altho preference for individual colors, some color combinations a (preferred color combinations) or work better together as a wh recent years, scientists and researchers have conducted nume and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite o certain common denominators can be identified.Colors are co have a similar or identical hue (analogous colors), a similar lightness levels (monochromatic colors).On average, people rather than warm color combinations.Both the preference and similarity of hues, although preference depends more on indiv lightness contrast.At the same time, harmonious colors are m Gu et al. [6] 3 of 27

Background . Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently proving the parsing and interpretation of the content [7].In addition, color is an ceptional tool for attracting attention and thus influencing the actions of the user [8].merous experiments have established that color can also influence user performance d experience by improving visual search efficiency and decreasing cognitive effort [8,9].erefore, it is important to choose the appropriate color for an element and its ckground.For optimal user experience, it is recommended to use low-saturation colors r the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or nctionality, and increase aesthetic value [12].One color is typically used as the dominant lor, while another color is used as an accent.The dominant color is the most frequently ed color in the user interface, and it is based on the visual identity of the company or oduct.It is important to remember that color can affect emotions or moods [13,14], and s symbolic meanings that can impact credibility and the trust of the users [15].On the her hand, the accent color is used to highlight specific elements and draw attention to em.This is typically achieved by using highly contrasting or saturated colors [16].For stance, the accent color is often applied to the call-to-action (CTA) button, which is signed to encourage users to take action.

. Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen lors.While there are no universally attractive single colors, as a preference for colors pends on individuals, context, social influence, etc., research shows that certain colors e commonly less appealing to people [13,[17][18][19][20].Although there is no universal eference for individual colors, some color combinations are naturally more attractive referred color combinations) or work better together as a whole-harmonious colors.In cent years, scientists and researchers have conducted numerous studies on harmonious d preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, rtain common denominators can be identified.Colors are considered harmonious if they ve a similar or identical hue (analogous colors), a similar chroma value, or different htness levels (monochromatic colors).On average, people prefer combinations of cool ther than warm color combinations.Both the preference and harmony increase with the ilarity of hues, although preference depends more on individual color preferences and htness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hier improving the parsing and interpretation of the content [7].In a exceptional tool for attracting attention and thus influencing the ac Numerous experiments have established that color can also influen and experience by improving visual search efficiency and decreasing Therefore, it is important to choose the appropriate color for background.For optimal user experience, it is recommended to use l for the background and high-contrast colors for the foreground [10,1 In user interface design, color can be used to group elements functionality, and increase aesthetic value [12].One color is typically u color, while another color is used as an accent.The dominant color is used color in the user interface, and it is based on the visual identit product.It is important to remember that color can affect emotions o has symbolic meanings that can impact credibility and the trust of th other hand, the accent color is used to highlight specific elements an them.This is typically achieved by using highly contrasting or satur instance, the accent color is often applied to the call-to-action (CT designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend la colors.While there are no universally attractive single colors, as a p depends on individuals, context, social influence, etc., research show are commonly less appealing to people [13,[17][18][19][20].Although th preference for individual colors, some color combinations are natur (preferred color combinations) or work better together as a whole-h recent years, scientists and researchers have conducted numerous stu and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often co certain common denominators can be identified.Colors are considere have a similar or identical hue (analogous colors), a similar chrom lightness levels (monochromatic colors).On average, people prefer c rather than warm color combinations.Both the preference and harmo similarity of hues, although preference depends more on individual c lightness contrast.At the same time, harmonious colors are more sim Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and methods mentioned in this with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, conse improving the parsing and interpretation of the content [7].In addition, colo exceptional tool for attracting attention and thus influencing the actions of the Numerous experiments have established that color can also influence user perfo and experience by improving visual search efficiency and decreasing cognitive eff Therefore, it is important to choose the appropriate color for an element background.For optimal user experience, it is recommended to use low-saturatio for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal mea functionality, and increase aesthetic value [12].One color is typically used as the do color, while another color is used as an accent.The dominant color is the most fre used color in the user interface, and it is based on the visual identity of the com product.It is important to remember that color can affect emotions or moods [13, has symbolic meanings that can impact credibility and the trust of the users [15] other hand, the accent color is used to highlight specific elements and draw atte them.This is typically achieved by using highly contrasting or saturated colors [ instance, the accent color is often applied to the call-to-action (CTA) button, w designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the colors.While there are no universally attractive single colors, as a preference fo depends on individuals, context, social influence, etc., research shows that certai are commonly less appealing to people [13,[17][18][19][20].Although there is no u preference for individual colors, some color combinations are naturally more a (preferred color combinations) or work better together as a whole-harmonious c recent years, scientists and researchers have conducted numerous studies on harm and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory certain common denominators can be identified.Colors are considered harmoniou have a similar or identical hue (analogous colors), a similar chroma value, or d lightness levels (monochromatic colors).On average, people prefer combinations rather than warm color combinations.Both the preference and harmony increase similarity of hues, although preference depends more on individual color preferen lightness contrast.At the same time, harmonious colors are more similar in hue, Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and method with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better vis improving the parsing and interpretation of the content [7 exceptional tool for attracting attention and thus influencing Numerous experiments have established that color can also and experience by improving visual search efficiency and decr Therefore, it is important to choose the appropriate colo background.For optimal user experience, it is recommended for the background and high-contrast colors for the foregroun In user interface design, color can be used to group e functionality, and increase aesthetic value [12].One color is typ color, while another color is used as an accent.The dominant used color in the user interface, and it is based on the visual product.It is important to remember that color can affect emo has symbolic meanings that can impact credibility and the tr other hand, the accent color is used to highlight specific elem them.This is typically achieved by using highly contrasting instance, the accent color is often applied to the call-to-act designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface dep colors.While there are no universally attractive single colors depends on individuals, context, social influence, etc., resear are commonly less appealing to people [13,[17][18][19][20]. Altho preference for individual colors, some color combinations a (preferred color combinations) or work better together as a wh recent years, scientists and researchers have conducted nume and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite o certain common denominators can be identified.Colors are co have a similar or identical hue (analogous colors), a similar lightness levels (monochromatic colors).On average, people rather than warm color combinations.Both the preference and similarity of hues, although preference depends more on indiv lightness contrast.At the same time, harmonious colors are m

Customi atio n
Dynamic, Real-Time Computation

Background . Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently proving the parsing and interpretation of the content [7].In addition, color is an ceptional tool for attracting attention and thus influencing the actions of the user [8].merous experiments have established that color can also influence user performance d experience by improving visual search efficiency and decreasing cognitive effort [8,9].erefore, it is important to choose the appropriate color for an element and its ckground.For optimal user experience, it is recommended to use low-saturation colors r the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or nctionality, and increase aesthetic value [12].One color is typically used as the dominant lor, while another color is used as an accent.The dominant color is the most frequently ed color in the user interface, and it is based on the visual identity of the company or oduct.It is important to remember that color can affect emotions or moods [13,14], and s symbolic meanings that can impact credibility and the trust of the users [15].On the her hand, the accent color is used to highlight specific elements and draw attention to em.This is typically achieved by using highly contrasting or saturated colors [16].For stance, the accent color is often applied to the call-to-action (CTA) button, which is signed to encourage users to take action.

. Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen lors.While there are no universally attractive single colors, as a preference for colors pends on individuals, context, social influence, etc., research shows that certain colors e commonly less appealing to people [13,[17][18][19][20].Although there is no universal eference for individual colors, some color combinations are naturally more attractive referred color combinations) or work better together as a whole-harmonious colors.In cent years, scientists and researchers have conducted numerous studies on harmonious d preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, rtain common denominators can be identified.Colors are considered harmonious if they ve a similar or identical hue (analogous colors), a similar chroma value, or different htness levels (monochromatic colors).On average, people prefer combinations of cool ther than warm color combinations.Both the preference and harmony increase with the ilarity of hues, although preference depends more on individual color preferences and htness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and methods mentioned in this with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, conse improving the parsing and interpretation of the content [7].In addition, colo exceptional tool for attracting attention and thus influencing the actions of the Numerous experiments have established that color can also influence user perfo and experience by improving visual search efficiency and decreasing cognitive eff Therefore, it is important to choose the appropriate color for an element background.For optimal user experience, it is recommended to use low-saturatio for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal mea functionality, and increase aesthetic value [12].One color is typically used as the do color, while another color is used as an accent.The dominant color is the most fre used color in the user interface, and it is based on the visual identity of the com product.It is important to remember that color can affect emotions or moods [13, has symbolic meanings that can impact credibility and the trust of the users [15] other hand, the accent color is used to highlight specific elements and draw atte them.This is typically achieved by using highly contrasting or saturated colors [ instance, the accent color is often applied to the call-to-action (CTA) button, w designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the colors.While there are no universally attractive single colors, as a preference fo depends on individuals, context, social influence, etc., research shows that certai are commonly less appealing to people [13,[17][18][19][20].Although there is no u preference for individual colors, some color combinations are naturally more a (preferred color combinations) or work better together as a whole-harmonious c recent years, scientists and researchers have conducted numerous studies on harm and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory certain common denominators can be identified.Colors are considered harmoniou have a similar or identical hue (analogous colors), a similar chroma value, or d lightness levels (monochromatic colors).On average, people prefer combinations rather than warm color combinations.Both the preference and harmony increase similarity of hues, although preference depends more on individual color preferen lightness contrast.At the same time, harmonious colors are more similar in hue, Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the models and method with the model presented in this article.

Color and User Experience
Studies have shown that color can contribute to better vis improving the parsing and interpretation of the content [7 exceptional tool for attracting attention and thus influencing Numerous experiments have established that color can also and experience by improving visual search efficiency and decr Therefore, it is important to choose the appropriate colo background.For optimal user experience, it is recommended for the background and high-contrast colors for the foregroun In user interface design, color can be used to group e functionality, and increase aesthetic value [12].One color is typ color, while another color is used as an accent.The dominant used color in the user interface, and it is based on the visual product.It is important to remember that color can affect emo has symbolic meanings that can impact credibility and the tr other hand, the accent color is used to highlight specific elem them.This is typically achieved by using highly contrasting instance, the accent color is often applied to the call-to-act designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface dep colors.While there are no universally attractive single colors depends on individuals, context, social influence, etc., resear are commonly less appealing to people [13,[17][18][19][20]. Altho preference for individual colors, some color combinations a (preferred color combinations) or work better together as a wh recent years, scientists and researchers have conducted nume and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite o certain common denominators can be identified.Colors are co have a similar or identical hue (analogous colors), a similar lightness levels (monochromatic colors).On average, people rather than warm color combinations.Both the preference and similarity of hues, although preference depends more on indiv lightness contrast.At the same time, harmonious colors are m

Color and User Experience
Studies have shown that color can contribute to better visual hierarchy, consequently improving the parsing and interpretation of the content [7].In addition, color is an exceptional tool for attracting attention and thus influencing the actions of the user [8].Numerous experiments have established that color can also influence user performance and experience by improving visual search efficiency and decreasing cognitive effort [8,9].Therefore, it is important to choose the appropriate color for an element and its background.For optimal user experience, it is recommended to use low-saturation colors for the background and high-contrast colors for the foreground [10,11].
In user interface design, color can be used to group elements, signal meaning or functionality, and increase aesthetic value [12].One color is typically used as the dominant color, while another color is used as an accent.The dominant color is the most frequently used color in the user interface, and it is based on the visual identity of the company or product.It is important to remember that color can affect emotions or moods [13,14], and has symbolic meanings that can impact credibility and the trust of the users [15].On the other hand, the accent color is used to highlight specific elements and draw attention to them.This is typically achieved by using highly contrasting or saturated colors [16].For instance, the accent color is often applied to the call-to-action (CTA) button, which is designed to encourage users to take action.

Color Preference and Harmony
The aesthetics and attractiveness of a user interface depend largely on the chosen colors.While there are no universally attractive single colors, as a preference for colors depends on individuals, context, social influence, etc., research shows that certain colors are commonly less appealing to people [13,[17][18][19][20].Although there is no universal preference for individual colors, some color combinations are naturally more attractive (preferred color combinations) or work better together as a whole-harmonious colors.In recent years, scientists and researchers have conducted numerous studies on harmonious and preferred color combinations [13,17,[19][20][21][22][23][24][25][26][27][28][29].Despite often contradictory results, certain common denominators can be identified.Colors are considered harmonious if they have a similar or identical hue (analogous colors), a similar chroma value, or different lightness levels (monochromatic colors).On average, people prefer combinations of cool rather than warm color combinations.Both the preference and harmony increase with the similarity of hues, although preference depends more on individual color preferences and lightness contrast.At the same time, harmonious colors are more similar in hue, tend to be less saturated, and are lighter on average.Based on these findings, several models have been proposed to determine harmonious or preferred color combinations [1,3,4,19,[30][31][32].In practice, however, designers often still associate harmonious colors with their relationships in the color wheel, i.e., in terms of a hue circle, although only monochromatic and analogous colors can be considered harmonious based on the studies.

Extracting Colors from an Image
Several methods for extracting colors from images have been proposed in the past.Based on their working principle, color extraction methods can be divided into five main categories: histogram-based [33,34], cluster-based [35][36][37], segmentation-based [38,39], data-driven [40,41], and hierarchical methods [42,43].Recently, interest in methods that mimic human perception has increased considerably.Such methods have a high practical value as they are generally better accepted by users [40,[44][45][46].

Model Overview
The presented model generates a UI color theme based on the initial colors and user preferences (settings).Although the number of initial colors is not mandatory, we recommend at least three for optimal results.In this study, the initial colors were determined using a model for extracting the most prominent colors from an image [40].We chose this model to ensure that the initial colors match the feature image.Alternatively, the input colors can be set manually or derived using any other method for extracting colors from the image.Input colors only serve as a basis, since the model can adjust or replace them to improve the user experience and achieve better contrast or color harmony.Figure 1 shows an example of the color theme generated by our model.The theme consists of five basic colors: primary color, secondary color, tertiary color, background color, and foreground color.
be less saturated, and are lighter on average.Based on these findings, several models have been proposed to determine harmonious or preferred color combinations [1,3,4,19,[30][31][32].In practice, however, designers often still associate harmonious colors with their relationships in the color wheel, i.e., in terms of a hue circle, although only monochromatic and analogous colors can be considered harmonious based on the studies.

Extracting Colors from an Image
Several methods for extracting colors from images have been proposed in the past.Based on their working principle, color extraction methods can be divided into five main categories: histogram-based [33,34], cluster-based [35][36][37], segmentation-based [38,39], data-driven [40,41], and hierarchical methods [42,43].Recently, interest in methods that mimic human perception has increased considerably.Such methods have a high practical value as they are generally better accepted by users [40,[44][45][46].

Model Overview
The presented model generates a UI color theme based on the initial colors and user preferences (settings).Although the number of initial colors is not mandatory, we recommend at least three for optimal results.In this study, the initial colors were determined using a model for extracting the most prominent colors from an image [40].We chose this model to ensure that the initial colors match the feature image.Alternatively, the input colors can be set manually or derived using any other method for extracting colors from the image.Input colors only serve as a basis, since the model can adjust or replace them to improve the user experience and achieve better contrast or color harmony.Figure 1 shows an example of the color theme generated by our model.The theme consists of five basic colors: primary color, secondary color, tertiary color, background color, and foreground color.The primary color takes up the largest part of the user interface and plays a decisive role in the interpretation and perception of the user interface.It is intended for the backgrounds of sections that need to be highlighted or differentiated from the main content.An example of such a section is the hero area, which occupies the area above the fold-an area of the user interface that is initially visible before scrolling.However, the primary color is unsuitable for interactive elements (e.g., buttons, text fields, links) or essential text, as the contrast is not considered in the calculation.
The main purpose of the secondary color is to attract attention.Therefore, it must have sufficient color strength-a high lightness and/or chroma value to stand out.Additionally, the secondary color helps differentiate elements, indicating various roles or states.Since the secondary color can also be used for interactive elements, it must be in The primary color takes up the largest part of the user interface and plays a decisive role in the interpretation and perception of the user interface.It is intended for the backgrounds of sections that need to be highlighted or differentiated from the main content.An example of such a section is the hero area, which occupies the area above the fold-an area of the user interface that is initially visible before scrolling.However, the primary color is unsuitable for interactive elements (e.g., buttons, text fields, links) or essential text, as the contrast is not considered in the calculation.
The main purpose of the secondary color is to attract attention.Therefore, it must have sufficient color strength-a high lightness and/or chroma value to stand out.Additionally, the secondary color helps differentiate elements, indicating various roles or states.Since the secondary color can also be used for interactive elements, it must be in high contrast with the background.An example of using the secondary color would be the CTA button, which prompts the user to take an action and should stand out from other elements.
Tertiary color is used primarily for interactive elements (buttons, radio buttons, checkboxes, etc.) and elements that require clear color differentiation (section headings, links, etc.).Since these elements are essential for the functionality of the user interface, they must be in high contrast with the background, especially in the lightness dimension, to ensure their visibility.
The combination of foreground and background colors is used for the main content of the user interface, where readability is the primary concern.To ensure readability, appropriate contrast between these two colors should be met.These colors are also used for displaying the content of the elements (text) when the primary, secondary, or tertiary color is used as the element background.
As shown in Figure 1, each of the five basic colors also has a corresponding darker or lighter variant that can be used for various purposes, such as displaying hover states, creating background gradients, or creating realistic shadows.
When generating the color theme, the model also considers the theme of the operating system or application-dark or light mode.In dark mode, the interface adopts a predominantly dark or black background with lighter text and elements.This mode is often favored for its reduced glare in low-light environments and its potential to extend battery life on laptops and mobile devices.In contrast, the light mode features a bright background with dark text, offering a classic look suitable for well-lit surroundings.
Furthermore, the model offers a range of settings that allow users to control the generation of color themes.For example, users can adjust parameters for selecting primary and secondary colors or choose between various modes or presets.In addition, they can enable or disable color harmony adjustments and set desired contrast levels.These settings allow users to create different color themes from the same input colors based on their own preferences.
The input and output colors of the model are defined in the sRGB color space, while the calculations are performed in the CAM02-UCS perceptual uniform color space [47].To convert XYZ color values (these were obtained from RGB values based on sRGB color space) to the color appearance attributes of the CIECAM02 appearance model, on which the CIECAM02-UCS color space is based, we used the parameters recommended by Moroney [48]: L A = 4, reference white = D65, Y b = 20, and a dim environment (c = 0.69, N c = 1, F = 1).
The algorithm used by the model is represented in Figure 2, while its main segments are explained in more detail in the following sections.

Selecting Color Candidates
In the first step, the model determines the suitability of the input colors.First, it selects which input colors are best suited for primary and secondary colors.Then, it checks if any remaining colors can be used for the foreground or background color.If no suitable colors are found for the background or foreground, default colors are used.Algorithm 1 shows the pseudocode of the function for determining the suitability of colors, which is explained in more detail below.

Selecting Color Candidates
In the first step, the model determines the suitability of the input colors.First, it selects which input colors are best suited for primary and secondary colors.Then, it checks if any remaining colors can be used for the foreground or background color.If no suitable colors are found for the background or foreground, default colors are used.Algorithm 1

Selecting Primary and Secondary Color
Let C = {c i } n i=1 be the set of initial colors based on which we want to create a color theme for a user interface.To determine the primary and secondary colors, first, a set of all pairs of the given colors is created: {(c 1 , c 2 ), (c 2 , c 3 ), (c 3 , c 4 ) . ..}.A score is then calculated for each pair, with the first color being a candidate for the primary color and the second being a candidate for the secondary color.The pair of colors that receives the highest score is considered the best fit for the primary and secondary colors.The score is calculated as follows: where c 1 is a candidate for the primary color and c 2 for the secondary color.f p and f s are scoring functions defined as: where COV is the coverage of a color in the image, C is the color chroma value in CAM02-UCS color space, S is the strength of a color calculated as C × J (J is the lightness of a color in CAM02-UCS), D is the contrast or absolute difference between lightness of a color (J) and lightness of the surround (J b ), A is the analogy or color similarity in lightness component with the surround (J b ), and ∆E is the Euclidian distance in CAM02-UCS.All values are relative, normalized between 0 and 1.
For the lightness of the surround, a minimum lightness value of the sRGB color gamut inside CAM02-UCS color space is used when the dark mode is set, and a maximum value when the light mode is set.The coverage of color in the image was determined by calculating the soft recoloring error.A detailed explanation of this metric can be found in our earlier work [40].
As you can see, the coverage of color in the image, chroma, strength, and contrast was considered in calculating scores for both the primary and secondary colors.However, when calculating the score for primary color (f p ) the model also considered analogy to prevent contrast color from being selected, since primary color can be used for the background of large areas.This is especially important when using a dark mode since bright backgrounds can be unpleasant for the user.In addition, the model takes into account the color difference between primary and secondary colors when calculating the score for the secondary color (f s ), since the latter is mainly used for differentiating the elements and attracting attention of the users, and therefore there needs to be adequate differences.
The effect of each property can be modified by adjusting the weighting factors (w 1 , w 2 , w 3 . . .w 10 ) on both functions.This means that the same property can play a different role in calculating the primary and secondary colors.Moreover, changing the weighting factors enables us to generate various color themes based on the same initial colors.
By testing different values of the weighting factors and visually evaluating the results, we defined two configurations or modes for selecting colors: authentic and colorful.The colorful mode favors colorfulness (chroma) when selecting the primary color, while the authentic mode emphasizes image coverage with color.Figure 3 shows an example of the color themes obtained with different color selection modes.The weighting factors of the two modes are listed in Table 2.By testing different values of the weighting factors and visually evaluating the results, we defined two configurations or modes for selecting colors: authentic and colorful.The colorful mode favors colorfulness (chroma) when selecting the primary color, while the authentic mode emphasizes image coverage with color.Figure 3 shows an example of the color themes obtained with different color selection modes.The weighting factors of the two modes are listed in Table 2.

Selecting Foreground and Background Colors
To determine the foreground and background colors, the model first selects the lightest (c l ) and the darkest color (c d ) from the remaining colors.Then, it checks whether the selected colors have appropriate lightness and chroma values based on the specified thresholds t c (max.chroma), t l (max.lightness), and t d (min.lightness).The default thresholds are t c = 20, t l = 90, and t d = 20, however the user can adjust these as needed.If the selected colors do not meet the specified conditions, the model uses default colors instead: c l = hex(#FFF) and c d = hex(#000).The color values of the default colors can also be set in the model's settings.
When the light mode is selected, the color c d is chosen for the foreground color and the color c l for the background color.In light mode, these roles are reversed so that the color c l is used for the foreground color and the color c d for the background color.

Selecting Tertiary Color
The model first checks if all colors have already been used.If not, the model selects the color with the highest chroma value from the remaining colors and calculates the contrast with the background color.If the contrast is higher than the contrast between the primary color and the background color, and the selected color has a higher chroma value than the primary color, the selected color is used as the tertiary color.Otherwise, the primary color is used as the tertiary color.The primary color is also used if all suggested colors have already been used.If the color harmony mode is set, the tertiary color is determined as described in the following chapter.

Color Harmony
The model can also consider color harmony when creating a UI color theme.Users can choose between a monochromatic and analogous color theme or turn off color harmony adjustment.
Monochromatic colors have the same hue, however, they can vary in chroma and lightness.To determine a monochromatic color theme within the CAM02-UCS color space, first, three colors are created that share the same hue and chroma as the previously defined primary color.These colors are evenly distributed between the predefined light color (c l ) and dark color (c d ).If colors are outside the sRGB color gamut, linear interpolation is used to map them along the chroma path to the boundary of the color gamut (with lightness  Analogous colors have similar hues, lying next to each other in hue dimension.When creating an analogous color theme, the primary color remains unchanged and is the starting point for calculating the secondary and tertiary colors.By default, the tertiary color is the same as the primary color, however, its lightness is adjusted in case of insufficient contrast with the background.The secondary color is determined as a color with the same lightness and chroma as the previously defined tertiary color, but with its hue shifted by 30 degrees in a clockwise direction (Algorithm 4).If the newly determined secondary color is outside of the sRGB color gamut, linear interpolation is used to map it along the chroma path to the boundary of the color gamut.
If the chroma of the primary color is less than specified chroma threshold (t c ), the model, instead of analogous colors, computes monochromatic colors as described previously, ignoring the setting of the user.

Adjusting Colors for Better Contrast and Differentiation
As shown in Figure 2, the model includes adjusting the lightness values at several points to achieve sufficient contrast between a specific color and its background.To increase the contrast, the model first tries to modify the lightness of the background colorincreasing it in a light mode and decreasing it in a dark mode-until the desired contrast is achieved or the background color reaches the boundary of the sRGB color gamut (Algorithm 5).If adjusting the lightness of the background color does not lead to the desired contrast, the lightness of the specified color is gradually adjusted.If changing a color's lightness places them outside the sRGB color gamut, they are mapped to the boundary of the color space along the chroma path.
To calculate the contrast, we have used an equation outlined by the World Wide Web Consortium (W3C) within the Web Content Accessibility Guidelines (WCAG) 2.1 [49]: where  and  are relative lightness values calculated as: Values  ,  ,  are calculated as:

Adjusting Colors for Better Contrast and Differentiation
As shown in Figure 2, the model includes adjusting the lightness values at several points to achieve sufficient contrast between a specific color and its background.To increase the contrast, the model first tries to modify the lightness of the background color-increasing it in a light mode and decreasing it in a dark mode-until the desired contrast is achieved or the background color reaches the boundary of the sRGB color gamut (Algorithm 5).If adjusting the lightness of the background color does not lead to the desired contrast, the lightness of the specified color is gradually adjusted.If changing a color's lightness places them outside the sRGB color gamut, they are mapped to the boundary of the color space along the chroma path.
To calculate the contrast, we have used an equation outlined by the World Wide Web Consortium (W3C) within the Web Content Accessibility Guidelines (WCAG) 2.1 [49]: where L 1 and L 2 are relative lightness values calculated as: Values R ′ , G ′ , B ′ are calculated as: 2.4  otherwise G ′ = G /12.92 G ≤ 0.03928 ((G + 0.055)/1.055) 2.4  otherwise R ′ = B /12.92 B ≤ 0.03928 ((B + 0.055)/1.055) 2.4  otherwise where R, G, B are color values in the sRGB color space, normalized between 0 and 1.
The user can choose between two contrast levels defined by the WCAG (AA, AAA) or turn off contrast adjustments.For the more stringent AAA level, the contrast between the specified color and the background must be at least 7:1, while the AA level requires a contrast of 4.5:1.

Integrating the Model into a Web-Based Application
To evaluate the performance of the model, we integrated it into a web application.The application uses the model for automatic and real-time adjustments of the UI colors based on the feature image.Our goal was to showcase the practical usage of the model.All the code is openly available on a Github public repository [50].

Concept and Design
The web application, called "Records", is used for browsing and purchasing music albums.Since the web application is primarily intended for demonstrating and testing the model, it contains limited data and certain functionalities still need to be implemented (e.g., listening to audio tracks and making purchases).
Figure 6 illustrates the landing page and subpages of the web application.Our model determines the UI colors in real-time on the subpages (while the user is browsing through the album) based on the featured image of the current album.

Data and Image Collection
We have obtained data and images for 67 records from the web.The images are shown in Figure 7.Our aim was to select images that are highly diverse in terms of the span and distribution of colors (in both chroma and lightness dimensions), as well as the number of color categories.For images without an attached ICC profile, we assumed they were in the sRGB color space.

Model Implementation
The model was implemented entirely in JavaScript, which makes it more flexible in web application development.The model can be used either on the client side (client-side rendering), as in our case, or on the server side (server-side rendering) inside the Node.jsenvironment.
On the subpages where colors were dynamically determined, we have included a The model input colors were extracted from the images using a model for extracting the most prominent colors [40].Since the model was developed in a Matlab/Python environment and cannot be directly utilized within the web application, the colors were pre-extracted for each image.These color values were stored in a JSON file and imported into the web application.For each image, we have extracted ten prominent colors.

Model Implementation
The model was implemented entirely in JavaScript, which makes it more flexible in web application development.The model can be used either on the client side (client-side rendering), as in our case, or on the server side (server-side rendering) inside the Node.jsenvironment.
On the subpages where colors were dynamically determined, we have included a button that opens the modal window with all available settings (see Figure 8).The following settings are available:

•
Dark mode: users can manually select their preferred mode.By default, the model uses a mode set by the operating system;

Model Implementation
The model was implemented entirely in JavaScript, which makes it more flexible in web application development.The model can be used either on the client side (client-side rendering), as in our case, or on the server side (server-side rendering) inside the Node.jsenvironment.
On the subpages where colors were dynamically determined, we have included a button that opens the modal window with all available settings (see Figure 8).The following settings are available:

Model Evaluation
We took screenshots of the application using different settings to evaluate the model.The screenshots were then included in an online survey asking participants to rate the aesthetics and usability of colors.
Screenshots of three randomly selected albums and eight different settings were included in the survey.Screenshots are presented in Figure 9, while the settings are listed in Table 3.As can be seen, all settings use the same contrast level, while different options for dark mode, color selection, and color harmony were applied.The survey was conducted using a custom website that guided participants through the entire process and collected data in a database.

Results and Discussion
We statistically analyzed the data collected from the online survey to assess whether responses differed significantly, and to identify potential performance variations among settings.We used Pearson's Chi-square goodness-of-fit test to determine whether the differences between responses were statistically significant and the Chi-square test of independence to determine if responses statistically differ between different settings.In addition, we used binary logistic regression to determine the effect of each setting on usability and aesthetics of colors.
Figure 10 presents the percentage of affirmative responses for each question, while Figure 11 shows affirmative responses analyzed by individual setting.

Survey
Participants rated the color themes from an aesthetic and usability perspective.For each screenshot, they had to answer the following questions with "yes" or "no": The survey was conducted using a custom website that guided participants through the entire process and collected data in a database.

Results and Discussion
We statistically analyzed the data collected from the online survey to assess whether responses differed significantly, and to identify potential performance variations among settings.We used Pearson's Chi-square goodness-of-fit test to determine whether the differences between responses were statistically significant and the Chi-square test of independence to determine if responses statistically differ between different settings.In addition, we used binary logistic regression to determine the effect of each setting on usability and aesthetics of colors.
Figure 10 presents the percentage of affirmative responses for each question, while Figure 11 shows affirmative responses analyzed by individual setting.

Compatibility with the Featured Image
In Question 1, participants were asked whether the color theme matched the featured image.The results revealed that more than 84% of the participants answered "yes" (χ 2 (1) = 275.7;p < 0.01), indicating that color themes generated by our model were consistent with the featured images.
The highest percentage of affirmative responses was observed when using Settings 3 (93.2%),while the lowest was recorded for Settings 8 (76.3%).Comparing the percentage of positive responses when different options for color harmony were used, reveals that the highest percentages were achieved when color harmony was turned off (87.8%), followed by the monochromatic (84.7%), and the analogous harmony option (76.4%).The differences are statistically significant (χ 2 (2) = 9.63; p = 0.008), suggesting that adjustments of colors for color harmony could impact their compatibility with a featured image.The results are in line with our expectations.When an adjustment for color harmony is set, the model could use colors other than those initially provided to establish color harmony.However, these colors may not be in the image, which results in lower compatibility.
A slightly lower percentage of affirmative responses was observed when using different options for dark mode and color selection.Although these differences are insignificant according to the Chi-square test of independence (χ 2 (1) = 3.86; p = 0.056, χ 2 (1) = 0.21; p = 0.88), the binary logistic regression confirmed the negative influence of the dark mode.

Compatibility with the Featured Image
In Question 1, participants were asked whether the color theme matched the featured image.The results revealed that more than 84% of the participants answered "yes" (χ 2 (1) = 275.7;p < 0.01), indicating that color themes generated by our model were consistent with the featured images.
The highest percentage of affirmative responses was observed when using Settings 3 (93.2%),while the lowest was recorded for Settings 8 (76.3%).Comparing the percentage of positive responses when different options for color harmony were used, reveals that the highest percentages were achieved when color harmony was turned off (87.8%), followed by the monochromatic (84.7%), and the analogous harmony option (76.4%).The differences are statistically significant (χ 2 (2) = 9.63; p = 0.008), suggesting that adjustments of colors for color harmony could impact their compatibility with a featured image.The results are in line with our expectations.When an adjustment for color harmony is set, the According to the coefficients obtained from the logistic model, it is 1.5 times more likely that the colors will not be consistent with the image when dark mode is used (p = 0.045) and up to 3 times more likely (p < 0.01) when the analogous option is set for color harmony adjustment-compared to the option when color harmony is turned off (χ 2 (4) = 15.91;p = 0.003, Nagelkerke R 2 = 0.05).

Color Theme Preference
Question 2 inquired whether participants preferred the color theme.The high percentage of positive responses (72.80%) indicates that users, in general, prefer color themes that are generated by our model (χ 2 (1) = 123.14;p < 0.01).Among all the settings, the highest percentage of positive responses was recorded for Settings 1 (87.1%), while the lowest was observed for Settings 8 (60.5%).
The results of binary logistic regression analysis revealed that two individual settings, i.e., color harmony and dark mode, had a statistically significant impact (χ 2 (4) = 22.18; p < 0.01, Nagelkerke R 2 = 0.05).When color harmony was disabled, 78.6% of responses were positive.However, only 70.7% were positive with the monochromatic option and 63.5% with the analogous option.Observed differences are statistically significant (χ 2 (2) = 11.73;p < 0.01).The impact of color harmony is further confirmed by the coefficients of the logistic regression, indicating that adjustment for color harmony reduces the likelihood of generating preferred color themes by 1.8 times with the monochromatic option (p = 0.03), and 2.5 times with the analogous option (p < 0.01).
As outlined in the previous section, when color harmony adjustment is disabled, all colors are derived from the image (if necessary, the model only adjusts the lightness of the colors to achieve sufficient contrast or differentiation).Therefore, it can be assumed that the preference for the color theme is influenced by how well the color theme matches the image.In order to test this assumption, we conducted a comparison of the responses received for Question 1 and Question 2. We observed that among the participants who agreed that the color theme was compatible with the image, 94.7% also expressed their preference for the color theme.Similarly, among those who assessed that the colors did not match the image, 75.5% also did not like the colors.The correlation between the compatibility with the image and preference for the color theme is statistically significant (χ 2 (1) = 131.85;p < 0.01) and moderate (φ = 0.47, Cohen's V = 0.47; p < 0.01).

Color Harmony
Out of all the participants, 81.08% confirmed that the colors were in harmony (χ 2 (1) = 228.757;p < 0.01).The best result was achieved with Settings 3, where 98.6% of participants confirmed the harmony of colors, while the lowest percentage of affirmations was observed with Settings 8 (65.5%).Analysis of responses suggests that perceived color harmony is influenced by color harmony and dark mode settings but not color selection mode.
The results show that monochromatic color themes received the highest proportion of affirmative responses (88.0%) compared to the other color harmony options.When color harmony was turned off, the proportion slightly decreased to 83.3%.On the other hand, analogous color themes received the lowest proportion of affirmative responses (69.6%).These differences are statistically significant (χ 2 (2) = 18.383; p < 0.01) and confirmed by logistic regression (χ 2 (4) = 48.73;p < 0.01, Nagelkerke R 2 = 0.13).According to coefficients, it is 2.6 times more likely that the analogous color theme will not be harmonious-compared to the themes where color harmony adjustment was turned off (p < 0.01).Therefore, when using analogous color themes, the chances of achieving color harmony are lower than when color harmony adjustment is turned off.This finding implies that, rather surprisingly, the compatibility with the image is more important than the relationships of colors in establishing color harmony.While using monochromatic colors gives the highest probability of achieving color harmony, the most crucial factor is using colors compatible with the image.This indicates that color harmony also depends on the context, confirming the findings in previous studies [51].
It is surprising to note that the percentage of positive responses is higher for the light mode (89.9%) than for the dark mode (72.7%).The difference between the two modes is statistically significant (χ 2 (1) = 28.633;p < 0.01) and has been confirmed through logistic regression analysis.Based on the obtained coefficients, it appears that colors are perceived 3.5 times less harmoniously in the dark mode than in the light mode.These findings align with previous studies, which found that harmonious color combinations tend to be lighter on average [23,24].In response to Question 4, participants answered affirmatively in 77% of all cases (χ 2 (1) = 172.97;p < 0.01), indicating that colors used for interactive elements such as buttons are sufficient in contrast.The highest and lowest affirmative responses were achieved with Settings 1 (92.9%) and Settings 4 (61.1%),respectively.
Analysis of responses while different settings were used revealed that the visibility of buttons did not statistically differ between light and dark mode (χ 2 (1) = 2.54; p = 0.11), neither with different selection modes (χ 2 (1) = 2.29; p = 0.13).In contrast, using different color harmony options led to statistically significant differences (χ 2 (2) = 20.731;p < 0.01).The highest percentage of affirmative responses was observed when color harmony was turned off (84.4%).When color harmony adjustment was turned on, affirmative responses were lower; 74% for monochromatic and 65.5% for analogous options.The impact of the color harmony option was also confirmed by binary logistic regression (χ 2 (4) = 24.76;p < 0.01; Nagelkerke R 2 = 0.06).According to the logistic model coefficients, it is 2.3 times more likely that buttons will not be sufficiently visible when the monochromatic option is used and 3.5 times more likely when the analogous option is set.
It is surprising to note the effect of the color harmony setting on the visibility of buttons.When the analogous option is used, most buttons use the same tertiary color as when color harmony is turned off.The only difference is in the secondary color used for CTA buttons.Based on this, it can be inferred that due to the lower visibility of CTA buttons, some participants perceived the visibility of all buttons as insufficient.While button visibility could be improved by using more contrasting colors, doing so would likely compromise compatibility with the image.

CTA Button
Regarding Question 5, the results showed that 62.84% of participants answered positively (χ 2 (1) = 39.03;p < 0.01), indicating that our model effectively chooses suitable color for the CTA button.Among all the settings, Settings 2 had the highest affirmative response rate (88.9%), while Settings 8 had the lowest rate (32.9%).
Analysis of observed and expected frequencies using different settings indicates that all settings significantly influence the saliency of CTA button.However, the logistic regression analysis confirmed only the influence of dark/light mode and color harmony adjustment (χ 2 (4) = 116.56,p < 0.01, Nagelkerke R 2 = 0.25).
There were 69.8% affirmative responses in the light mode, while in the dark mode, only 56.3% (χ 2 (1) = 11.61;p = 0.01).Based on the logistic regression coefficients, there seems to be a 2-fold higher chance of the CTA button being less visible when the dark display mode is in use (p < 0.01).Nevertheless, the reason for this phenomenon remains unexplained.
When color harmony adjustment was turned off, the percentage of affirmative responses increased to 81.0%.However, when the color harmony adjustment was turned on, the percentage of affirmative responses decreased significantly-56.7% with the monochromatic option and 33.1% with the analogous option.These differences are statistically significant (χ 2 (2) = 99.77;p < 0.01).The logistic regression analysis has confirmed that the color harmony setting significantly affects the saliency of the CTA button.It is estimated that enabling color harmony adjustment reduces the CTA button saliency by 3.7 times in the case of the monochromatic option (p < 0.01) and by an impressive 10 times with the analogous option (p < 0.01).This is to be expected, as the selection of the secondary color (color used for the CTA button) is limited to a specific hue, and its chroma is based on the primary color.On the other hand, when the color harmony adjustment is disabled, the model usually picks the most chromatic color in the image for the secondary color.
The percentage of affirmative responses was 79.6% when using the authentic option for color selection, compared to only 57.6% when using the colorful option (χ 2 (1) = 22.41; p < 0.01).This difference is not surprising, as the colorful mode favors chromatic colors in both primary and secondary color selection, while the authentic mode primarily considers chromaticity in the selection of the secondary color and, to a lesser extent, in the selection of the primary color.

Effect on Legibility
In response to Question 6, participants responded negatively in 86.15% of cases (χ 2 (1) = 309.43;p < 0.01).The highest percentage of negative responses was with Setting 3 (90.5%),while the lowest was with Setting 5 (75.0%).There were no statistically significant differences between the observed and expected frequencies using different settings, as confirmed by the Chi-square test of independence and logistic regression.It is important to note that the contrast level was set to AA in all cases, ensuring adequate contrast between the text and its background.

Conclusions and Further Research
In this article, we have presented a model for generating UI color themes.First, the model enables the automatic generation of the UI color theme based on a given image.For example, if an editor or author changes the central image of a website (e.g., the logo or featured image), the model automatically determines a new color theme and thus changes the colors of all elements on the website.Secondly, the model enables the dynamic adjustment of the colors of the user interface based on the active featured image-the image displayed next to the elements.This feature proves particularly useful for websites where images play a central role and change dynamically, such as image galleries, product presentations, portfolios, etc.In such cases, the website no longer relies on a static/constant color theme, but the colors of the elements are dynamic and adapt to the current active image.
According to the results of the survey, our model generates colors that are (1) consistent with the image, (2) preferred by users, (3) harmonious, and (4) user-friendly (visible, discriminable, and high-contrast).An important finding is that color harmony can be achieved solely by using the prominent colors of the image without using color harmony adjustment, which implies that perceived color harmony is also context-dependent.
The survey results have also shown that the settings influence the model's performance.For optimal performance, we recommend the following settings: light mode, authentic color selection, adjustment for color harmony turned off, and moderate contrast enhancement (AA).
While the survey results indicate relatively high performance, additional research is necessary before its implementation in a production environment.Therefore, our next step is to repeat the survey using the aforementioned optimal settings with more images, including brand logos and images of physical products.It would also be interesting to gather users' opinions on other aspects of their experience, e.g., their emotions.Moreover, it is crucial to test the model's performance with users who have partial or complete color blindness to ensure its wider usage.If necessary, adjustments should be made to make the model accessible to everyone.Additionally, the impact of various contrast enhancement levels needs to be determined, which was not covered in our research due to resource constraints.
The model we have developed has great practical value, especially when it comes to content management systems (CMS).These systems allow users to customize their websites through a simple interface.The model is even more valuable when used with modern block editors and website builders that allow users to add, combine, and customize individual blocks or components.In the near future, we plan to implement the model in one of the popular open-source CMSs.We would also like to develop a standalone tool/application to help UI designers and developers select color themes.

Figure 1 .
Figure 1.The UI color theme consists of five basic colors and is generated based on initial colors and user settings.

Figure 1 .
Figure 1.The UI color theme consists of five basic colors and is generated based on initial colors and user settings.

Algorithm 1 . 27 Figure 2 .
Figure 2. The main algorithm for determining the color theme of a user interface.

Figure 2 .
Figure 2. The main algorithm for determining the color theme of a user interface.

Figure 3 .
Figure 3. Color themes created with different color selection modes: authentic (left) and colorful (right).

Figure 4 .
Figure 4. Monochromatic color theme in light and dark modes.Figure 4. Monochromatic color theme in light and dark modes.

Figure 4 .
Figure 4. Monochromatic color theme in light and dark modes.Figure 4. Monochromatic color theme in light and dark modes.

Algorithm 4 .
Computing analogous colorsfunction ANALOGOUSCOLORS(c t ) c s ← new color c s .J ← c t .J c s .C ← c t .C c s .h← (c t .h+ 30) mod 360 c s ← colorMapping(c s ) return c s end functionA comparison of color themes with different color harmony settings is illustrated in Figure5. .ℎ ← ( .ℎ + 30)  360  ← ( ) return  end function A comparison of color themes with different color harmony settings is illustrated in Figure 5.

27 Figure 6 .
Figure 6.Homepage and subpages of the web application.The colors are automatically determined on subpages based on the featured image.

Figure 6 .
Figure 6.Homepage and subpages of the web application.The colors are automatically determined on subpages based on the featured image.

Figure 7 .
Figure 7. Images of 67 records that were included in the application.

Figure 7 .
Figure 7. Images of 67 records that were included in the application.

Figure 7 .
Figure 7. Images of 67 records that were included in the application.

Figure 8 .
Figure 8.The modal window with the settings in light (left) and dark mode (right).Figure 8.The modal window with the settings in light (left) and dark mode (right).

Figure 8 .
Figure 8.The modal window with the settings in light (left) and dark mode (right).Figure 8.The modal window with the settings in light (left) and dark mode (right).

Figure 10 .
Figure 10.Percentages of affirmative responses for each question.

Figure 10 .
Figure 10.Percentages of affirmative responses for each question.

Figure 11 .
Figure 11.Percentages of affirmative responses for different settings.

Figure 11 .
Figure 11.Percentages of affirmative responses for different settings.

Funding:
The authors acknowledge the financial support from the Slovenian Research Agency (research core funding No. P2-0450).

Table 1 .
Features comparison table: feature is not supported

Table 1 .
Features comparison table: feature is not supported , feature is su only partially supported .

Table 1 .
Features comparison table: feature is not supported , feat only partially supported .

Table 1 .
Features comparison table: feature is not supported , feature is supported , featu only partially supported .

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1 .
Features comparison table: feature is not supported , feature is supported , f only partially supported .

Table 1 .
Features comparison table: feature is not supported , fea only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this sect with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , featu only partially supported .

Table 1 .
Appl.Sci.2024,14,xFOR PEER REVIEW Table 1 compares the features of the models and methods m with the model presented in this article.Features comparison table: feature is not supported , feature only partially supported .

Table 1 .
Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the mod with the model presented in this article.Features comparison table: feature is not s only partially supported .

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1 .
Features comparison table: feature is not supported , feature only partially supported .

Table 1 .
Appl.Sci.2024, 14, x FOR PEER REVIEW Table 1 compares the features of the mod with the model presented in this article.Features comparison table: feature is not s only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1 .
Features comparison table: feature is not supported , feature is supported , f only partially supported .

Table 1
compares the features of the mod with the model presented in this article.

Table 1 .
Features comparison table: feature is not s only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , f only partially supported .

Table 1 .
Features comparison table: feature is not supported , fea only partially supported .

Table 1
compares the features of the models and methods mentioned in this section th the model presented in this article.Features comparison table: feature is not supported , feature is supported , feature is ly partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1 .
Appl.Sci.2024,14,xFOR PEER REVIEW Table 1 compares the features of the models and methods ment with the model presented in this article.Features comparison table: feature is not supported , feature is su only partially supported .

Table 1 .
Features comparison table: feature is not supported , feature is supported , f only partially supported .

Table 1 .
Features comparison table: feature is not supported , fea only partially supported .

Table 1
compares the features of the models and methods mentioned in this section th the model presented in this article.Features comparison table: feature is not supported , feature is supported , feature is ly partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1
compares the features of the models and methods mentioned in this section with the model presented in this article.

Table 1 .
Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

Table 1 .
Features comparison table: feature is not supported , feature is supported , f only partially supported .

Table 1 .
Features comparison table: feature is not supported , fea only partially supported .

Table 2 .
Weighting factors of two modes for selecting colors.

•
Question 1: Does the color theme match the featured image?• Question 2: Do you prefer a color theme?• Question 3: Are the user interface colors harmonious?• Question 4: Are the colors of the buttons and other interactive elements clearly visible?• Question 5: Does the "Add to Cart" button stand out more than other buttons?• Question 6: Do any colors make the text difficult to read?
Does the "Add to Cart" button stand out more than other buttons?• Question 6: Do any colors make the text difficult to read?