1

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).

Community
  • 1
  • 1
Dieter_be
  • 853
  • 7
  • 13
  • 2
    It's much easier if you work in the HSL colorspace. You just go around the circle in 120 degree increments, and drop the L value every time you circle around. – Pointy Oct 23 '13 at 18:55
  • Pointy is right in that it'll be much easier than RGB, but HSL doesn't account for perceptual brightness... so you will see certain colors *appear* much darker at the same L. I recommend checking out [HUSL](http://boronine.com/husl/) for this. Also, I wrote [a library](https://github.com/nluqo/autumn) that generates colors deterministically and if you know your background color, you can establish ranges of lightness to stay within to maximize readability. – Jere Oct 23 '13 at 19:16

0 Answers0