Easy 1D Color Picker

UiColorGradient
With the introduction of the UIGradient object, we can now create efficient UI gradients.

I’ve seen some cool color pickers on here, but most have a few drawbacks.
So I thought: Why not make a nice, open sourced, easy to use color picker?

Many of them don’t allow the user to select a gradient, only a solid color. Some of the more advanced color-picker methods use a pre-generated decal and calculate the color by looking at the mouse’s relative X and Y cords. While this is clever, it’s not super easy to do this with anything other than a rainbow. (The one I remember also required you to credit the author.) No one wants to bother with generating their own decal either. (unless you’re trying to learn, in which case I’d recommend using JavaScript)

Enter UiGradient Color Picker!

An easy and efficient way to add a color picker into your project.
Any gradients you want, all the colors you want, none of the complexity you don’t want.

Here are 6 different examples of some things you can achieve:

To edit the gradient, you simply edit the UiGradient’s color sequence.
image
image

It even works on mobile!

You can use this for anything from skin-color selection, to hair color, to eye colors, to building colors.
The sky’s the limit.

(Personally, I will be using this for the character creator in my game Whisperbit)

It works by using this "getColor" function I wrote.
function getColor(percentage, ColorKeyPoints)
	if (percentage < 0) or (percentage>1) then
		--error'getColor percentage out of bounds!'
		warn'getColor got out of bounds percentage (less than 0 or greater than 1'
	end
	
	local closestToLeft = ColorKeyPoints[1]
	local closestToRight = ColorKeyPoints[#ColorKeyPoints]
	local LocalPercentage = .5
	local color = closestToLeft.Value
	
	-- This loop can probably be improved by doing something like a Binary search instead
	-- This should work fine though
	for i=1,#ColorKeyPoints-1 do
		if (ColorKeyPoints[i].Time <= percentage) and (ColorKeyPoints[i+1].Time >= percentage) then
			closestToLeft = ColorKeyPoints[i]
			closestToRight = ColorKeyPoints[i+1]
			LocalPercentage = (percentage-closestToLeft.Time)/(closestToRight.Time-closestToLeft.Time)
			color = closestToLeft.Value:lerp(closestToRight.Value,LocalPercentage)
			return color
		end
	end
	warn('Color not found!')
	return color
end

You feed it a percentage (a decimal between 0 and 1), then a list of ColorKeyPoints (UiGradient.Color.Keypoints), and it returns the expected color gradient in-between any given colors.

(I used it to create this Color Picker, but you can use it for other things too, like easy visual-color lerping)

Get it here:

Feel free to credit me if you want to be nice, but you don’t have to.

102 Likes

Looks awesome! Does this work with SurfaceGui?

No, but it does work on mobile!

The included GUI uses screen mouse X and Y pixel locations, so it won’t work for SurfaceGuis out of the box.

1 Like

Aw, that sucks. Still an awesome resource though!
How long did it take?

1 Like

An hour or two.
There was a small bug that was driving me crazy.
Fixed by typing a single world. A good half an hour of my life I’ll never get back though lol

If you have any personal questions, please PM me instead of posting it here.
Let’s keep this post open for bug reports and suggestions for improvements.

4 Likes

Hey, this might be a late reply but I was wondering how to convert the color variable to RGB? Because the color variable returns the expected color gradient in between any given colors and not the RGB value of the color chosen.

1 Like

If you’re trying to get the Red Green and Blue values of any Color3 value, you can simply do

Red = Color.R*255
Green = Color.G*255
Blue = Color.B*255

print(Red,',',Green,',',Blue)

https://developer.roblox.com/en-us/api-reference/datatype/Color3

1 Like

This is an amazing open source resource! I wanted to make a character creator gui but wanted to make it very customizable, and this is perfect! (I also like the fact that you can change the colors using ui gradients!)

1 Like

This is really good!
I used it in this little project I have been working on:
Amzing
It works perfectly!

Thank you.

9 Likes

I added onto your Color Picker GUI and added a custom input and added a second bar below the rainbow bar to make the color darker. I also made the GUI rounded.

Update : I added a little bit of white behind the pink on the top bar

image
When you change the color of the top bar, it changes the UIGradient color of the bottom bar like this:
image
Here’s the model if you want to copy it :

25 Likes

How can I make it so that I can select different shades of white? At first it is there on the bottom, but once I drag the slider on top, there is no way of getting the white to black gradient on the bottom. I hope it make sense

You could try editing the top gradient to include the White color.

1 Like

Thanks it worked out perfectly!

Is there any plans to have this Color Picker support selecting like a very light color?

It seems if the second ‘satuation’ bar could go to ‘white’ would help selecting a more accurate color between white, light blue, blue, darkblue, black.

Edit: Seems like it was easy to manually support this by adding another color into the Bottom ColorSequence.

Line 52, ColorPickerLocalTop

local Color = ColorSequence.new{
	ColorSequenceKeypoint.new(0,Color3.fromRGB(255,255,255)),
	ColorSequenceKeypoint.new(0.5,getColor(xPos,ColorKeyPoints)),
	ColorSequenceKeypoint.new(1,Color3.fromRGB(0,0,0))
}

Edit: Noticed you needed to use ColorSequenceKeypoint to define where to set the colors.

2 Likes

If you are interested, at dat.GUI I have implemented a Color Picker and the source code is available on github. At the moment it does not work on mobile (it was not the initial goal of the lib), but it can be useful for the evolution of your component, which is getting very nice.

image

dat_gui_color

4 Likes

Great job, thank you! One suggestion is to add a SetColor() method which sets the color panel on the left as well as the picker bar location.

1 Like

Thank you! You are in my game credits!
dispeller

2 Likes

wow, thanks, this will help my game soo much

1 Like

This is probably really good if you want the players customize the lighting by themselves!

2 Likes

Extremely late to this.

Any possible way to convert this into a SurfaceGUI? Since you indicated it does not work on these, but I need it like that.