Color Picker

I created a color picker for anyone to use. GitHub Repo

Should be really easy to use. Just add the prefab to the canvas, hook up an even, and it’s good to go.

public Renderer renderer;
    public HSVPicker picker;

    // Use this for initialization
    void Start ()
    {
        picker.onValueChanged.AddListener(color =>
        {
            renderer.material.color = color;
        });
    }

    // Update is called once per frame
    void Update () {

    }

if you want to assign your own color first, just do this call and it sets the slider and picker to the proper selection.

Color color = Color.green;
picker.AssignColor(color );

Both color images are created through code. the saturation and value image is updated when the slider changes position. Learning to create UnityEvents was pretty simple and makes it feel much nicer than setting up something that checks color in Update();

Feel free to use and improve. Any changes that are made I will try to keep up to date here.
GitHub Repo

30 Likes

This looks really useful, thanks! May I suggest submitting this to the Useful 4.6 Scripts Collection thread as well? =)

Also, double thanks for showing me you can use lambdas inside the AddListener method; that’s pretty darn neat!

You’re kidding me right? I just finished coding my own today! Ah, balls.
Good job anyway :smile: Seems better than mine anyway so i’ll give it a try!

1 Like

Why are they more dark gradients then light gradients?

ummm, I’m not sure. It should be be able to go through the entire rgb values.
Looking at the internet, it seems to be the same as this one
1764856--111963--images.jpg

I fixed a memory leak from creating the textures and put it onto github. Source is all here

Thanks for this. Looks great but I think I’ve found a bug. It doesn’t seem to play nice with ReferenceResolution set on the Canvas. The picker position is wrong (everything else seems to work fine though).

In my test I’m using Reference resolution of 1280x720 and a ‘match width or height’ of 0.

EDIT: To add to this, the bug shows when using ReferenceResolution but running at a higher, or lower, resolution than the set reference resolution.

Well that’s strange! after a few tries I was able to reproduce the problem.
Something about the reference resolution changing the size of the slider compared to the screen space. Im going to have to fix these lines in HsvSliderPicker.cs

void PlacePointer(PointerEventData eventData)
    {

        var pos = new Vector2(eventData.position.x - picker.hsvSlider.rectTransform.position.x, picker.hsvSlider.rectTransform.position.y - eventData.position.y);
pos.y /= picker.hsvSlider.rectTransform.rect.height;
...

Yeah, I narrowed it down to that area of the code too but didn’t get time to play around with a fix. If I get there, and you haven’t updated it by then, I’ll post my fix.

okay, I think I got it working. The reference resolution scales the canvas so all you do is scale the image height by the canvas transform scale. This is what I did in HsvSliderPicker.cs

void PlacePointer(PointerEventData eventData)
    {
       
        var pos = new Vector2(eventData.position.x - picker.hsvSlider.rectTransform.position.x, picker.hsvSlider.rectTransform.position.y - eventData.position.y);

        pos.y /= picker.hsvSlider.rectTransform.rect.height * picker.hsvSlider.canvas.transform.lossyScale.y;
      
        pos.y = Mathf.Clamp(pos.y, 0, 1f);

And in HsvBoxSelector.cs

void PlaceCursor(PointerEventData eventData)
    {

        var pos = new Vector2(eventData.position.x - picker.hsvImage.rectTransform.position.x, picker.hsvImage.rectTransform.rect.height * picker.hsvImage.transform.lossyScale.y - (picker.hsvImage.rectTransform.position.y - eventData.position.y));
        // Debug.Log(pos);
        pos.x /= picker.hsvImage.rectTransform.rect.width * picker.hsvImage.transform.lossyScale.x;
        pos.y /= picker.hsvImage.rectTransform.rect.height * picker.hsvImage.transform.lossyScale.y;
1 Like

Added hex entry input field

1 Like

That’s great! I have a question for you, how does the code design feel, decent enough?

Also added a mobile UI version - but having issues with CanvasScaler and also getting your HSV dot to update well for a horizontal HSV slider

Ah, the old colour picker. You can’t say you’re a multimedia developer until you’ve programmed at least ten of these!

I’m having an error,
a Null reference Exceptio in Color color = hsvpicker.currentColor; (On the script HexRGB) i’ve checked it out on inspector, and the links are rigth.

    public void ManipulateViaRGB2Hex(){
        Color color = hsvpicker.currentColor;
        string hex = ColorToHex (color);
        textColor.text = hex;
    }

Check the reference to hsvPicker in the inspector. It’s most likely not set. I think that class needs to be changed to be created as an instance on runtime instead of a monobehaviour

Cool, i’ve got it to work :slight_smile:

how can i send the event of a picked color? i can play and view all the colors and stuff, but how do i send the event so my script uses that color i’ve picked?

Create a class with a reference to the color picker and create an event listener to the onValueChanged event like so

    public Renderer renderer;
    public HSVPicker picker;

    // Use this for initialization
    void Start ()
    {
        picker.onValueChanged.AddListener(color =>
        {
            renderer.material.color = color;
        });
    }

    // Update is called once per frame
    void Update () {

    }

Sorry, stupid question… reading the help on github made it work! Thanks man! your script is wonderfull :slight_smile:

Thanks, no worries.