# Automated Image-Based User Interface Color Theme Generation
## 4 Model Framework and Architecture
### Selecting Color Candidates  
In the first step, the model determines the suitability of the input colors. First, it selects which input colors are best suited for primary and secondary colors. Then, it checks if any remaining colors can be used for the foreground or background color. If no suitable colors are found for the background or foreground, default colors are used. Algorithm 1 shows the pseudocode of the function for determining the suitability of colors, which is explained in more detail below. ```
functionselectColors(\(C\)) \(P\ \leftarrow\ getPermutation(C)\)\(\lhd\) set of all pairs: [[c1, c2], [c2, c3]... n] \(maxScore\ \leftarrow\ 0\) for all\(p\in P\)do \(score\ \leftarrow\ getscore(p[1],\ p[2])\) if\(score>maxScore\)then \(c_{p}\ \leftarrow\ p[1]\) \(c_{s}\ \leftarrow\ p[2]\) endif endfor \(c_{d}\ \leftarrow\ null\) \(c_{l}\ \leftarrow\ null\)
```  
**Algorithm 1** Selecting colors based on their suitability ```
for all\(c\in C\mid c\
otin\{c_{p},\,c_{s}\}\)do if\(c_{d}=null\;\vee\;c.\;J\;<c_{d}.J\)then\(c_{d}\gets c\) endif if\(c_{l}=null\;\vee\;c.\;J>c_{l}.J\)then\(c_{l}\gets c\) endif endfor if\(c_{l}.C\geq t_{c}\;\vee\;c_{l}.J\;\leq\;t_{l}\)then\(c_{l}\leftarrow\;defaultLight\) endif if\(c_{d}.C\geq t_{c}\;\vee\;c_{d}.J\;\leq\;t_{d}\)then\(c_{d}\leftarrow\;defaultDark\) endif return\(c_{p},\,c_{s},c_{l},\,c_{d}\) endfunction
```

**Algorithm 1**_Cont._

Figure 2: The main algorithm for determining the color theme of a user interface. #### 4.2.1 Selecting Primary and Secondary Color

Let \(C=\{c_{i}\}_{i=1}^{n}\) be the set of initial colors based on which we want to create a color theme for a user interface. To determine the primary and secondary colors, first, a set of all pairs of the given colors is created: \(\{(c_{1},c_{2}),\ (c_{2},c_{3}),\ (c_{3},c_{4})\ \dots\}\). A score is then calculated for each pair, with the first color being a candidate for the primary color and the second being a candidate for the secondary color. The pair of colors that receives the highest score is considered the best fit for the primary and secondary colors. The score is calculated as follows:

\[score(c_{1},c_{2})=\mathrm{f}_{p}(c_{1})+\mathrm{f}_{s}(c_{1},c_{2}) \tag{1}\]

where \(c_{1}\) is a candidate for the primary color and \(c_{2}\) for the secondary color. \(\mathrm{f}_{p}\) and \(\mathrm{f}_{s}\) are scoring functions defined as:

\[\mathrm{f}_{p}(c_{1})=COV(c_{1})\times w_{1}+\mathrm{C}(c_{1})\times w_{2}+ \mathrm{S}(c_{1})\times w_{3}+\mathrm{D}(c_{1})\times w_{4}+\mathrm{A}(c_{1}) \times w_{5} \tag{2}\]

\[\mathrm{f}_{s}(c_{1},c_{2})=COV(c_{2})\times w_{6}+\mathrm{C}(c_{2})\times w_{ 7}+\mathrm{S}(c_{2})\times w_{8}+\mathrm{D}(c_{2})\times w_{9}+\mathrm{\Delta E }(c_{1},c_{2})\times w_{10} \tag{3}\]

where \(COV\) is the coverage of a color in the image, \(\mathrm{C}\) is the color chroma value in CAM02-UCS color space, \(\mathrm{S}\) is the strength of a color calculated as \(C\times J\) (\(J\) is the lightness of a color in CAM02-UCS), \(\mathrm{D}\) is the contrast or absolute difference between lightness of a color (\(J\)) and lightness of the surround (\(J_{\mathrm{b}}\)), \(\mathrm{A}\) is the analogy or color similarity in lightness component with the surround (\(J_{\mathrm{b}}\)), and \(\mathrm{\Delta E}\) is the Euclidian distance in CAM02-UCS. All values are relative, normalized between 0 and 1. For the lightness of the surround, a minimum lightness value of the sRGB color gamut inside CAM02-UCS color space is used when the dark mode is set, and a maximum value when the light mode is set. The coverage of color in the image was determined by calculating the soft recoloring error. A detailed explanation of this metric can be found in our earlier work [40]. As you can see, the coverage of color in the image, chroma, strength, and contrast was considered in calculating scores for both the primary and secondary colors.