In-Game Colour Picker - Unity Tutorial

[@Javyy93]

Great tutorial! After a ton of time wondering why the picker was snapping to the top of the SVPanel when clicking, it was because i had my canvas set to "Screen Space - Camera" instead of "Screen Space - Overlay".

[@demonicmind1242]

If your Hue slider is black then change the Value in Color.HSVtoRGB from 0.05f to 1

[@vk3571]

it was black,but when i changed it to 0.05f to 1 ,the hue slider is all white now.

[@makeru4024]

@@vk3571 I'm having the same problem. Did you manage to solve it?

[@bisewski01]

Same issue...Only black...

[@peterlewis2745]

Worked for me, after I changed the value from 0.05f to 1 in the CreateHueImage function in ColorPickerControl.cs: hueTexture.SetPixel(0, i, Color.HSVToRGB((float)i / hueTexture.height, 1, /*0.05f*/ 1));

[@fernandonietomorales1949]

Tysm it worked for me

[@ThingsMadeOfOtherThings]

Exactly what I was hoping to find! Thank you so much for uploading this ❤

[@mateosoriortes]

I like this tutorial but in the SVIMageColor.cs you can change from the line 36 to the line 52 to: pos.x = Mathf.Clamp(pos.x, -deltaX, deltaX); pos.y = Mathf.Clamp(pos.y, -deltaY, deltaY);

[@michaelsengelbrecht]

Thank you very much! This was extremely helpful and insightful! Been struggling to make a colour picker for a few days now.

[@bakerfx4968]

Glad I could help! Are there any other systems you’re struggling to implement? Trying to decide if I should continue with tutorials or not

[@BrainSuspendedInFluid]

This is an excellent tutorial and I learned a lot of new things. Thank you BakerFX

[@louisdegit9081]

It worked perfectly, thank you so much that was exactly what i needed!

[@dermarciman]

Thanks a lot, very good tool and exactly what I was looking for.

[@bakerfx4968]

You are welcome!

[@nikorinmp]

I was surprised to see you had 14 subs I thought I was watching a 100k subs youtube channel :o That said, I need help... I followed the tutorial step by step, but the "Picker" seems to have some sort of an offset. For it to work, I need to drag the mouse outside the box, near the Inspector UI for it to change the SatVal. Trying to debug it, I disabled the position snapping part of the code described at 7:50 and tried again. When I click to pick a colour, the knob disappears. Well, I zoomed out the scene and found the knob really far away from the canvas. I triple checked the Anchoring points for each object. I can't find what I'm doing wrong. It's really sad because the result started looking really professional.

[@bakerfx4968]

Hey! Glad you liked it! Let’s see if I can help, although it’s been a while since I looked at this code lol I just want to make sure you’ve taken note of the - in front of some of variables there in the clamping section Otherwise what I would suggest is to print out a few of those variables in Debug.Log to see what values they’re giving. Unity might have changed something in the UI since this video was out as well so if needed I’ll recreate it and try and figure out what’s wrong

[@bakerfx4968]

Did you have any luck?

[@nikorinmp]

​@@bakerfx4968 I tried doing the Debug.Log(); to try and figure out what's going on, but I think I'm just not used to Unity or C# enough to understand what's going on. I decided to code the rest of my program and coming back to this later... I'm going to try to describe the problem one more time in case that could give you an idea of what might be causing the issue. Since I have no idea ^-^' I opened the project today and the knob snaps to the corners of the SatVal box. It feels like the position where my cursor clicks doesn't correspond to what the "Game" window shows. To be able to change the SatVal, I need to hold the click and drag the mouse outside the "Game" window. After finding the spot, which seems to be near the bottom right of the "Game" window, I can see the Knob moving around and it changes the colour correctly. It also feels like something is out of scale. When the Knob actually moves, it's not 1:1. The Knob is certainly more sensitive. If I move the mouse a bit, the Knob moves like 3 or 4 times the distance I did with my cursor. If I were to disable the code that keeps the Knob between the bounds of the Box, when I click the box, the Knob flies away. It disappears from view and to find it I need to zoom out the camera a lot. I think there's something causing an offset, but I can't figure out what it is. I don't know if it changes anything, but I'm doing my progarm on portrait orientation, since it's meant to be used on phones. (Android) My unity version is 2023.3.30f1

[@nikorinmp]

I was meant to say, I hope it doesn't give you much trouble if you are planning on recreating the code...

[@bakerfx4968]

@@nikorinmp hey before I do that can you just confirm for me that you’ve done the step at @2:17 in the video? I think that’s where your error is if you’ve used all the same code I had and me re-doing the project wouldn’t fix that!

[@OKgamedev]

Hey! I'm not sure if I just did something wrong, or if my setup was different than yours, but there seems to be an issue in the tutorial. At roughly 7:49 you used the sizedeltas of the rectTransform. My question is why? I fixed it pretty easy by just setting it to use the sizedeltas of the SVimage, but I'm stumped as to why the code was like this in the first place. unless your pointer is the exact same size as the SVimage, this doesn't work at all. Don't feel bad to tell me if I'm being stupid, thanks!

[@bakerfx4968]

Either should work as you’re just using it to clamp the picker inside the frame

[@josebernal7142]

anyone else notice at 5:33-5:44 the completely different code for the UpdateOutputImage() function

[@bakerfx4968]

Yep. Originally I had it changing a specific colour on my texture palette that was specific to my car. The different code at the end is significantly more generic for most materials

[@FrancaXDPRO]

Awesome tutorial, I have a problem the picker always snaps into the middle of the SvPanel, how do I fix this?

[@bakerfx4968]

My first thoughts would be to check where you’re clamping it inside the panel. Use debug.log to show the values it’s returning

[@nickfurysidekick]

Hi, I have one problem, it's that Sat and Value thing.. When I try to put it to a color nothing happens it does slide around but the color of the car doesn't change. Does any one know why? Hex input works properly tho

[@nickfurysidekick]

Nevermind, I fixed it lol. Thank you so much for this tutorial

[@yangez93]

Nice, this tutorial is very helpful :)

[@plazicx]

Great video! Thanks!

[@legitdigital8617]

Thanks for this tutorial. Everything seems to work, except for me, the Sat and Value (Big square in the middle with a gray scale) only shows the initial playmode’s white, black, & red. My hue panel on the right shows the rainbow it’s supposed to, but when I move it, it just resets the Sat and Value square to black, but is still limited to a just white, black, & red again. Can’t get any colors like blue or green to show up on my car object.

[@bakerfx4968]

Use some debug.log statements to see what values are being sent. And double check the code around where the texture gets created

[@legitdigital8617]

@@bakerfx4968I was able to get different hue colors applied by changing colorpicker.cs line 73 & 74. Which were currentSat = 0 & currentVal = 0. I changed those zeros into ones.

[@TheMarcusZ]

Hey! I know this is random but I saw your comment on a speed editor review, you said you already have the studio but want the editor, was wondering if you have purchased the speed editor and were willing to sell studio.

[@bakerfx4968]

Haha that is quite random! No I haven’t purchased the speed editor, sorry dude

[@kittipongyoonirundorn6236]

Do you have a project? or teach the first step (Teach from the beginning of the project(New project)) and step by step. Thank you.

[@bakerfx4968]

Hey! Most of the stuff in this tutorial is kinda geared towards people that already have a bit of an understanding in Unity. There are plenty of good videos to get you started with the UI in Unity already I don’t feel like it would be worth it for me to make one as well

[@Dara-gq6jl]

Nice video, one question what font is that, looks so good?

[@bakerfx4968]

If I’m being completely honest I don’t remember, I originally made all this over 2 years ago

[@Dara-gq6jl]

@@bakerfx4968 interesting lol, but anyways thank you

[@bakerfx4968]

@@Dara-gq6jl it’s either a knockout font or Bebas

[@sivasakthinataraj4447]

picker position not updating if we change color using input field. how to change that also

[@bakerfx4968]

I’ll load up the project later this evening and see what you need to do. It’s been a while since I even opened this project though. Do you think it’s worth me doing an update video about adding extra features?

[@banirolls]

does this work for 2d?

[@bakerfx4968]

Yes, it should. You’re basically just changing a colour variable so you could use this to change any colour in your game that you want the user to have control of

[@banirolls]

@@bakerfx4968 i figured it out, ty

[@ngworks.]

Im new to game development so this might be a bit of a dumb qeustion but does this work with 2d sprites to?

[@bakerfx4968]

Yessir. Basically you’re just getting a Color out of it so you can use the colour for whatever you want!

[@ngworks.]

@@bakerfx4968 ah okay great been looking for sometime and this one looks like it works the best for what I want, great work 🙏

[@daniionas2888]

how to save playerprefs the collor material?

[@bakerfx4968]

Hey! The simplest way would be to just use a playerprefs for the hue, saturation, and value numbers each separately. Hope that helps!

[@daniionas2888]

@@bakerfx4968 i dont know how Can you write code line here?

[@bakerfx4968]

@@daniionas2888 I personally don’t believe in just writing the code for people for simple things like player prefs. It’s heavily covered on KZbin and in the Unity documentation and you should have no problem figuring it out if you were able to copy down all the code from this video Get in the habit of checking out the documentation, that’s basically how I learned!

[@SGUDevs]

does it save after selecting color?

[@bakerfx4968]

@@SGUDevs not shown in the video but you can save the hue saturation and value info however you’d like!

[@Hyoiza]

I'm using this in a VR game and my Canvas Scaler does not work due to "Non-root canvas will not be scaled" as I have my colour picker as a child of other canvases. This caused some issues with recttransform and caused my picker object to fly around wildly. If anyone has the same issue, I fixed mine by changing UpdateColour() in SVImageControl.cs: void UpdateColour(PointerEventData eventData) { Vector2 localPos; // Convert screen position to local position within the SVImage RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, eventData.position, eventData.pressEventCamera, out localPos); float deltaX = rectTransform.sizeDelta.x * 0.5f; float deltaY = rectTransform.sizeDelta.y * 0.5f; localPos.x = Mathf.Clamp(localPos.x, -deltaX, deltaX); localPos.y = Mathf.Clamp(localPos.y, -deltaY, deltaY); float x = localPos.x + deltaX; float y = localPos.y + deltaY; float xNorm = x / rectTransform.sizeDelta.x; float yNorm = y / rectTransform.sizeDelta.y; pickerTransform.localPosition = localPos; pickerImage.color = Color.HSVToRGB(0, 0, 1 - yNorm); CC.SetSV(xNorm, yNorm); } And also replace line 24 with : pickerTransform.localPosition = Vector3.zero; Hope this helped

[@bakerfx4968]

Great to hear this even works (with modifications) in VR! Thanks for sharing

[@Hyoiza]

@@bakerfx4968 No, thank you for the clear tutorial!

[@pixeldrake9082]

This was super helpful thanks for sharing! Was encountering a similar issue due to (I think) using a word space canvas.

[@LucasTopp-v5m]

Hey dude, awesome vid, idk if you still respond to comment but i got an issue where the picker knob is super sensitive to movement and can be adjusted outside the box. I've trouble shot and triple checked the code but no obvious solutions are popping out at me. I've checked my anchors, pivots and code for obvious errors and ran through your vid at least 3 times. Any idea what's causing this?? I'll keep troubleshooting and let you know if i figure it out! :)

[@bakerfx4968]

Hmmm I’m not exactly sure what would be causing it. Does it ever get clamped? My thought is that maybe the position adjustment is being sent more than once. Throw a Debug.Log in for the picker location, it’s the best way to debug what’s going on. Once you know what it’s doing it’s easier to find out what’s wrong

[@LucasTopp-v5m]

@@bakerfx4968 thanks mate I'll see what i can do

[@LucasTopp-v5m]

@@bakerfx4968 okay, so I fixed the sensitivity issue but the issue where the placement of the picker on the SVPanel is offset by about half the SVPanel in both the x and y directions from the mouse is still occurring.

[@LucasTopp-v5m]

@@bakerfx4968 okay dude so I have been playing around with debug logs and it seems that the eventData positions from the OnDrag and OnPointerClick are not set to the origin of the picker (ie the centre of the SVPanel) but instead the bottom left corner of the screen, so when (0,0) is recordeded for event data at the bottom left corner the colour picker is at the centre of the SVPanel. In the mean time I've made a hatchet solution that simply adds the difference between the origin of the corner of the screen to the centre of the SVPanel but I'm sure it's just a setting or smth that i have to change. Any ideas on how to resolve it?? sorry for the spam.

[@bakerfx4968]

@@LucasTopp-v5m to me that sounds like a pivot problem in the inspector… assuming you have followed the code 100% because if I remember correctly there is a spot where I subtract half the width? I’m in bed now but I’ll rewatch the video tomorrow. If you have followed the code 100% and the pivot is set the same, you could just offset it in code by the difference… assuming the problem is consistent lol

[@elostolol0197]

i cant move the picker

[@bakerfx4968]

Hey thanks for following the tutorial. When asking for help try and give as much info as you can. All I can say to that response is that you must have missed some thing in the tutorial

[@thechasmas]

Kinda skipped a few steps brother

[@bakerfx4968]

Can you elaborate lol

[@umkhamba5216]

Bro really just rerecord this tutorial and stop leaving thigs out, stop having mistakes in your code and not addressing it and stop going at 1000mph when doing a tutorial, rather make a longer video then one that has 4fps

[@bakerfx4968]

What errors are you talking about? KZbin has a speed function you can use to slow down the video. You can also pause. I have no plans to re-record this tutorial as it’s almost 5 years old at this point and I would use the new Unity Ui toolkit

[@Negniwret]

@@bakerfx4968 "I have no plans to re-record this tutorial as it's very old and I'd do it differently nowadays" With all due respect, that's exactly why remaking it would be a good idea

[@bakerfx4968]

@@Negniwret I get what you’re saying, but it’s more because I haven’t even opened Unity in over a year lol

[@HOBOTROLL9000]

is there something wrong with my code because everything works expect applying the colour to the actual material using UnityEngine.UI; using UnityEngine; using TMPro; public class ColourPickerControl : MonoBehaviour { public float currentHue, currentsat, currentVal; [SerializeField] private RawImage hueImage, satValImage, outputImage; [SerializeField] private Slider hueSlider; [SerializeField] private TMP_InputField hexInputFeild; private Texture2D hueTexture, svTexture, outputTexture; [SerializeField] MeshRenderer changeThisColour; private void Start() { CreateHueImage(); CreateSVImage(); CreateOutputImage(); UpdateOutputImage(); } private void CreateHueImage() { hueTexture = new Texture2D(1, 16); hueTexture.wrapMode = TextureWrapMode.Clamp; hueTexture.name = "HueTexture"; for(int i =0; i < hueTexture.height; i++) { hueTexture.SetPixel(0, i, Color.HSVToRGB((float)i / hueTexture.height, 1, 1f)); } hueTexture.Apply(); currentHue = 0; hueImage.texture = hueTexture; } private void CreateSVImage() { svTexture = new Texture2D(16, 16); svTexture.wrapMode = TextureWrapMode.Clamp; svTexture.name = "SatValTexture"; for(int y = 0; y < svTexture.height; y++) { for(int x = 0; x < svTexture.width; x++) { svTexture.SetPixel(x, y, Color.HSVToRGB(currentHue, (float)x / svTexture.width, (float)y / svTexture.height)); } } svTexture.Apply(); currentsat = 0; currentVal = 0; satValImage.texture = svTexture; } private void CreateOutputImage() { outputTexture = new Texture2D(1, 16); outputTexture.wrapMode = TextureWrapMode.Clamp; outputTexture.name = "OutputTexture"; Color currentColour = Color.HSVToRGB(currentHue, currentsat, currentVal); for(int i = 0; i < outputTexture.height; i++) { outputTexture.SetPixel(0, i, currentColour); } outputTexture.Apply(); outputImage.texture = outputTexture; } private void UpdateOutputImage() { Color currentColour = Color.HSVToRGB(currentHue, currentsat, currentVal); for(int i = 0; i < outputTexture.height;i++) { outputTexture.SetPixel(0, i, currentColour); } outputTexture.Apply(); hexInputFeild.text = ColorUtility.ToHtmlStringRGB(currentColour); changeThisColour.GetComponent().material.SetColor("_BaseColor", currentColour); } public void SetSV(float S, float V) { currentsat = S; currentVal = V; UpdateOutputImage(); } public void UpdateSVImage() { currentHue = hueSlider.value; for(int y = 0; y < svTexture.height; y++) { for(int x = 0; x < svTexture.width; x++) { svTexture.SetPixel(x, y, Color.HSVToRGB(currentHue, (float)x / svTexture.width, (float)y / svTexture.height)); } } svTexture.Apply(); UpdateOutputImage(); } public void OnTextInput() { if(hexInputFeild.text.Length

[@bakerfx4968]

changeThisColour.GetComponent().material.SetColor(“_BaseColor”, currentColour); This is the line that changes the material to use the new colour. If your material is set up differently you might need to change how the colour is applied

[@ninjahaz0180]

Hey, don't know why but my HueTexture is getting put as black. I've checked my HueTexture code to yours multiple times but it doesn't seem any different? any thoughts private void CreateHueImage() { hueTexture = new Texture2D(1, 16); hueTexture.wrapMode = TextureWrapMode.Clamp; hueTexture.name = "HueTexture"; for (int i = 0; i < hueTexture.height; i++) { hueTexture.SetPixel(0, i, Color.HSVToRGB((float)i / hueTexture.height, 1, 0.05f)); } hueTexture.Apply(); currentHue = 0; hueImage.texture = hueTexture; }

[@bakerfx4968]

Try changing the 0.05f to 1

[@ninjahaz0180]

@@bakerfx4968 Genius!

[@ninjahaz0180]

@@bakerfx4968 hey sorry that I keep asking stuff, but i can't get the next thing to work public class SVImageControl : MonoBehaviour, IDragHandler, IPointerClickHandler { [SerializeField] private UnityEngine.UI.Image pickerImage; private RawImage SVImage; private ColourPickerControl CC; private RectTransform rectTransform; private RectTransform pickerTransform; private void Awake() { SVImage = GetComponent(); CC = FindObjectOfType(); rectTransform = GetComponent(); pickerTransform = pickerTransform.GetComponent(); pickerTransform.position = new Vector2(-(rectTransform.sizeDelta.x * 0.5f), -(rectTransform.sizeDelta.y * 0.5f)); } void UpdateColour(PointerEventData eventData) { Vector3 pos = rectTransform.InverseTransformPoint(eventData.position); float deltax = rectTransform.sizeDelta.x * 0.5f; float deltay = rectTransform.sizeDelta.y * 0.5f; if (pos.x < -deltax) { pos.x = -deltax; } else if (pos.x > deltax) { pos.x = deltax; } if (pos.y < -deltay) { pos.y = -deltay; } else if (pos.y > deltay) { pos.y = deltay; } float x = pos.x + deltax; float y = pos.y + deltay; float xNorm = x / rectTransform.sizeDelta.x; float yNorm = y / rectTransform.sizeDelta.y; pickerTransform.localPosition = pos; pickerImage.color = Color.HSVToRGB(0, 0, 1 -yNorm); CC.SetSV(xNorm, yNorm); } public void OnDrag(PointerEventData eventData) { UpdateColour(eventData); } public void OnPointerClick(PointerEventData eventData) { UpdateColour(eventData); } } the pointer is not working, and with the script on the Hue bar no longer moves either

[@beckyboy1]

So I have encountered two issues and I was hoping someone could help me with them. The first issue is that although the color picker updates the rectangle in the display. It will not update the color on my cube. I don't have any idea where this issue could be coming from. My second issue is from the end of the video when he added in the hex code stuff. I went through and did what he did, but for some reason I get this error message when I attempt to start the game UnityEngine.Mesh.set_bounds (UnityEngine.Bounds value) (at :0) TMPro.TMP_MeshInfo.Clear (System.Boolean uploadChanges) (at ./Library/PackageCache/com.unity.textmeshpro@3.0.6/Scripts/Runtime/TMP_MeshInfo.cs:463) TMPro.TextMeshProUGUI.GenerateTextMesh () (at ./Library/PackageCache/com.unity.textmeshpro@3.0.6/Scripts/Runtime/TMPro_UGUI_Private.cs:3564) TMPro.TextMeshProUGUI.OnPreRenderCanvas () (at ./Library/PackageCache/com.unity.textmeshpro@3.0.6/Scripts/Runtime/TMPro_UGUI_Private.cs:1670) TMPro.TextMeshProUGUI.ForceMeshUpdate (System.Boolean ignoreActiveState, System.Boolean forceTextReparsing) (at When I click it, it opens a TextMeshPro script which I have no interest in messing with because I don't want to break anything.

[@bakerfx4968]

For your first issue it’s just a matter of using the colour however you want. The example just grabs the material off the cube and changes it. You might have to figure out how your material is set up if it isn’t working how I did it, that or unity has changed something. For the second issue I have no clue but it doesn’t seem to be an error with the code but rather how you’ve set up the text input for the hex code

[@beckyboy1]

@@bakerfx4968 I'm looking over the way you set up your material and the set up look

[@QuielXd1]

I have the first issue too and i don't know how to solve it

[@beckyboy1]

@@QuielXd1 just wanted to let you know that I never figured out how to do it. I just gave up

[@bakerfx4968]

@@QuielXd1 basically the function just gives you a colour to use. It’s up to you how you use it. If you’re using a different material system you might need to figure out how to change the materials colour by script first, then implement that to change the colour with the colour picker