[OLD] Circular Color Picker (v1.2)

This module has been rewritten and is now on a new post

New post: Circular Color Picker

Original post

For many developers, there is no way to use the built in Roblox Studio color picker for plugins and games, leaving them to make their own. And to save time, they are often very basic, leaving users and even the own developer struggling to get the right colors. So I went out of my way to make a modern, functional, and customizable circular color picker.

This plugin is completely open sourced and you may look inside the code and tweak it for your needs, and you can put it in as many games and plugins as you need. No credit is needed but it would be really nice if you do give credit :slight_smile:

v1.0.1 - Added hexadecimal
v1.1 - Bug fixes, mobile support, and parameters/customization
v1.2 - Multiple bug fixes

Model: [OLD] Circular Color Picker - v1.2 - Roblox

Video below was recorded in v1.0.1

Example:
circular_color_picker.rbxl (66.5 KB) Don’t download module from here
Video:

How to use this module:

local Color = require(...)

--Create new Color object using New function
local self = Color.New(gui : ScreenGui, mouse : PlayerMouse, params : table [optional])

--Change color [optional]
self:SetColor(Color3.new(0, 0, 1))

--Events (Finished, Updated, and Canceled)
self.Finished:Connect(function(color : Color3) 
	--Fired when player clicks the confirm button
end)

self.Updated:Connect(function(color : Color3) 
	--Fired every time the color changes
end)

self.Canceled:Connect(function()
	--Fired when the player clicks the cancel button
end)

--Destroy if needed
self:Destroy()

The third parameter in the New function allows you to customize the UI and functionality of the color picker

Color.New(gui, mouse, {
    Position: UDim2 [default is at mouse pos offseted by (16px, 16px)]
    Draggable: boolean [default is true]
    RoundedCorners: boolean [default is true]

    PrimaryColor: Color3 [background color]
    SecondaryColor: Color3 [textbox color]
    TopbarColor: Color3
    TextColor: Color3
})
113 Likes

Seems nice, consider showing a video of it in action though. I think people would prefer seeing a video showcase instead of having to download it and check it out for themselves.

1 Like

Thanks for reminding me, I did have a video of it but forgot to include it.

2 Likes

Is this open sourced (requires no licence or anything)?

Yes, you may use this in any of your plugins or games, and no credit is needed but it would be nice if you give credit. :slight_smile:

1 Like

Really nice looking module! Though, I do wonder if you’ve added support for hex values?
Sometimes, I use Hex values from things like paint.net when I colorpick from certain games, and say if I were to create a drawing game where I supposedly want to paste hex values from part of a color palette I eyedropped; i.e:
image

Would I be able to do so?
Otherwise, the RGB and HSV stuff is pretty neat.

3 Likes

I just added hex values to the newest version (v1.0.1).

6 Likes

This is a great resource. I’m working on a game that needs a color picker, so this will help me out a lot. Thank you!

Does this work for mobile?

_

Mobile support has been added to versions v1.1+

1 Like

okay thanks

:smiley:

Maybe make a Tutorial video so also beginners can use it, actually im not a beginner in scripting but i have no clue how it works.

edit:
Oh and sorry for wrong ping, just noticed uour not the creator of it.

4 Likes

Quick question: I used this a few days ago and noticed every time you click the button in the test place to change the frame color, it just creates a new color picker, even if you already have one open. Is this intentional?

The example or module has no check if a color picker is currently active, but you can easily make a check yourself and reset it after the canceled to finished event fires.

1 Like

Thanks, and yes I have implemented a check.

Hey, I noticed that when you go all the way to black in the Value bar it sets the Hue and Saturation to 0, causing the color to be monochrome, even when you move the Value bar back up.

Here’s a video showcasing the issue.

3 Likes

This should be fixed in the new release (v1.2)

1 Like

Hey, how can I make this change the color or a part? (mesh to be specific)

Hey, so in the LocalScript, under self.Finished, you’re going to want to point to the part (eg. workspace.Part.Color = color) and that’s basically it, let me know if you have any problems. :wink:

Probably best to do it for all the functions, self.Finished, self.Canceled and self.Updated. :slight_smile: