# Automated Image-Based User Interface Color Theme Generation
## 4 Model Framework and Architecture
### Selecting Color Candidates
Figure 8: The modal window with the settings in light (**left**) and dark mode (**right**). In total, we created 24 screenshots that were randomly divided into six sets. Each participant rated the screenshots from one set. ### 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. ### 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\":

Figure 9: Screenshots of the application used for model evaluation. The order of the screenshot corresponds to the applied settings listed in Table 3. \begin{table}
\begin{tabular}{c c c c c} \hline \hline
**Settings** & **Dark Mode** & **Selection Mode** & **Color Harmony** & **Contrast** \\ \hline
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 \\ \hline \hline \end{tabular}
\end{table} 
Table 3: Settings used in the model evaluation. * 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. ### 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\" (\(\chi^{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 (\(\chi^{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.