Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

ColorPicker for Unity UI

Discussion in 'Assets and Asset Store' started by troien, Dec 11, 2015.

  1. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    Asset store link: http://u3d.as/kB5

    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 :p





    * With "Changing backgrounds" I mean the gradient backgrounds of sliders etc. that change colors whenever you change the Color of the ColorPicker.
     
    Last edited: Oct 31, 2016
    makaka-org likes this.
  2. Cowboy_Jow

    Cowboy_Jow

    Joined:
    Jan 12, 2014
    Posts:
    20
    your demo link is not working.
     
  3. Cowboy_Jow

    Cowboy_Jow

    Joined:
    Jan 12, 2014
    Posts:
    20
    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. Cowboy_Jow

    Cowboy_Jow

    Joined:
    Jan 12, 2014
    Posts:
    20
    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. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    Thanks for your purchase and also thanks for notifying me about the broken demo link.

    Dropbox decided to stop hosting static websites :( Moved everything to github and updated link ;)

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

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    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. snyderart

    snyderart

    Joined:
    Dec 17, 2016
    Posts:
    1
    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. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    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
    Code (CSharp):
    1. [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.
     
    Last edited: Oct 16, 2020
  9. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    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. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    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.
    1. 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)
    2. 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.
    3. Yes, you can both choose to not display the alpha in the field and to not accept a hex containing an alpha value
    4. Yes, the # is completely optional, you can also not show the # if you want to.
     
    Last edited: Nov 16, 2020
  11. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    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. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    Can you also add TextMesh Pro texts instead of default? because of performance on mobiles
     
  13. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    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:
    1. 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.
    2. 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. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    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?
     
    Last edited: Nov 19, 2020
  15. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    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.
     
    makaka-org likes this.
  16. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    Cool. Also will you add Panel with Saved Presets of Colors with option to save/load to/from playerprefs?
     
  17. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    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.
     
    makaka-org likes this.
  18. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    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
     
    Last edited: Nov 21, 2020
  19. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    • 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
     
    Last edited: Nov 22, 2020
  20. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    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.
     
  21. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    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'?

    Yes, Color Picker script. There are 2 cases for convenience:
    1. When you are dealing with tons of objects, it's more conveniently to select root node and see control script compared to surfing down on hierarchy.
    2. When you are dealing with control script outside color picker (e.g. for setting current color outside), you have the only reference to script and you need to call colorPicker.transfrom.parent.gameobject.SetActive() to access root node (to show/hide it) - a long way. So this is architecture improvements.
    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)

    Yes, you understand correctly. So for PC it's OK for now — to click enter is naturally here to apply. But for mobiles it's not obviously enough for the user. So the user needs to click in free space to apply the color.
     
  22. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    Some Bug Report.

    I customized the color picker as on my images, so by default I see HSL mode with rainbow palette with White current color by default.

    When I am in HSL mode as in image 1 and color is not a white, and I set color outside UI from code to White then I get the state as on Image 2 => Saturation gets bottom state of slider And on Color Box I don't see rainbow palette.

    So I think this is incorrect and saturation must be the same when this happens. It's inconvenient to user.

    Image 1:


    Image2:
     
  23. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    The reason why saturation changes is because you set the color using rgb. The ColorPicker then has to calculate the hsl values based on rgb values. As you can see in image 2 you posted above, HSL has a lot of values that result in white. If you set light to 1 (or 100%) you get white no matter what the hue or saturation is. So when converting rgb 'white' to hsl, the hue and saturation are lost in the conversion and set to zero. This is the correct and expected behavior when converting rgb to hsv or hsl.

    Same would be true for the hexfield as a hex stores the rgb values. So when setting via hex you are basically setting via rgb, losing any existing hue and saturation if the rgb value is grayscale.

    If you want to change the hsl color to white from code while maintaining the hue and saturation, you should do:
    Code (CSharp):
    1. var hsl = colorpicker.hsl;
    2. hsl.L = 1;
    3. colorpicker.hsl = hsl;
    And when looking at the box not showing the hue, I'm not sure whether you agree or not but this is actually the correct behavior of that component, the gradient shows you the resulting color if you would set the slider to that value.

    And because if you set saturation to 0 in hsl, the color basically turns grayscale and the hue is ignored, that is why the box on the left is a gradient from white (light = 1) to black (light = 0). If you then move the slider around, you'll see that your resulting color matches the color of both the box and the slider

    And because light is currently set to 1 in your example, no matter the saturation, you'll end up with a white color.

    You can however change this behavior by setting the channels that are not displayed by the GradientBox component (saturation in your example) to a fixed value (1 would make sense in this current image) so that it displays the GradientBox as if the Saturation is 1. You could do this by setting the FixedValue3 of the GradientBackground2D (base class of GradientBox) to 1 if ValueType3 is not saturation. (this would be the same as checking the 'Fixed HSL_S' checkbox in the GradientBox inspector in that specific situation)

    I do something similar inside GradientBackground.SetToDefaultType where I lock the saturation and value/light for the hue sliders.

    I'll add a similar SetDefaultType method to the GradientBackground2D in the version I'm currently working on. So that using that method automatically sets the 'fixed' value to a value that makes the background more 'user-friendly' when displaying a hue in the default color picker. (probably optional as I don't want to break any existing ones)
     
  24. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    I just submitted a new version (1.0.6) for review,

    I expect it to be approved and available on the asset store within a few days

    This version contains the ability to Create Color Swatches/Presets. Similar to the one available in the colorpicker in the unity editor.

    If anyone encounters any problems with the new presets or would like to see any other features added or improved, please feel free to ask here or via email.


    Things I'm still working on which are not (yet) available in this version:
    - a tmp-version of the default color picker prefab
    - New demo scene specifically for the DefaultColorPicker V2
    - An updated version of the options demo scene so that it demos the added presets
    - An updated version of the WebGL demo so that it uses these updated demos


    @makaka-org I've chosen to not move the ColorPicker script to the root. The reason why I didn't do this is because this demo is there for multiple purposes, one of them being a quick way of adding a fully working colorpicker to your project, another one being a reference for people wanting to create a custom colorpicker. For this reason I wanted to separate the ColorPicker from the Draggable Window itself in a very clear way. Looking at your point about it being annoying in code however, In this version I added the 'ColorPickerWindow' script to the root, which replaces the PopupWindow script on the DefaultColorPicker. PopupWindow.Open is also made generic so that it can return the ColorPickerWindow directly. This way, accessing the ColorPicker from code should be easier. As I mentioned above, I intend to create a demo scene that shows how to use this in a future update.
     
    makaka-org likes this.
  25. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    Awesome. I don't need Draggable Window.
     
  26. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    Your asset is used in my project now to change color of texture on face in real-time: AR Masker app.

     
  27. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    Hi What about the next update?
     
  28. xzqsr

    xzqsr

    Joined:
    Feb 24, 2017
    Posts:
    3
    Hi troien, I just bought this. It's just what I need and works great! Really nice asset and many thanks to you.


    However, only one question is, an exception is thrown when I use ColorEyedropper. The exception string might look like this:
    [d3d11] attempting to ReadPixels outside of RenderTexture bounds! Reading (891, 65, 892, 66) from (717, 322)
    and it only happens in editor when the mouse position is on the right of or above the (windowed) display area in play mode.


    I tried to fix it and found a solution helped: Modify ColorPicker\Scripts\UI\ColorEyedropper.cs like this:
    Code (CSharp):
    1. ... // Line 111
    2. Vector2 mousePosition = Input.mousePosition; // Line 112
    3. //if (mousePosition.x >= 0 && mousePosition.y >= 0) // Line 113 (Original)
    4. if ((mousePosition.x >= 0 && mousePosition.x < Screen.width) && (mousePosition.y >= 0 && mousePosition.y < Screen.height)) // Line 113 (Modified)
    5. { ... }
    and then ColorEyedropper works without any exceptions.


    Expecting next new version of this awesome asset and hope you fix this bug on next update! :)


    Regards
     
    Last edited: Feb 5, 2021
  29. troien

    troien

    Joined:
    Jan 15, 2013
    Posts:
    18
    Hi,

    Sorry for my absence, I've been rather busy with other things the past couple of weeks. Which are practically finished by now meaning I have more time to work on this again :) I'm planning to continue working on this in the upcoming week.

    @xzqsr Thanks for reporting this issue and a potential fix. this issue might have something to do with the known issue listed in the manual which also happens only in Edit mode. I don't recall it throwing errors though. I'll look into it.
     
    makaka-org likes this.
  30. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,004
    Hi, gradient box switcher still doesn't have TMP version

    Also, Default Color Picker scene throw null exception for buttons click on the left
     
    Last edited: Aug 13, 2022