Circular Color Picker - v1.2

A simple, modern and customizable circular color picker, with hexadecimal and HSV support.
This module is a complete rewrite of a previous module, now with less bloat and cleaner code.

You are free to use and modify this module for your needs, credit is appreciated.

v1.1 - Added size parameter and fixed SurfaceGui bugs
v1.2 - Added DockWidgetPluginGui support

Model: https://create.roblox.com/marketplace/asset/14664688677/Circular-Color-Picker
Demo: color_picker_demo.rbxl (80.6 KB) Don’t download module from here

local Color = require(...)

-- Create new Color object
-- Second parameter is a list of parameters, not required

local ColorPicker = Color.New(gui : ScreenGui, {
	Position : UDim2,
	RoundedCorners : boolean,
	Draggable : boolean,
	ZIndex : number,
	Size : number,
	
	Primary = {Color : Color3, Transparency : number},
	Secondary = {Color : Color3, Transparency : number},
	Topbar = {Color : Color3, Transparency : number},
	Text = {Color : Color3, Transparency : number}
} : table)

-- Change color
ColorPicker:SetColor(Color3.new(0, 0, 1))

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

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

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

-- Destroy if needed
ColorPicker:Destroy()
49 Likes

I still have the same issue as before with the picker being behind everything else.
Here’s a screenshot:
RobloxScreenShot20230902_203426302

4 Likes

Set the DisplayOrder of the ScreenGui you are creating the Color Picker under to a higher number then the ScreenGui(s) that are overlapping.

Edit: If they are in the same ScreenGui, then edit the module to change the main frame’s ZIndex.

5 Likes

guys i have seen this color picker before it was a free model or something that is kinda buggy so i don’t think we can do much about it since the color picker owner only knows what the script does etc because he made it himself

1 Like

I guarantee you the random free model you found in the toolbox has nothing to do with this

5 Likes

Try using the new ZIndex parameter.

1 Like

I have a bug where part of it is cutoff and will not appear, how would I fix this?
image

Nevermind, it turns out my ScreenGui has to have the ZIndexBehavior set to Sibling

Amazing module, saved me from hours and hours of work and calculations!

Would this work with my own gradient image, or does it only work with the regular image? I want to use this for a skin color changer.

How would I destroy it from another script?

The image has no effect on the color picker besides for visuals, you may change it but it has the be rotated like the original image. (red on the left going counter-clockwise)

You can store the object in a module script to be referenced in another script.