0

I am re-asking this question because my first attempt was erroneously marked as a duplicate, and I still have hope that someone might have an answer for me.

I am having to write my own mouse-over code for a particular control in a C++/VCL application. The question is, given ANY combination of foreground and background colors, how do you calculate a highlight color to indicate that the mouse is over that control?

I am NOT asking how to choose a font/text color based on the background color. That question has certainly been answered. What I need to do is choose a third color to use to highlight the item when the mouse is over it.

I was thinking I probably want to do something like take the background color, find its opposite on the color wheel (and I have no idea how to do that). If that color is too close (however you determine that) to the text color, make it lighter or darker.

Does anyone have an algorithm they are willing to share?

Thanks!

Karen Cate
  • 272
  • 3
  • 15
  • This thread seems to have a well researched answer on mixing colors: http://stackoverflow.com/questions/14819058/mixing-two-colors-naturally-in-javascript – edencorbin Jan 05 '16 at 00:06
  • Maybe you could just exchange the colors. – Cecilio Pardo Jan 05 '16 at 00:07
  • calculate brighness from medium of r g b. if brightness > THRESHOLD : brightness += X; else brightness -= X. This way you can increase the birghtness when hovering and will simply darken the background if it was too bright already – I3ck Jan 05 '16 at 00:10
  • Unfortunately the question is too broad. There are 10+ possible ways of doing that. They all have their pros and cons. – Kirill Kobelev Jan 05 '16 at 00:51
  • Pick a color space. Use some heuristic to find a color far from both. Iterate into production, determine if it looks good in your UI framework (for instance, is text more/less uniform in color than background?) – Yakk - Adam Nevraumont Jan 05 '16 at 01:22
  • Thank you, @edencorbin, I hadn't thought of mixing colors. I played around with the algorithms on the thread you linked, and it seemed like I always got gray as my mixed color, which often didn't look good. – Karen Cate Jan 06 '16 at 01:29
  • @CecilioPardo That is what I'm doing now and with many combinations of fg and bg colors, it's rather unpleasant looking. – Karen Cate Jan 06 '16 at 01:29
  • @Yakk The "some heuristic" is exactly what I am asking for. Color theory/math is really not my forte. – Karen Cate Jan 06 '16 at 01:29

1 Answers1

1

If you want to find the complementary color (opposite on the color wheel), you can convert the foreground color to HSV space (or any of a number of other color spaces such as Y'CbCr, Y'IQ, etc.), rotate the hue component 180° and convert back to RGB.

As you suspect, this might not work if the background color is too close to the resulting color. That gives you some options, though. If you convert both colors (fg & bg) to HSV, you can find 2 colors with hues that are exactly between the foreground and background colors. Just find the angle midway between the 2 input colors' hues to get the first possible color, and then add 180° to that to get the other possible color.

But the bigger question is why you're trying to set the selection color at all? You should be using the system highlight color unless you have a really good reason not to.

user1118321
  • 25,567
  • 4
  • 55
  • 86
  • The reason I'm not using the system color is that we allow our users to customize the color palette in our application. I've now tried several methods of converting RGB to HSL/B/V, and trying to modify the H value. My main trouble has been when the foreground color is white or black, which is wildly common. Tomorrow I'll try adding some more special case code to see if I can't work around that sanely. Luckily I can do this operation once at application startup, so I don't have to be horribly worried about performance. – Karen Cate Jan 06 '16 at 01:39