1

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:

Screenshot of Label color picker context menu from Gmail

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:

Screenshot of custom Label color picker modal from Gmail

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.

Improve this question
1
  • you can search on Dribbble as well for examples
    – harshikerfuffle
    Jul 17 at 16:35

1 Answer 1

Reset to default
1

An example is WordPress, with an interesting twist: it also checks accessibility. Check image below

enter image description here

EDIT BASED ON COMMENT

Based on your comment, older versions of WordPress had a few combinations (maybe they still do, but I couldn't find any information about it). It's relatively common in quality themes, but users are not completely free to choose their own combinations. Instead, the themes provide a set of color combinations that work well together.

When it comes to software GUIs, you can find this feature in browsers like Chrome or Firefox, or if you prefer something with code, in .NET editor JetBrains. However, even in these cases, the color options are dependent on pre-set themes, so users cannot choose any color they want.

That being said, if you use a formula that selects a background color based on the text color to ensure contrast, then that could be a viable option. I recall seeing such an approach before, but I don't remember where exactly. The problem with this approach is that there are numerous possibilities for text/background combinations (triads, tetrads, complementary colors, etc.).

As a last resort, you could consider using a similar approach to Paletton.com, where users can preview different color combinations and make changes according to their preferences.

Example of palette enter image description here

Application Example of the above palette enter image description here

Improve this answer
3
  • Thanks for the examples Devin, particularly the WordPress one that I am not familiar with. As far as I'm aware, the Sheets/Office/Docs examples all treat text color and background color independently. Same for XD/Figma, where the colors are always independent.
    – Jon
    Jun 16 at 17:29
  • I think I misunderstood the question. Do you mean that choosing a color (background or text) will automatically choose another color (text or background) respectively as in a preset cholor scheme? And if so, is it for a desktop GUI or for a web app?
    – Devin
    Jun 16 at 18:05
  • 1
    I'm looking for desktop or web app GUI examples where the background and text color are considered together rather than being completely independent. This could be achieved by having the background color automatically determine the text color, or perhaps by previewing the text and background color together. Just not the standard two separate colors + two separate pickers pattern that is more common.
    – Jon
    Jun 16 at 18:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.