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
v1.0.1 - Added hexadecimal
v1.1 - Bug fixes, mobile support, and parameters/customization
v1.2 - Multiple bug fixes
Model: 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
})