ColorPicker for Unity UI

Community Showcases
1

Asset store link: Advanced Color Picker for Unity UI | GUI Tools | Unity Asset Store

Introduction
This package contains components that can be used to create a colorpicker to use inside your game. All components can be added using the MenuItems inside Unity, which allows you to create a ColorPicker very rapidly without having to touch any code. A default (popup) colorpicker which is similar to the one in the Editor is included in the demo (see screenshot below), as well as other demo’s that showcase the use of more customized colorpickers that don’t popup (See Demo)

This forum post can also act as a support forum, So feel free to ask any questions or give suggestions on how I can improve this package.

Demo
WebGL demo (All demo scenes here are also included in the package)

Features

  • Supports RGB, HSV and HSL
  • Sliders with changing backgrounds
  • Input fields
  • Hex field
  • Eyedropper/pipette (Including preview)
  • Box with changing background
  • Circle with changing background
  • Easy to implement it for your custom needs by simply listening to the OnColorChanged event.
  • All changes made are displayed outside of playmode aswell, so no need to enter playmode to see results of changed settings.
  • Good performance. This asset does not create textures for each background that changes colors but instead works with a mesh, which means it is much faster and it gets batched aswell, resulting in only 1 drawcall for all the slider, box and circle backgrounds combined.

This asset is coded in C# and source code is included

Media
I hope I’ll have a video to show here soon :stuck_out_tongue:

  • With “Changing backgrounds” I mean the gradient backgrounds of sliders etc. that change colors whenever you change the Color of the ColorPicker.
1 Like
2

your demo link is not working.

3

Ok I bought this. Its nice. I was wondering if there is a way to limit the sliders Minimum value. so basically for HSL I dont want the L slider to be able to go belot 0.3. I tried setting this as the minimum value on the slider itself but it doesnt apprear to have any affect on the the value.

4

ok I found a work around. Very simple. Just create a new normal slider in unity UI and set that minimum value. then drag the color picker slider to the on value change and select the value under dynamic value if that makes sense. If any one is curious i could go into a more elaborate explanation.

5

Thanks for your purchase and also thanks for notifying me about the broken demo link.

Dropbox decided to stop hosting static websites :frowning: Moved everything to github and updated link :wink:

As for your problem. Good to see you found a workaround to this yourself! In my next update I will adress the fact that currently my colorsliders ignore the min and max values. See my reply to your mail for more information on this.

6

The update which makes the colorsliders respect the min and max values of the slider is now live on the asset store.

If you are already using this asset in your project, and are not sure on whether you should update or not.
If the min/max values of your sliders are already set between 0 and 1 (which is by default) then you can update without problems or changes. If not, see the changelog.txt file and follow the steps. If you don’t need to set the min/max value of a color slider you can skip this update if you’re afraid it might break something.

If anyone encounters a problem with this update (which can’t be solved by following the steps listed in the changelog), please contact me!

7

Just purchased this and works great! Just what I was looking for. One question… is there an easy way to block the ray cast from hitting objects behind the color picker? When the user modifies the color it also selects the object that’s behind I still would like to hit objects on the screen , just not directly behind the color picker. Thanks.

8

To anyone who recently bought this package or intends to use this package in Unity 2020.1

The current version (1.0.2) does not work as intended in the latest versions of Unity. Today I’ve submitted a new version that fixes these issues (1.0.3). I̶t̶ ̶i̶s̶ ̶c̶u̶r̶r̶e̶n̶t̶l̶y̶ ̶b̶e̶i̶n̶g̶ ̶r̶e̶v̶i̶e̶w̶e̶d̶ ̶a̶n̶d̶ ̶I̶ ̶h̶o̶p̶e̶ ̶t̶h̶a̶t̶ ̶i̶t̶ ̶w̶i̶l̶l̶ ̶b̶e̶ ̶u̶p̶ ̶b̶y̶ ̶M̶o̶n̶d̶a̶y̶.̶

The new version is currently available in the asset store, it should fix the issue described below, in case anyone encounters any (other) problems with this new version, or has any other feedback in general, you can post a reply here in this thread.

To describe the current problem and a workaround to it:
When adding ColorPicker components using the menu-items, the slider, box, circle, preview and eyedropper components (basically all components that display the color) will not work. This is because in the more recent versions of Unity, Unity stopped adding CanvasRenderer components automagically, and since the Components of this asset relied on that, these CanvasRenderer components are missing. resulting in the component not rendering and throwing a lot of errors in playmode.

To Manually fix this, you can add this attribute [RequireComponent(typeof(CanvasRenderer))] to the classes ColorEyedropperPreview, GradientBackground, GradientBackground2D and GradientCircle. Alternativly, you could manually add a CanvasRenderer component in the inspector to any objects that has one of these scripts attached.

If you are using Unity 2019 LTS or later, I’d advise you to update to version 1.0.3 (regardless whether you manually fixed this or not) once it is available on the asset store, as this update also removes a couple of obsolete warnings as well as another bug related to editing the Type of the ColorSliders in the inspector not working as intended.

ALSO NOTE
This does not effect existing working ColorPickers made in previous versions of Unity, You can safely upgrade to a new version of Unity without breaking existing ColorPickers as these components already had the CanvasRenderer component added to them by Unity in the previous version.

9

WebGL DEMO ERRORS in SAFARI(Chrome Demo doesn’t work):

  1. HEX input: letters can’t be entered.
  2. At Random Moment I have unexpected behavior of all sliders/cursor on palette: they start moving from the right to left if I click anywhere on these tools.

Pre-Purchase Questions:
3. Can be hex input without alpha displaying?
4. Can be hex input without “#”?

10

The thing you say about the demo doesn’t work, do you get that on desktop or mobile? because the demo is build in WebGL, which is not currently supported on mobile browsers as described in Unity’s manual. (You can of course make apps for those platforms). This demo should work on any browser on which Unity WebGL builds are supported. I’ll check if rebuilding my demo improves this, as I haven’t updated my demo scene in a long time.

As for your points.

  • Testing this just now, I think this is because the check that I do is case-sensitive, and somehow I never checked with lower case. If you press shift while entering the value, it should work. (But i’ll see if I can update the package so that it can support both upper and lower case by default, should be a very small change)
  • I’m not sure what you mean by this. In the demo, there is the ‘options’ screen where you can see a lot of sliders (3 for rgb, 3 for hsv, 3 for hsl and 3 for alpha) They all alter (a part of) the same color, so if you change a value in one of the ranges (rgb for example), the sliders of the other ranges (hsv and hsl) will update to the new color, this is intentional. In normal cases, you probably won’t show rgb. hsv and hsl sliders at the same time to prevent any confusion for the user. But as this demo shows, you can if you want to.
  • Yes, you can both choose to not display the alpha in the field and to not accept a hex containing an alpha value
  • Yes, the # is completely optional, you can also not show the # if you want to.
11

I have just made a new version (1.04) which fixes the bug that the hexfield was case-sensitive.

I’ll submit this change to the asset store later today after some more tests and hope that it will be updated in the store later this week.

At this moment, the webgl demo on github is already running the new version that fixes this issue (Note however that due to caching of your browser, it is still possible that you get the old demo if you already tried the old demo before I updated it, to be sure you are looking at the latest version, you could try opening the demo in chrome’s incognito mode or clear your browsers cache and reload)

12

Can you also add TextMesh Pro texts instead of default? because of performance on mobiles

13

I’ll look into that. As of now, adding basic support (without menu items) is really simple as I can just copy paste my components that use Unity’s built-in text solution and change the types so that they use TMP versions instead.

The reason why I can’t add this right away and need to properly test this is because:

  • TMP is an optional package in Unity. And I don’t want dependencies to optional packages as that would mean you couldn’t use my package without TMP added to your project. Although I’m probably able to implement this using the TMP_PRESENT define symbol.
  • I would need to add menu items for the TMP versions, This is actually harder then it sounds as I want to minimize the chance of it breaking when TMP releases a new version.

So I’m looking into it and I think I’ll be able to add this. If so I’ll be releasing a new version probably somewhere later this week or next week.

14

I use TextMesh Pro with Unity Package Manager for my own assets (so you can get manual for installing TextMesh Pro from manual of my package here). No issues with it. For Complete Project also, I can include dependencies with Asset Store Tools (checkbox) to automatically download it to the project when installing the asset. Finally, in some years there will be the only solution for texts in Unity as I understand — TextMesh Pro.

Also, will you add Panel with Saved Presets of Colors with option to save/load to/from playerprefs?

15

I’ve just released a new version of this package (version 1.0.5).

This update adds TextMeshPro versions of the HexField, ColorInput and ColorLabel components. You will be able to add these via the menuitems in the same way as how you add the existing items. These items will only be visible if you also have textmeshpro added to your project.

NOTE:
This updates moves a lot of files, sadly unity’s package update logic doesn’t detect these files as moved, instead it detect them as new, resulting in duplicate files. Therefore, you should take the following steps when updating:

  • if you created any custom script inside ‘Assets/ColorPicker/Scripts/’, make a backup of them
  • Remove the ‘Assets/ColorPicker/Scripts/’ folder
  • (re)import the new version of this package

If you forgot to do this, don’t worry. You’ll get a lot of errors in your console telling you about duplicate files but if you follow the above steps they should disappear.

If anyone encounters any problems with the package after updating, please let me know in this thread or via email.

1 Like
16

Cool. Also will you add Panel with Saved Presets of Colors with option to save/load to/from playerprefs?

17

I think somewhere next week I’ll have some time to look into that. I can see why presets could be a nice addition to this colorpicker so I would definitely like to add that in a future update.

1 Like
18

Where is a prefab with TextMesh Pro texts?
Which Unity Version you used when uploading asset?

There is no prefab with TMP, no info in “readme.pdf”, There are only scripts with TMP mark.
I need customized default color picker prefab with TMP and 1-minute installation (just drag-n-drop to scene).
Unity 2019.4.10

19
  • Also, you can add selected state for “SwitchBoxButton” : RGB, HSV, HSL buttons as for “SwitchSlidersButtons”.
  • Also, you can move control script to the top root node of prefab — it’s more conveniently when you are dealing with tons of game objects.
  • Also, hex field input may show color in real time as input texts for sliders as you enter the symbols.
  • Gradient box switcher doesn’t have TMP adaptation for texts
20

Ok so, first of, about the manual, for help with the tmp versions, you should be able to get all required information from the non-tmp version. But i’ll add that to the manual in the next version.

Currently, the demo’s (which the DefaultColorPicker is one) are not using the TMP versions. But converting any non-TMP colorpicker to one that uses TMP shouldn’t be that hard because the only difference between the 2 versions is whether they use a regular Text component or a TMP_Text component. That being said, I’ll see if I can to host a TMP version of the DefaultColorPicker seperatly somewhere as converting this can indeed be time-consuming due to the large number of fields involved.

  • Can you add selected state for ‘SwitchBoxButton’? Yes, I can, this is indeed inconsistent, I’ll update this
  • Can you move control script to root node? I suppose you mean the ColorPicker script itself? I think the current setup here makes sense in that the window itself is the root node and the ColorPicker is inside that window (is a child of the window). In what way would it be more convenient for you having it on the root? calling ‘GetComponent’ instead of ‘GetComponentInChildren’?
  • Hex field input show in realtime? What exactly do you mean with this? I’m not sure I understand you correctly here. If you are asking if I could add that the hexfield updates the color while entering characters, the hexfield supports multiple types of hexes (RGB, RGBA, RRGGBB and RRGGBBAA) it can be confusing if I would convert incomplete hexes in realtime (because it can’t differentiate an incomplete RRGG from a complete RGBA for example)
  • TMP for GradientBoxSwitcher? Changing this to TMP in the script is very easy as the only change would be changing the 3 Text variables to 3 TMP_Text variables. But as said above, I’ll see if I can make a TMP version so people don’t have to.