# Automated Image-Based User Interface Color Theme Generation
## 4 Model Framework and Architecture
### Selecting Color Candidates
```
functionincreaseDifference(\(c_{s}\), \(c_{t}\), target) \(c_{1}\leftarrow\) choose the color that has the highest contrast \(c_{2}\leftarrow\) choose the color that has the lower contrast \(d\leftarrow\Delta E(c_{1},c_{2})\) \(gamut_{1}\leftarrow\)true \(gamut_{2}\leftarrow\)true while\(d\leq\) targetdo if\(gamut_{1}\)then \(l_{1}\gets c_{1}\).J if darkmode then
```
**Algorithm 6** Differentiating the secondary color
```
functionincreaseContrast(\(c\), \(b\), target) \(c_{2}\leftarrow\) choose the color that has the lower contrast \(d\leftarrow\Delta E(c_{1},c_{2})\) \(gamut_{1}\leftarrow\)true \(gamut_{1}\leftarrow\)true \(gamut_{2}\leftarrow\)true while\(d\leq\) targetdo if\(gamut_{1}\)then \(l_{1}\gets c_{1}\).J if darkmode then
```
**Algorithm 7** The model's color gamut
``` functionincreaseContrast(\(c\), \(b\), target) \(d\leftarrow\)contrast(\(c\).J, \(bg\).J) \(gamut\leftarrow\)true while\(d\leq\) targetdo \(d\leftarrow\)contrast(\(c\).J, \(bg\).J) \(gamut\leftarrow\)true \(gamut_{1}\leftarrow\)true \(gamut_{2}\leftarrow\)true \(gamut_{1}\leftarrow\)true \(gamut_{2}\leftarrow\)true \(gamut_{1}\leftarrow\)true \(gamut_{2}\leftarrow\)true \(gamut_{2}\leftarrow\```
else \(l_{1}\gets l_{1}+1\) else \(l_{1}\gets l_{1}-1\) endif if\(l_{1}\)\(<\) 0 \(\lor\)\(l_{1}\)\(>\)100 then \(gamut_{1}\)\(\leftarrow\) false else \(c_{1}\).\(J\gets l_{1}\) \(c_{1}\gets colormapping(c_{1})\) endif endif if\(!gamut_{1}\lor gamut_{2}\)then \(l_{2}\gets c_{2}\).\(J\) ifdarkmodethen \(l_{2}\gets l_{2}-1\) else \(l_{2}\gets l_{2}+1\) endif if\(l_{2}\)\((0\lor l_{2})\)100 then \(gamut_{2}\)\(\leftarrow\) false else \(c_{2}\).\(J\gets l_{2}\) \(c_{2}\gets colormapping(c_{2})\) endif endif \(d\leftarrow\Delta E(c_{1},c_{2})\) endwhile return\(c_{1},c_{2}\) endfunction
```

**Algorithm 6**_Cont._

### Defining Color Pairs and Color Variants

For each basic color \((c_{p},c_{s},c_{t},c_{l},c_{d})\), the model determines a color that can be effectively combined with it. The model chooses between the lightest color \((c_{l})\) and the darkest color \((c_{d})\) to maximize color contrast, as illustrated in Algorithm 7. In addition, the model computes lighter or darker variants of each basic color to indicate various states of interactive elements (hover, active, focus) and for design needs, e.g., for generating color gradients. As shown in Algorithm 8, the model initially attempts to create a darker version when the lightness of the color is less than or equal to 50, and a lighter version otherwise. The model takes the opposite approach if the lightness value of the newly computed color falls outside the range: [0, 100]. If the final color is outside the sRGB color gamut, it is mapped to the boundary of the color space by reducing its chroma value. By default, the color variants are either lighter or darker by 5 units, nevertheless, the user can adjust this value in the model settings. ```
functiongetCombination\((c,c_{l},\ c_{d})\) if\(\Delta E(c,c_{l})>\Delta E(c,c_{d})\)then return\(c_{l}\) else return\(c_{d}\) endif endfunction
```

**Algorithm 7**Selecting the most suitable color for text

## 5 Integrating the Model into a Web-Based Application

To evaluate the performance of the model, we integrated it into a web application. The application uses the model for automatic and real-time adjustments of the UI colors based on the feature image. Our goal was to showcase the practical usage of the model. All the code is openly available on a Github public repository [50]. ### Concept and Design

The web application, called \"Records\", is used for browsing and purchasing music albums. Since the web application is primarily intended for demonstrating and testing the model, it contains limited data and certain functionalities still need to be implemented (e.g., listening to audio tracks and making purchases). Figure 6 illustrates the landing page and subpages of the web application. Our model determines the UI colors in real-time on the subpages (while the user is browsing through the album) based on the featured image of the current album.