Question GetPixel in colorpicker is always off

I am trying to make a color-picker in my UI using an Image, but I am stuck getting the wrong color each time and not sure what I am doing wrong:

Code (CSharp):

1. public class ColorPickerChart : MonoBehaviour
2. {
3.     [SerializeField] RectTransform colorChartTransform;
4.     [SerializeField] Texture2D colorChartTexture2D;
5.  
6.     [SerializeField] RectTransform cursor; // Child of Color chart image
7.     [SerializeField] Image cursorColor;
8.  
9.     public void PickColor(BaseEventData data) // Called from EventTrigger on Color chart image
10.     {
11.         PointerEventData pointer = data as PointerEventData;
12.         cursor.position = Input.mousePosition;
13.  
14.         Color pickedColor = colorChartTexture2D.GetPixel(
15.             (int)(cursor.localPosition.x * (colorChartTexture2D.width / colorChartTransform.rect.width)),
16.             (int)(cursor.localPosition.y * (colorChartTexture2D.height / colorChartTransform.rect.height)));
17.  
18.         cursorColor.color = pickedColor;
19.  
20.         Debug.Log("Picked color: " + pickedColor);
21.     }
22. }

I am using the attached image as a source. 90% of my clicks return black, and the other 10% are just plain wrong.

 

Maybe don't scale the canvas so the image size is always constant?

Maybe check:
https://answers.unity.com/questions/1441494/how-to-get-the-pixel-color-at-the-mouse-position-h.html

And debug log the inputs for get pixel so you can see if that's actually right

 

Thank you,

I tried this code, with my image being at pos 0,0 on the screen:

Code (CSharp):

1. Vector2 mousePosition = new Vector2(Input.mousePosition.x, Input.mousePosition.y);
2.  
3.         cursor.position = mousePosition;
4.         int pos1 = (int)mousePosition.x;
5.         int pos2 = (int)mousePosition.y;
6.  
7.         Color32 color = colorChartTexture2D.GetPixel(pos1, pos2);
8.         cursorColor.color = color;
9.  
10.         Debug.Log("x = " + pos1 + " | " + "y = " + pos2);
11.         Debug.Log(color.ToString());

And it works ALMOST correctly, it seems the pixel Y is off by a slight offset, and not sure where that offset comes from.

 

Changing the simple position to:

Code (CSharp):

1. int pos1 = (int)(mousePosition.x * (colorChartTexture2D.width / colorChartTransform.rect.width));
2. int pos2 = (int)(mousePosition.y * (colorChartTexture2D.height / colorChartTransform.rect.height));

To acocunt for image resolutions, seems to have fixed it!

 

To account for where on screen u place the image, use:

Code (CSharp):

1. int pos1 = (int)(cursor.anchoredPosition.x * (colorChartTexture2D.width / colorChartTransform.rect.width));
2. int pos2 = (int)(cursor.anchoredPosition.y * (colorChartTexture2D.height / colorChartTransform.rect.height));

 

Thanks for sharing the fixes as well?