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

Figure 3: Color themes created with different color selection modes: authentic (**left**) and colorful (**right**). 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. ```
functioncolorMapping(\(c\)) ifinsideGamul(\(c\))then return\(c\) endif \(start\ \leftarrow\ 0\) end\(\leftarrow\ c.C\) \(i\ \leftarrow\ 0.01\) while\(end-start>i\)do \(c.C\ \leftarrow\ start+(end-start)\times 0.5\) ifinsideGamul(\(c\))then \(start\ \leftarrow\ c.C\) else endif endwhile return\(c\) endfunction
```

**Algorithm 2**Mapping color on the chroma path

```
functionmonochromaticColors(\(c_{p},c_{l},c_{d}\)) \(r\ \leftarrow\ (c_{l}.J-c_{d}.J)/4\) for\((i\ 0;i<3;i\gets i+1)\)do \(c\leftarrow\)new\(color\)\(color\)\(c.J\ \leftarrow\ c_{d}.J+(i+1)\times r\) \(c.C\gets c_{p}.C\) \(c.h\gets c_{p}.h\) \(C_{m}[i]\ \leftarrow\ colorMapping(c)\) endfor \(c_{t}\ \leftarrow\ C_{m}[1]\) ifdarkmodethen \(c_{s}\ \leftarrow\ C_{m}[2]\) \(c_{p}\ \leftarrow\ C_{m}[0]\) else \(c_{s}\ \leftarrow\ C_{m}[0]\) \(c_{i}\gets c_{p}\) \(d\ \leftarrow\)null forall\(c\in C_{m}\)do if\(d=\)null\(\ \vee\ \Delta E(c_{i},c)<d\)then endif endfor return\(c_{p},\ c_{s},\ c_{t}\) endfunction
```

**Algorithm 3**Computing monochromatic colors

```
functionmonochromaticColors(\(c_{p},c_{l},c_{d}\)) \(r\ \leftarrow\ (c_{l}.J-c_{d}.J)/4\) for\((i\ 0;i<3;i\gets i+1)\)do \(c\leftarrow\)new\(color\)\(color\)\(c.J\ \leftarrow\ c_{d}.J+(i+1)\times r\) \(c.C\gets c_{p}.C\) \(c.h\gets c_{p}.h\) \  
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. ```
functionanalogousColors(\(c_{i}\)) \(c_{s}\leftarrow\)new color \(c_{s}.J\gets c_{t}.J\) \(c_{s}.C\gets c_{t}.C\) \(c_{s}.h\leftarrow(c_{t}.h+30)\ mod\ 360\) \(c_{s}\leftarrow\ colorMapping(c_{s})\) return\(c_{s}\) endfunction

Figure 4: Monochromatic color theme in light and dark modes. A comparison of color themes with different color harmony settings is illustrated in Figure 5.

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