Color Picker [free and open source]

Resources Community Resources
,
#1

Hello Developers,

I’ve recently created a color picker for my 2D Perlin Noise Visualizer, and rather than letting it collect dust, I’m making it open source!
It is really simple to use there are a few examples in the video.
you can find the most recent version here.

I have since updated the color picker and added an eye dropper feature.
You can still find the old version at the bottom of the post.

Documentation

Limitation of the eye dropper feature
  • Because it returns BasePart.Color or GuiObject.BackgroundColor3 trying to pick the color of partially transparent parts or gui elements could be inaccurate.
  • UIGradient instances are not supported and will instead return it’s parent’s BackgroundColor3.

Constructor

ColorPickerModule.new(): colorPicker
Constructor to create a new ColorPicker object.

Events

ColorPicker.Opened
Fires when the color picker is opened.

ColorPicker.Closed
Fires when the color picker is closed.
Parameters:

  • canceled (boolean): Returns true if the color picker was closed using the cancel button or the :Cancel() method.

ColorPicker.Changed
Fires when the color selection changes.
Parameters:

  • updatedColor (Color3): The color it was changed to.

Methods

ColorPicker:Start()
Opens the color picker.

ColorPicker:Cancel()
Closes the color picker.

ColorPicker:SetColor(color: Color3)
Sets the color of the color picker.

ColorPicker:GetColor(): Color3
Returns the current color of the color picker.

ColorPicker:Destroy()
Destroys the color picker.

Feel free to use this color picker however you want. Use it into your projects, sell it, modify it, or use the code as a learning resource!
If you use it in your project, I’d love to hear about it, so feel free to message me!

That’s about everything! I would love to hear your feedback!

Old version

you can find the old version here.
(if this version still has bugs I won’t be fixing them.)

Documentation

Constructor

ColorPickerModule.new(): ColorPicker
Constructor for creating a new ColorPicker object.

Events

ColorPicker.Opened
Fires when the color picker is opened.

ColorPicker.Closed
Fires when the color picker is closed.

Parameters
  • selectedColor (Color3): The color selected when the color picker is closed.
  • confirmed (boolean?):
    • true when closed with the ‘OK’ button.
    • false when closed with the ‘Cancel’ button.
    • nil when closed using the :Close() method.

ColorPicker.Changed
Fires when the color selection changes.

Parameters
  • updatedColor (Color3): The updated color during color selection.

Methods

ColorPicker:Start()
Opens the color picker.

ColorPicker:Cancel()
Cancels the color selection and closes the color picker.

ColorPicker:SetColor(color: Color3)
Sets the color of the color picker.

ColorPicker:GetColor(): Color3
Returns the current color of the color picker.

ColorPicker:Destroy()
Destroys the color picker.

38 Likes
#2

I tried to do this by my own and failed… I got this way too late :C
Anyways, its usefull :+1:

6 Likes
#3

You might want to put a # in front of the hex color in the HTML bar. I did that with my game too. But other than that it’s really great. I’ve been looking for this for a few weeks now.

2 Likes
#4

works perfectly but after player die, the color picker wont open anymore

2 Likes
#5

It should be fixed now. Thanks a lot for pointing that out.

#6

This is very interesting, you can do a lot with this.

#7

Hi, how could I implement an Eyedropper in that system?

#8

That is a very good question!
I have just updated it and the new version now has an eye dropper feature.
You can find it here
https://create.roblox.com/store/asset/129330374348223/ColorPicker

If you’re going to use it and experience any issues make sure to let me know and I will fix them.

#9

image
image1604×560 47.7 KB

I dont have permission to access

2 Likes
#10

it should be public now.

chars

#11

Thanks! I don’t know if it is also prepared to work with imagebuttons or imagelabels. Does it works with that? or with textures too

#12

no it currently doesn’t it only works with the base color of parts and the BackgroundColor3 of gui elements. Having it work for textures or images would make it a lot more complex but it should be possible.

#13

Okay thanks so much, do u know how could i implement that? or if it is any topic talking about something similar?

#14

For an imageLabel the first thing i could come up with is to convert the image to an EditableImage. Then, calculate the mouse’s local coordinates relative to the ImageLabel and use those coordinates to get the color of the corresponding pixel in the EditableImage.

I hope I explained that in a way that makes sense.
It seems like an interesting challenge but not something i currently have time for.

1 Like
#15

thanks! i will see more. characters