# Automated Image-Based User Interface Color Theme Generation
## 4 Model Framework and Architecture  
### 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  
Figure 1: The UI color theme consists of five basic colors and is generated based on initial colors and user settings. 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.