Easy 1D Color Picker

Resources Community Resources
, ,
#11

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 :
https://www.roblox.com/library/6203172933/Color-Picker

37 Likes
Part Painting System!
#12

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

#13

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

1 Like
#14

Thanks it worked out perfectly!

#15

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
#16

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

6 Likes
#17

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
#18

Thank you! You are in my game credits!
dispeller

2 Likes
#20

wow, thanks, this will help my game soo much

1 Like
#21

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

1 Like
#22

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.

#23

Any possible way? yes
Will I do it for you? i’m busy atm, so probably no

#24

That’s fine lol

I’ve already tried many times, can’t figure a way.

#25

Is it possible to add this GUI to tool or key bind for change the lightsaber outer blade and inner blade colors?

#26

how do i get the color3 that the user has choosen

#27

The easiest way would be to get the BackgroundColor3 of the ColorShower frame.

#28

Is it possible to make it worked with lightsaber blade?

#29

You could. Just make it get the background color of the slider. Then make it change the lightsaber’s color to whatever the background color of the slider is. Every time it changes using the .Changed event.

1 Like
#30

This! Anyone have any tips to reverse-engineer the color slider so that we can set the RGB values and the sliders will adjust accordingly?

#31

Ehhh there’s probably a more efficient way to do this, but here’s a way to do what you want:

color picker set color method.rbxm (6.3 KB)

Something to note is that the slider doesn’t contain any colors that
a. you haven’t added
or b. aren’t obtainable by tweening between the colors you’ve added

So you have to ask yourself:
What if you had a color picker like this, and you tried to set the color red?
image

The answer is that you can’t.
The method I’ve included in this post works by cutting the color bar into 510 sections and selecting the section that is closest to the color you’ve asked for. If the color you’re trying to set doesn’t exist on the bar, it’ll select whatever’s closest in terms of RGB. Also, the set color won’t be precise. It might be off by a marginal percent.

(It might not be a good idea to spam the setToClosestColor function, but computers are reasonably fast at things like this, so you should be fine.)

TLDR:

  • If the color doesn’t exist on the bar, it’ll set it to the closest thing
  • The set color will likely be marginally off, but players shouldn’t notice a difference
  • It’s not recommended to spam the setToClosestColor function
  • There might be a more mathematical/efficient way to do this, but this should be fine
1 Like