Question

I'm working on an open source project that uses a lot of key=value tags, and represents them in a HTML UI with labels that show the value as text, and deterministically generates a color for the foreground text based on the key (code here). To get an idea how this looks like, check the screenshot @ https://raw.github.com/vimeo/graph-explorer/master/screenshots/screenshot.png; the tag legend on the right shows the tag key strings and which colors they map to. For now, I've left the background of all labels RGB #333, because that seems to look about right on the dark background of the page.

For some keys, this goes a little wrong, as you may expect. For example "status" gives #7b0065 which is a dark purple, the contrast with the background is not high enough.

I tried Automatically change text color to assure readability to compute the inverse color for the background, but:

  1. All the different background colors make for a very ugly page.
  2. Text is often still unreadable (often even more so, it looks like)

So instead of getting the inverse color, maybe it's better to compute a color that "stays away" from a given color, I.e. From the background color #333.

Maybe we can get the "distance" between a given color and the background, and if too close, modify the key a little and try again. Or, a better idea?

Checking if a color is in a specific range of colors looks interesting but it's for ruby and also seems to use improper math (no HSL/HSV).

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top