# Automated Image-Based User Interface Color Theme Generation
## 4 Model Framework and Architecture
### Selecting Color Candidates
However, the logistic regression analysis confirmed only the influence of dark/light mode and color harmony adjustment (\(\chi^{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% (\(\chi^{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 (\(\chi^{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 (\(\chi^{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. #### 7.4.3 Effect on Legibility

In response to Question 6, participants responded negatively in 86.15% of cases (\(\chi^{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. ## 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.