Problem retrieving pixel color on color picker

Question

I'm currently making a color picker (pretty standard one, pretty much the same as photoshop with less options at the moment: still in early stage). Here's the picture of the actual thing : http://i.imgur.com/oEvJW.jpg

The problem is : to retrieve the color of the pixel that is under the color selector (the small one, the other is the mouse), I have this line that I thought would do it :

_currentColor = Convert.hsbToHex(new HSB(0,
  ((_colorSelector.x + _colorSelector.width/2)*100)/_largeur,
  ((_colorSelector.y + _colorSelector.height/2)*100)/_hauteur
));

Just to clarify the code, I simply use the coordinates of the selector in order to create a new HSB Color (saturation is represented on the X axis and brightness (value) on the Y axis of such a color picker). I then convert this HSB Color to Hexadecimal and assign it to a property. The hue is always set to 0 at the moment but this is irrelevant as I only work with pure red to test.

It partially does what I wanted, but the returned color values are inversed for most of the corners: for (0,0) it's supposed to return 0xFFFFFF, but it returns 0x000000 instead for (256, 0) it's supposed to return 0xFF0000, but it returns 0x000000 instead for (0, 256) it's supposed to return 0x000000, but it returns 0xFFFFFF instead for (256, 256) it's supposed to return 0x000000, but it returns 0xFF0000 instead

I tried many variations in my code, but I just can't seem to fix it properly. Any reply/suggestions are more than welcomed!

Answer 1

I think the error (or one of them) is using values in the range 0..256 which seems to lead to overflows, try to use 0..255 instead.

Answer 2

Just swap the X and Y axis and it's solved.

Answer 3

Assuming the registration point is centered, which seems to be the case since you're doing:

(_colorSelector.x + _colorSelector.width/2)

I think you formula should look something like this:

(_colorSelector.x + _colorSelector.width/2) / _colorSelector.width

If your registration point is at (0,0), it should be just:

(_colorSelector.x / _colorSelector.width);

The above should give you a number in the range 0...1

Also, you should invert this value for brightness (because a low y value represents a high brightness and a high y value, low brightness; so brightness decreases along the y axis, while saturation increases along the x axis). So for your y axis you should do:

1 - ((_colorSelector.y + _colorSelector.height/2) / _colorSelector.height)

(Again, assuming the registration point is centered).

If your conversion function expects percentages, then you should multiply by 100

(_colorSelector.x + _colorSelector.width/2) / _colorSelector.width * 100
(1 - ((_colorSelector.y + _colorSelector.height/2) / _colorSelector.height)) * 100

Maybe I'm missing something, though. I'm not sure where _largeur and _hauteur come from, but it looks like these are width and height. I think you should use the _colorSelector height and width, but I could be wrong.

PS: I hope you get the idea, because I haven't compiled the above code and maybe I screwed up some parenthesis or made some other dumb mistake.