This module is a complete redesign of my previous module with more features
An advanced module with multiple features such as:
- Two color spaces (RGB and HSV)
- Three picker shapes (Circle, Square, Triangle)
- Interactive sliders for every value
- Transparency / Opacity Support
- Hex support
- Undo and redo buttons
All in a small and user friendly window that allows your players to pick colors with ease
Module is available on Roblox: https://create.roblox.com/store/asset/104339729813105
Code examples are included farther down the post
Methods
ColorPicker.new(parameters?)
Constructor function
More information on parameters below
ColorPicker:SetColor(color: Color3)
Sets the color of the color picker
ColorPicker:GetColor(): Color3
Returns a Color3 value that is currently selected
ColorPicker:GetHSV(): number, number, number
Returns hue, saturation, value
ColorPicker:Destroy()
Deletes the window
ColorPicker:SetPickerMode(PICKER_MODE)
Changes the current picker mode and updates interface
Use the index ColorPicker.PICKER_MODE
e.g. ColorPicker.PICKER_MODE.Square
ColorPicker:SetColorSpace(COLOR_SPACE)
Changes the current color space and updates interface
Use the index ColorPicker.COLOR_SPACE
e.g. ColorPicker.COLOR_SPACE.RGB
ColorPicker:SetTransparency(number)
Transparency must be enabled to use
Sets the transparency of the color picker (parameter must be between 0 and 1)
ColorPicker:GetTransparency(): number
Transparency must be enabled to use
Returns the transparency of the color picker
ColorPicker:WriteHistory()
Records the current color, allowing the user to return using the undo and redo buttons
Automatically called from ColorPicker:SetColor()
Bindable Events
ColorPicker.ColorChanged → (color: Color3, transparency: number?)
Fires when color changes from user input
When transparency is enabled, a second parameter will be passed
ColorPicker.WindowClosed
Fires when the user closes the window
Code Examples
To begin, call the .new() constructor function
To customize the color picker, pass a table containing parameters into the constructor function.
local self = ColorPicker.new({
Parent = gui,
Position = UDim2.fromOffset(200,200),
ZIndex = 4,
PickerMode = ColorPicker.PICKER_MODE.SQUARE,
ColorSpace = ColorPicker.COLOR_SPACE.RGB
})
List of all parameters:
| Name | Data Type | Default* |
|---|---|---|
| Parent | ScreenGui | Creates new ScreenGui, deleted when window is closed |
| Position | UDim2 | Mouse position |
| ZIndex | number | 1 |
| Scale | number | 1 |
| PickerMode | - | ColorPicker.PICKER_MODE.Circle |
| ColorSpace | - | ColorPicker.COLOR_SPACE.HSV |
| EnableTransparency | boolean | false |
*Default value / functionality when not defined in parameter table or no parameters given
Two bindable events will be created, ColorChanged and WindowClosed
local self = ColorPicker.new({Parent = gui})
self:SetColor(frame.BackgroundColor3)
self.ColorChanged:Connect(function(color: Color3)
frame.BackgroundColor3 = color
end)
self.WindowClosed:Connect(function()
print("Window closed by user")
end)
Transparency / Opacity
To add transparency / opacity, set the EnableTransparency parameter to true
When transparency is enabled, a second parameter will be passed in ColorChanged
Additional methods:
ColorPicker:SetTransparency(number)
ColorPicker:GetTransparency(): number
local self = ColorPicker.new({Parent = gui, EnableTransparency = true})
self:SetColor(frame.BackgroundColor3)
self:SetTransparency(frame.BackgroundTransparency)
self.ColorChanged:Connect(function(color: Color3, t: number)
frame.BackgroundColor3 = color
frame.BackgroundTransparency = t
end)
User Interface
- Change picker mode by clicking the three shapes to the right of the picker
- Toggle color space by clicking the button to the right of the color preview
- Individual values such as hue and saturation can be changed using the sliders, or by inputting a value to the right of the slider
- Click and hold undo / redo button to quickly repeat action
- Reposition window by dragging topbar
- Rescale window by dragging right side of window or in info panel (three dots in the top right)