RGB UI Color Slider

Hey, guys!

So I am just doing some research on creating a color slider, something like this:


People would just slide the button to the color they want and then the color would preview the selected color.

I hoped if someone could steer me in the right direction of creating something like this because I cannot find anything useful on Google…

Thanks anyway!

You could use a UI Slider with :

  • the image of your Hue bar as a background

  • A min value of 0, a max value of 1

  • A listener to the onValueChanged event setting the color of your handle as follow (code not tested)

    // Drag & drop slider
    public UnityEngine.UI.Slider slider ;

    // Drag & drop handle
    public UnityEngine.UI.Image handle ;

    public void Start()
    mySlider.onValueChanged.AddListener(delegate {ValueChangeCheck(); });

    // Invoked when the value of the slider changes.
    public void ValueChangeCheck()
    handle.color = Color.HSVToRGB(mySlider.value, 1, 1);

you can display your picture of the slider with a UI. then use texture2d.getpixel from your calculated mouse position to get your color!!! here is a quick example:

	// drag your picture of the slider into the next variable
	// the import settings of your image must be set for read/write enabled 
	// under import settings of the image in the inspector select advanced
	// then tick read/write enabled
	public Texture2D myslider;
	public Texture2D picked ;
	public int x = 20;
	public int y = 20;
	public int h = 50;
	public int w = 400;
	public Color select = Color.black;
	void Start(){
		picked = new Texture2D(1,1);
	void Update(){

		if (Input.GetMouseButton(0)) {
			float MX = Input.mousePosition.x;		
			float MY = Screen.height - Input.mousePosition.y;

					float ratiox = (float)myslider.width/(float)w;
					float ratioy = (float)myslider.height/(float)h;
					int getx = Mathf.FloorToInt((MX-x)*ratiox);
					int gety = Mathf.FloorToInt((MY-y)*ratioy);
					gety = myslider.height-gety;
					select = myslider.GetPixel(getx,gety);
	void OnGUI(){
		GUI.DrawTexture (new Rect (x, y, w, h), myslider);
		GUI.DrawTexture (new Rect (200,200,50,50), picked);