I'm looking for application examples where the user can select a color for a label/tag/highlight, choosing both the background color and foreground color. Gmail provides a two-stage UI for this with labels:
The user can pick a
Label color (defined as a combination of a background color and a text color) from a set of presets displayed as text on background previews. Clicking on
Add custom color brings up an overlay:
The background color can be selected from a palette of presets. Doing so sets the text color. The text color can also be selected from the same preset palette, but changing it doesn't affect the background color.
So far, I haven't found other examples of this kind of control where the user selects a background and text color as a combined value but would like to find other approaches to the pattern. More common I think are approaches that only allow setting the background color with the text color automatically assigned based on contrast (generally black or white), and approaches that treat the two as independent but maybe provide some kind of preview for the text on the background.