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.

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 );

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

 

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 Seems better than mine anyway so i'll give it a try!

 

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

 

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

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. ...

 

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

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.  

 

Added hex entry input field

https://github.com/yosun/HSV-Color-Picker-Unity

 

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.

Code (CSharp):

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

 

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

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

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.     }

 

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

 

Thanks, no worries.

 

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!!

 

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?

 

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.

 

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

 

ok, but how to know where to put both the sliders and the squares pickers position based on a rgb value?

 

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.  

 

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?

 

oh, hmm. That doesn't sound right. Something to show what you mean would be nice but I'll try investigating over the weekend.

 

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.

 

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.

 

Please let me know how you get on. I posted this question on unity answers a few days ago but so far no replies.

http://answers.unity3d.com/questions/914097/2d-slider-ui-46-for-color-picker-world-space.html

 

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

 

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.

 

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

 

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.)

 

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.

 

okay, it should work in world space now except for click placement on the box selector.

 

I don't know it now isn't working at all for me.

 

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.

 

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.

 

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.

 

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.

 

Hey judah4,

This is really handy, you really should add this to the UI components repo: http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161

 

It's already at the bottom of the list

 

Ah awesome, silly me!

 

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?

 

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.

 

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

 

Wow, thanks, it worked for me too. I didn't test on mobile yet though.

 

This is how it initially worked before I got it to work in world space. This way seems to break world space again