Search Unity

  1. Check out the Unite LA keynote for updates on the Visual Effect Editor, the FPS Sample, ECS, Unity for Film and more! Watch it now!
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Improved Prefab workflow (includes Nested Prefabs!), 2D isometric Tilemap and more! Get the 2018.3 Beta now.
    Dismiss Notice
  4. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice
  5. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Color Picker

Discussion in 'Unity UI & TextMesh Pro' started by judah4, Sep 7, 2014.

  1. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    I created a color picker for anyone to use. GitHub Repo

    ColorPicker.PNG
    Should be really easy to use. Just add the prefab to the canvas, hook up an even, and it's good to go.
    Code (CSharp):
    1. public Renderer renderer;
    2.     public HSVPicker picker;
    3.  
    4.     // Use this for initialization
    5.     void Start ()
    6.     {
    7.         picker.onValueChanged.AddListener(color =>
    8.         {
    9.             renderer.material.color = color;
    10.         });
    11.     }
    12.  
    13.     // Update is called once per frame
    14.     void Update () {
    15.  
    16.     }
    if you want to assign your own color first, just do this call and it sets the slider and picker to the proper selection.
    Code (CSharp):
    1. Color color = Color.green;
    2. picker.AssignColor(color );
    ColorPicker2.PNG


    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
     
    Last edited: Sep 9, 2014
    Aily, mysticfall, Lethn and 13 others like this.
  2. Senshi

    Senshi

    Joined:
    Oct 3, 2010
    Posts:
    518
    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!
     
  3. Alessio89

    Alessio89

    Joined:
    Aug 8, 2014
    Posts:
    20
    You're kidding me right? I just finished coding my own today! Ah, balls.
    Good job anyway :D Seems better than mine anyway so i'll give it a try!
     
  4. goat

    goat

    Joined:
    Aug 24, 2009
    Posts:
    5,174
    Why are they more dark gradients then light gradients?
     
  5. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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
    images.jpg
     
    Last edited: Sep 8, 2014
  6. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    I fixed a memory leak from creating the textures and put it onto github. Source is all here
     
  7. CWolf

    CWolf

    Joined:
    Oct 24, 2011
    Posts:
    106
    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.
     
  8. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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
    Code (CSharp):
    1. void PlacePointer(PointerEventData eventData)
    2.     {
    3.  
    4.         var pos = new Vector2(eventData.position.x - picker.hsvSlider.rectTransform.position.x, picker.hsvSlider.rectTransform.position.y - eventData.position.y);
    5. pos.y /= picker.hsvSlider.rectTransform.rect.height;
    6. ...
     
    Last edited: Sep 10, 2014
  9. CWolf

    CWolf

    Joined:
    Oct 24, 2011
    Posts:
    106
    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.
     
  10. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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
    Code (CSharp):
    1. void PlacePointer(PointerEventData eventData)
    2.     {
    3.        
    4.         var pos = new Vector2(eventData.position.x - picker.hsvSlider.rectTransform.position.x, picker.hsvSlider.rectTransform.position.y - eventData.position.y);
    5.  
    6.         pos.y /= picker.hsvSlider.rectTransform.rect.height * picker.hsvSlider.canvas.transform.lossyScale.y;
    7.      
    8.         pos.y = Mathf.Clamp(pos.y, 0, 1f);
    And in HsvBoxSelector.cs
    Code (CSharp):
    1. void PlaceCursor(PointerEventData eventData)
    2.     {
    3.  
    4.         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));
    5.         // Debug.Log(pos);
    6.         pos.x /= picker.hsvImage.rectTransform.rect.width * picker.hsvImage.transform.lossyScale.x;
    7.         pos.y /= picker.hsvImage.rectTransform.rect.height * picker.hsvImage.transform.lossyScale.y;
    8.  
     
    CWolf likes this.
  11. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    700
    judah4 likes this.
  12. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
  13. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    700
    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
     

    Attached Files:

  14. yoonitee

    yoonitee

    Joined:
    Jun 27, 2013
    Posts:
    2,056
    Ah, the old colour picker. You can't say you're a multimedia developer until you've programmed at least ten of these!
     
  15. CalaveraX

    CalaveraX

    Joined:
    Jul 11, 2013
    Posts:
    128
    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.

    Code (CSharp):
    1.     public void ManipulateViaRGB2Hex(){
    2.         Color color = hsvpicker.currentColor;
    3.         string hex = ColorToHex (color);
    4.         textColor.text = hex;
    5.     }
     
  16. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    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
     
  17. CalaveraX

    CalaveraX

    Joined:
    Jul 11, 2013
    Posts:
    128
    Cool, i've got it to work :)

    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?
     
  18. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    Create a class with a reference to the color picker and create an event listener to the onValueChanged event like so
    Code (CSharp):
    1.  
    2.     public Renderer renderer;
    3.     public HSVPicker picker;
    4.  
    5.     // Use this for initialization
    6.     void Start ()
    7.     {
    8.         picker.onValueChanged.AddListener(color =>
    9.         {
    10.             renderer.material.color = color;
    11.         });
    12.     }
    13.  
    14.     // Update is called once per frame
    15.     void Update () {
    16.  
    17.     }
     
  19. CalaveraX

    CalaveraX

    Joined:
    Jul 11, 2013
    Posts:
    128
    Sorry, stupid question... reading the help on github made it work! Thanks man! your script is wonderfull :)
     
  20. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    Thanks, no worries.
     
  21. federicopintaluba

    federicopintaluba

    Joined:
    Oct 19, 2014
    Posts:
    13
    Hi man, first of all Thank you! This asset is awesome and its perfect for my project, Its working perfectly in PC, but when I compile to Android, it stops working, can you help me with this? Its pretty urgent, thanks a lot!!
     
  22. Cascho01

    Cascho01

    Joined:
    Mar 19, 2010
    Posts:
    1,033
    NICE!

    Some month ago I wrote a very similar colorpicker.
    The saturation and value image was writen with a nested for-loop and is also updated when the "rainbow" - slider is changed. The difference is that your rainbow texture is coded while mine is a texture from which I pick the color and pass it to the nested for-loop.

    Without having looked into the code my question is, how did you get the hex entry input field coded?
    Could you give me some hints?
     
  23. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    Its all in the public repo. It was @ina that wrote the hex stuff and I haven't had the time to really dig at it.
     
  24. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    700
    you can convert hex to rgb and back the usual way as they are both interchangable formats to denote color


    https://github.com/yosun/HSV-Color-Picker-Unity/blob/master/Assets/HSVPicker/HexRGB.cs
     
  25. Cascho01

    Cascho01

    Joined:
    Mar 19, 2010
    Posts:
    1,033
    ok, but how to know where to put both the sliders and the squares pickers position based on a rgb value?
     
  26. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    The method AssignColor already does that if you pass in a color with rgb values.
    Code (CSharp):
    1.     Color color = new Color32(127, 3, 129, 255);
    2.     picker.AssignColor(color );
    3.  
     
  27. Masterchiefs

    Masterchiefs

    Joined:
    Jan 10, 2015
    Posts:
    20
    Thanks for the great work :) I am having one problem and that is that the color is not updated constantly. You have to hit one of the sides of the color box for the cube's color to change. Was that intended?
     
  28. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    oh, hmm. That doesn't sound right. Something to show what you mean would be nice but I'll try investigating over the weekend.
     
  29. unityplease

    unityplease

    Joined:
    Aug 31, 2014
    Posts:
    31
    When the canvas is in world space mode the 2D color sliders no longer work correctly. This is something to do with the positioning code when the scale is changed.
     
  30. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    So I fixed up the test scene so everything should be working right again all though the picker is showing some rounding errors.

    I have not been able to get it to work yet in 3d but I think I have an idea on how to upgrade the system to use sliders built into the system so that I don't have to manually set the picker. I probably should have done this from the beginning but the thought had not occurred to me.
     
  31. unityplease

    unityplease

    Joined:
    Aug 31, 2014
    Posts:
    31
  32. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    I'll see what I can do. I don't have much time during the week but I'll try to post something about it by the end of the weekend
     
  33. doukOmega

    doukOmega

    Joined:
    Dec 31, 2014
    Posts:
    12
    That would be really much appreciated mate. I also try to find out how to set this up working on 3D space and i really cannot figure out how. Also i would love if the addition of an alpha channel slider is easy.
     
  34. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    I have it somewhat working using a ScrollRect and it works well in both overlay and 3d space but it no longer snaps to your mouse position. Alpha slider should be easy enough. It should be just like the other sliders
     
  35. unityplease

    unityplease

    Joined:
    Aug 31, 2014
    Posts:
    31
    There are a few issues with the current build: (world space)

    1. The central color slider doesn't function. (there are two handles but only one moves)
    2. The color picker flickers between colors when at the bounds of the 2D colorbox. ( it seems to want to display the top right hand color when on the boundary.)
     
  36. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    1. Ah, I ran out of time doing that and then I forgot to actually transfer it over.

    2. hmm, I was having a rounding issue with that before. I may have to redo how it computes the color.
     
  37. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    okay, it should work in world space now except for click placement on the box selector.
     
  38. unityplease

    unityplease

    Joined:
    Aug 31, 2014
    Posts:
    31
    I don't know it now isn't working at all for me.
     
  39. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    In unity 5 or unity 4?

    Something with the script order was causing the test cube to not get the color so I fixed that by just assigning the color on start. I also made a unity 5 branch to see what happens where and now if it still doesn't work then I have no idea whats going on for you.
     
    Last edited: Mar 12, 2015
  40. unityplease

    unityplease

    Joined:
    Aug 31, 2014
    Posts:
    31
    Why does the unity master have a UnityVS folder ? For visual studio and in the editor folder is it needed?

    And I'm trying it in a project from unity 4.6 but eventually I will port it into unity 5. Once unity 5 bugs have stopped being so buggy.
     
  41. unityplease

    unityplease

    Joined:
    Aug 31, 2014
    Posts:
    31
    Ok, I tried it in unity 5 and and it functions with the following issue. (It doesn't work in unity 4.6)


    1. When moving a single color silder up and down the other color siders move slightly.
    (reproduce by moving a single slider up and down).

    2. You can't select full color range (try selecting full blue, red or green) #0000FF for example will not quite get there.
     
    Last edited: Mar 12, 2015
  42. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    UnityVS I accidentally added from the visual studio debugging tools.

    Those have to do with rounding errors that I will have to do over the weekend while Im not as busy.
     
  43. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
  44. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
  45. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
    Ah awesome, silly me!
     
  46. customphase

    customphase

    Joined:
    Aug 19, 2012
    Posts:
    109
    is there any way to make it so that when you click on any point in the color box, the color picker would go there? without the need to drag?
     
  47. Meceka

    Meceka

    Joined:
    Dec 23, 2013
    Posts:
    305
    I agree, it was the reason I didn't use this color picker, I am not sure if it's a bug or if it's intended to work this way.
     
    Last edited: Mar 17, 2015
  48. customphase

    customphase

    Joined:
    Aug 19, 2012
    Posts:
    109
    I actually made it work.
    Edit the HsvBoxSelector script, and add the line
    dragger.rectTransform.position = pos;
    at the end of PlaceCursor(PointerEventData eventData) function
    Very strange, that developer didnt think about making it work like this initially
     
    Last edited: Mar 17, 2015
    Meceka likes this.
  49. Meceka

    Meceka

    Joined:
    Dec 23, 2013
    Posts:
    305
    Wow, thanks, it worked for me too. I didn't test on mobile yet though.
     
  50. judah4

    judah4

    Joined:
    Feb 6, 2011
    Posts:
    217
    This is how it initially worked before I got it to work in world space. This way seems to break world space again