# Automated Image-Based User Interface Color Theme Generation
## 4 Model Framework and Architecture
### Selecting Color Candidates
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.

\begin{table}
\begin{tabular}{l c c c c c c c c c c} \hline \hline  & \(\mathbf{w_{1}}\) & \(\mathbf{w_{2}}\) & \(\mathbf{w_{3}}\) & \(\mathbf{w_{4}}\) & \(\mathbf{w_{5}}\) & \(\mathbf{w_{6}}\) & \(\mathbf{w_{7}}\) & \(\mathbf{w_{8}}\) & \(\mathbf{w_{9}}\) & \(\mathbf{w_{10}}\) \\ \hline authentic (light mode) & 1 & 0.25 & 0 &

#### 4.2.2 Selecting Foreground and Background Colors

To determine the foreground and background colors, the model first selects the lightest (\(c_{I}\)) 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. #### 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. ### 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.