Automated Image-Based User Interface Color Theme Generation

Abstract

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.

1. 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.

2. 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. Features comparison table: feature is not supported , feature is supported , feature is only partially supported .

	Usability Contrast, Diversity, Prominence	Image-Based	Color Harmony or Preference	Customization	Dynamic, Real-Time Computation
Gramazio et al. [1]
Gijsenij et al. [2]
O’Donovan et al. [3]
Kitta et al. [4]
Yuan et al. [5]
Gu et al. [6]
Presented model

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

3. Background

3.1. 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.

3.2. 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.

3.3. 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].

4. Model Framework and Architecture

4.1. 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 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.

4.2. 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.

Algorithm 1. Selecting colors based on their suitability
function selectColors$(C)$
	$P \leftarrow getPermutation\left(C\right)$			⊲ set of all pairs: [[c1, c2], [c2, c3] ... n]
	$maxScore \leftarrow 0$
	for all p ∈ P do
		$score \leftarrow getscore\left(p\left[1\right], p\left[2\right]\right)$
		if score > maxScore then
			$c_p \leftarrow p\left[1\right]$
			$c_s \leftarrow p\left[2\right]$
		end if
	end for
	$c_d \leftarrow null$
	$c_l \leftarrow null$
	for all $c\in C | c\notin \left\{c_p,c_s\right\}$do
		if $c_d=null \vee c.J<c_d.J$ then $c_d\leftarrow c$
		end if
		if $c_l=null \vee c.J>c_l.J$then $c_l\leftarrow c$
		end if
	end for
	if  $c_l.C \ge t_c \vee c_l.J \le t_l$ then
		$c_l\leftarrow defaultLight$
	end if
	if $c_d.C \ge t_c \vee c_d.J \le t_d$ then
		$c_d\leftarrow defaultDark$
	end if
	return  $c_p, c_s,c_l, c_d$
end function

4.2.1. Selecting Primary and Secondary Color

Let $C={\left\{c_i\right\}}_{i=1}^n$ 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: $\left\{\left(c_1,c_2\right), \left(c_2,c_3\right), \left(c_3,c_4\right) \dots \right\}$. 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:

$$score\left(c_1,c_2\right)={\mathrm{f}}_p\left(c_1\right)+{\mathrm{f}}_s\left(c_1,c_2\right)$$

(1)

where $c_1$ is a candidate for the primary color and $c_2$ for the secondary color. ${\mathrm{f}}_p$ and ${\mathrm{f}}_s$ are scoring functions defined as:

$${\mathrm{f}}_p\left(c_1\right)=COV\left({\mathrm{c}}_1\right)\times w_1+\mathrm{C}\left(c_1\right)\times w_2+\mathrm{S}\left(c_1\right)\times w_3+\mathrm{D}\left(c_1\right)\times w_4+\mathrm{A}\left(c_1\right)\times w_5$$

(2)

$${\mathrm{f}}_s\left(c_1,c_2\right)=COV\left({\mathrm{c}}_2\right)\times w_6+\mathrm{C}\left(c_2\right)\times w_7+\mathrm{S}\left(c_2\right)\times w_8+\mathrm{D}\left(c_2\right)\times w_9+\mathsf{\Delta }\mathrm{E}\left(c_1,c_2\right)\times w_{10}$$

(3)

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\times 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 $\mathsf{\Delta }\mathrm{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 (${\mathrm{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 (${\mathrm{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 \dots 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. Weighting factors of two modes for selecting colors.

	w1	w2	w3	w4	w5	w6	w7	w8	w9	w10
authentic (light mode)	1	0.25	0	0	0.25	0	1	1	0.5	0.25
authentic (dark mode)	1	0.25	0	0	3	0	1	0	0.25	0.25
colorful (light mode)	0.75	1	0	0.5	0	0	3	0	1	0.5
colorful (light mode)	0.5	0.75	0	0	3	0.5	1	0	0	0.25

.

4.2.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\left(\#FFF\right)$ and $c_d=hex\left(\#000\right)$. 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.

4.2.3. 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.

4.3. 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 and hue remaining unchanged)—Algorithm 2. As can be seen from Figure 4, among the newly created colors, the color with intermediate lightness is used for the tertiary color, and the most contrasting color is used for the secondary color—in light mode, the darkest color, and in dark mode, the lightest. For the primary color, the most similar color (a lower color difference) to the initial primary color is chosen. However, if the dark mode is set, the darkest color is selected for the primary color to avoid glare. Algorithm 3 shows the pseudocode for determining a monochromatic color theme.

Algorithm 2. Mapping color on the chroma path
function colorMapping(c)
	if insideGamut(c) then
		return c
	end if
	$start\leftarrow 0$
	$end\leftarrow c.C$
	$i\leftarrow 0.01$
	while $end-start>i$ do
		$c.C \leftarrow start+\left(end-start\right)\times 0.5$
		if insideGamut(c) then
			$start \leftarrow c.C$
		else
			$end \leftarrow c.C$
		end if
	end while
	return  $c$
end function

Algorithm 3. Computing monochromatic colors
function monochromaticColors$(c_p,c_l,c_d)$
	$r\leftarrow \left(c_l.J-c_d.J\right)∕4$
	for $(i\leftarrow 0;i<3;i\leftarrow i+1)$ do
		$c\leftarrow new color$
		$c.J\leftarrow c_d.J+\left(i+1\right)\times r$
		$c.C\leftarrow c_p.C$
		$c.h\leftarrow c_p.h$
		$C_m\left[i\right]\leftarrow colorMapping\left(c\right)$
	end for
	$c_t\leftarrow C_m\left[1\right]$
	if darkmode then
		$c_s\leftarrow C_m\left[2\right]$
		$c_p\leftarrow C_m\left[0\right]$
	else
		$c_s\leftarrow C_m\left[0\right]$
		$c_i\leftarrow c_p$
		$d\leftarrow \mathrm{null}$
		for all $c\in C_m$ do
			if $d=\mathrm{null} \vee \mathsf{\Delta }E\left(c_i,c\right)<d$ then
			end if
		end for
	end if
	return $c_p, c_s, c_t$
end function

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.

Algorithm 4. Computing analogous colors
function analogousColors($c_t$)
	$c_s\leftarrow new color$
	$c_s.J\leftarrow c_t.J$
	$c_s.C\leftarrow c_t.C$
	$c_s.h\leftarrow (c_t.h+30) mod 360$
	$c_s\leftarrow colorMapping\left(c_s\right)$
	return $c_s$
end function

A comparison of color themes with different color harmony settings is illustrated in Figure 5.

4.4. 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]:

$$C=\frac{L_1+0.05}{L_2+0.05}$$

(4)

where $L_1$ and $L_2$ are relative lightness values calculated as:

$$L=0.2126\times R^{\prime }+0.7152\times G^{\prime }+0.0722\times B^{\prime }$$

(5)

Values $R^{\prime }$, $G^{\prime }$, $B^{\prime }$ are calculated as:

$$\begin{gathered} R^{\prime }=\left\{\begin{array}{cc}R/12.92& R\le 0.03928\\ {\left(\left(R+0.055\right)/1.055\right)}^{2.4}& otherwise\end{array}\right\} \\ {G}^{\prime }=\left\{\begin{array}{cc}G/12.92& G\le 0.03928\\ {\left(\left(G+0.055\right)/1.055\right)}^{2.4}& otherwise\end{array}\right\} \\ {R}^{\prime }=\left\{\begin{array}{cc}B/12.92& B\le 0.03928\\ {\left(\left(B+0.055\right)/1.055\right)}^{2.4}& otherwise\end{array}\right\} \end{gathered}$$

(6)

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.

Algorithm 5. Contrast enhancement
function increaseContrast$\left(c, bg, target\right)$
	$d\leftarrow contrast\left(c.J, bg.J\right)$
	$gamut\leftarrow true$
	while $d\le target$do
		$J_1\leftarrow c.J$
		$J_2\leftarrow bg.J$
		if gamut then
			if $J_2\ge J_1$ then
				$J_2\leftarrow J_2+1$
			else
				$J_2\leftarrow J_2-1$
			end if
			if  $J_2<0 \vee J_2>100$ then
				$gamut\leftarrow \mathrm{false}$
			else
				$bg.J\leftarrow J_2$
				$bg\leftarrow colorMapping\left(bg\right)$
			end if
		else
			if $J_1\ge J_2$ then
				$J_1\leftarrow J_1+1$
			else
				$J_1\leftarrow J_1-1$
			end if
			$c.J\leftarrow J_1$
			$c\leftarrow colorMapping\left(c\right)$
		end if
		$d\leftarrow contrast\left(c.J,bg.J\right)$
	end while
	return $c, bg$
end function

Since the secondary color is also used to differentiate interactive elements, it must be sufficiently different from the tertiary color. Therefore, the model utilizes a function to increase the difference between these two colors. As can be seen from Algorithm 6, the model initially attempts to increase the difference between the colors by gradually modifying the lightness of the most contrasting color according to the preferred mode. If this does not achieve the desired difference, it progressively adjusts the lightness of the less contrasting color. By default, the color difference between these colors should be at least 5 units, nevertheless, the user can modify this value in the model settings. If changing the brightness of color causes it to be outside of the sRGB color gamut, it is mapped to the boundary by reducing its chromaticity—moved along the chroma path.

Algorithm 6. Differentiating the secondary color
function increaseDifference($c_s,c_t, target$)
	$c_1\leftarrow \mathrm{choose}\mathrm{the}\mathrm{color}\mathrm{that}\mathrm{has}\mathrm{the}\mathrm{highest}\mathrm{contrast}$
	$c_2\leftarrow \mathrm{choose}\mathrm{the}\mathrm{color}\mathrm{that}\mathrm{has}\mathrm{the}\mathrm{lower}\mathrm{contrast}$
	$d\leftarrow \mathsf{\Delta }E\left(c_1,c_2\right)$
	$gamu{t}_1\leftarrow \mathrm{true}$
	$gamu{t}_2\leftarrow \mathrm{true}$
	while $d\le target$do
		if $gamu{t}_1$ then
			$l_1\leftarrow c_1.J$
			if darkmode then
				$l_1\leftarrow l_1+1$
			else
				$l_1\leftarrow l_1-1$
			end if
			if $l_1<0\vee l_1>100$ then
				$gamu{t}_1\leftarrow \mathrm{false}$
			else
				$c_1.J\leftarrow l_1$
				$c_1\leftarrow colormapping\left(c_1\right)$
			end if
		end if
		if $!gamu{t}_1\vee gamu{t}_2$ then
			$l_2\leftarrow c_2.J$
			if darkmode then
				$l_2\leftarrow l_2-1$
			else
				$l_2\leftarrow l_2+1$
			end if
			if $l_2\langle 0\vee l_2\rangle 100$ then
				$gamu{t}_2\leftarrow \mathrm{false}$
			else
				$c_2.J\leftarrow l_2$
				$c_2\leftarrow colormapping\left(c_2\right)$
			end if
		end if
		$d\leftarrow \mathsf{\Delta }E\left(c_1,c_2\right)$
	end while
	return $c_1,c_2$
end function

4.5. Defining Color Pairs and Color Variants

For each basic color ($c_p$, $c_s$, $c_t$, $c_l$, $c_d$), the model determines a color that can be effectively combined with it. The model chooses between the lightest color ($c_l$) and the darkest color ($c_d$) to maximize color contrast, as illustrated in Algorithm 7.

In addition, the model computes lighter or darker variants of each basic color to indicate various states of interactive elements (hover, active, focus) and for design needs, e.g., for generating color gradients.

As shown in Algorithm 8, the model initially attempts to create a darker version when the lightness of the color is less than or equal to 50, and a lighter version otherwise. The model takes the opposite approach if the lightness value of the newly computed color falls outside the range: [0, 100]. If the final color is outside the sRGB color gamut, it is mapped to the boundary of the color space by reducing its chroma value. By default, the color variants are either lighter or darker by 5 units, nevertheless, the user can adjust this value in the model settings.

Algorithm 7. Selecting the most suitable color for text
function getCombination$\left(c,c_l, c_d\right)$
	if $\mathsf{\Delta }E\left(c,c_l\right)>\mathsf{\Delta }E\left(c,c_d\right)$ then
		return $c_l$
	else
		return $c_d$
	end if
end function

Algorithm 8. Computing color variant
function getVariant$\left(c,delta\right)$
	if $c.J\le 50$ then
		$l\leftarrow c.J-delta$
	else
		$l\leftarrow c.J+delta$
	end if
	if $l<0\vee l>100$ then
		$l\leftarrow c.J+delta$
	else
		$l\leftarrow c.J-delta$
	end if
	$c.J\leftarrow l$
	$c\leftarrow colorMapping\left(c\right)$
	return c
end function

5. 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].

5.1. 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.

As described in the previous section, our model generates a theme of five basic colors. Inside our application, the colors are used as follows:

• The primary color is used for the background of the hero area, where the feature image, title, and main menu are located;
• The secondary color is used for the CTA button “Add to Cart” and the information card;
• The tertiary color is used for all other interactive elements. The variant of tertiary color is used for indicating button states;
• The background and foreground colors are used in the central area where the main content is displayed and for the text color in other elements.

5.2. Development

The web application was developed as a single-page application (SPA) with client-side rendering (CSR). The logic, data retrieval, rendering, and routing are all implemented directly in the browser using JavaScript. This approach enables asynchronous content changes without page refreshes. To simplify the development process, the data are stored in a JSON file instead of a database.

The application is built using the React JavaScript library. The Reach Router library is used for routing between pages, and the Service Worker API is employed to enable offline functionality. User settings are stored in the browser’s local storage. For rapid development, we used Material UI design system.

5.3. 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.

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.

5.4. 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.js environment.

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;
• Color selection: users can choose between two color selection modes supported by the model (see Section 4.2.1). The default mode is authentic;
• Color harmony: users can select between two color harmony models (see Section 4.3) or turn it off. By default, the adjustment for color harmony is turned off;
• Contrast enhancement: users can choose between two contrast levels (see Section 4.4) or turn off contrast enhancement. By default, the contrast is set to AA level.

6. 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. Settings used in the model evaluation.

Settings	Dark Mode	Selection Mode	Color Harmony	Contrast
1	no	authentic	off	AA
2	no	colorful	off	AA
3	no	colorful	monochromatic	AA
4	no	colorful	analogous	AA
5	yes	authentic	off	AA
6	yes	colorful	off	AA
7	yes	colorful	monochromatic	AA
8	yes	colorful	analogous	AA

. As can be seen, all settings use the same contrast level, while different options for dark mode, color selection, and color harmony were applied.

In total, we created 24 screenshots that were randomly divided into six sets. Each participant rated the screenshots from one set.

6.1. Participants

A survey was conducted at the Faculty of Natural Sciences and Engineering, Department of Textiles, Graphic Arts, and Design, and shared in two Facebook groups—Slovenian Designers and UX Slovenia.

A total of 147 participants were included in the study (97 males and 50 females), aged between 19 and 62 years (average age 30.5 years). To test whether color vision was impaired, observers were presented with Ishihara test images (plates 1–16 and 22–25) at the end of the test. Data from subjects who failed the Ishihara test were excluded from the analysis.

6.2. 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”:

• 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?

The survey was conducted using a custom website that guided participants through the entire process and collected data in a database.

7. 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.

7.1. 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” (χ²(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) = 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 (χ²(1) = 3.86; p = 0.056, χ²(1) = 0.21; p = 0.88), the binary logistic regression confirmed the negative influence of the dark mode.

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 (χ²(4) = 15.91; p = 0.003, Nagelkerke R² = 0.05).

7.2. 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 (χ²(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 (χ²(4) = 22.18; p < 0.01, Nagelkerke R² = 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) = 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 (χ²(1) = 131.85; p < 0.01) and moderate (φ = 0.47, Cohen’s V = 0.47; p < 0.01).

7.3. Color Harmony

Out of all the participants, 81.08% confirmed that the colors were in harmony (χ²(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) = 18.383; p < 0.01) and confirmed by logistic regression (χ²(4) = 48.73; p < 0.01, Nagelkerke R² = 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 (χ²(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].

7.4. Usability of Color Themes

7.4.1. Visibility of Interactive Elements

In response to Question 4, participants answered affirmatively in 77% of all cases (χ²(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 (χ²(1) = 2.54; p = 0.11), neither with different selection modes (χ²(1) = 2.29; p = 0.13). In contrast, using different color harmony options led to statistically significant differences (χ²(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 (χ²(4) = 24.76; p < 0.01; Nagelkerke R² = 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.

7.4.2. CTA Button

Regarding Question 5, the results showed that 62.84% of participants answered positively (χ²(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 (χ²(4) = 116.56, p < 0.01, Nagelkerke R² = 0.25).

There were 69.8% affirmative responses in the light mode, while in the dark mode, only 56.3% (χ²(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) = 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 (χ²(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.

7.4.3. Effect on Legibility

In response to Question 6, participants responded negatively in 86.15% of cases (χ²(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.

8. 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.