Selection Coloring Algorithm

Question

I'm trying to generate a color that could highlight an item as "selected" based on the color of the current object. I've tried increasing some of the HSB values, but I can't come up with a generalized formula. Particularly, I have problems when working with white (a brighter white doesn't look much different than a regular white). There's no requirement that says I need to make it brighter, so some sort of "inverse" color would work well too. Are there any standard algorithms or techniques for doing something like this (I'm guessing yes, but I couldn't find any -- I'm not sure if there's a name for this)?

thanks,

Jeff

Answer 1

Maybe the negatif effect:

pseudo:

int red = originalColor.red
int green = originalColor.green
int blue = originalColor.blue

int newRed = 255 - red
int newGreen = 255 - green
int newBlue = 255 - blue

Color negativeColor = new Color(newRed, newGreen, newBlue)

Or adding a blue color-effect:

int red = originalColor.red
int green = originalColor.green
int blue = originalColor.blue

int newRed = 255 - red
int newGreen = 255 - green
int newBlue = 255 - blue + 100
if newBlue > 255 {
   newBlue = 255
   newRed = newRed - 50
   newGreen = newGreen - 50
   if newRed < 0 {newRed = 0}
   if newGreen < 0 {newGreen = 0}
}

Color negativeColor = new Color(newRed, newGreen, newBlue)

Answer 2

If you're using HSB, try shifting the hue by half the maximum value either up or down, that should give you the "opposite" color (also called the complementary color). However, this doesn't do you any good for the grey spectrum, which has no hue and will thus look identical.

If you do this with both hue and brightness, you will get a kind of "negative", which works in all cases. A true negative would have you "flip" the brightness value around the mid-point, but that doesn't work for medium-gray, which would still be medium-gray.

It not always possible to make a color brighter (what do you do with white?), so shifting both hue and brightness by half is the most reliable if you're looking for contrast.

Answer 3

One technique you can use is to swap the item's foreground (text) color and its background color. If the text and background colors of your item already have a pleasing contrast, the selected item should continue to look good.

_{(source: wordpress.com)}

That is the technique used on this site (Stack Overflow) when you mouse-over the tags in your post. They turn from DarkBlue-on-LightBlue to LightBlue-on-DarkBlue. Try it to see the effect.