Advanced color / colour picker module with features such as:
- Three picker shapes (Circle, Square, Triangle)
- Two color spaces (HSV and RGB)
- Interactive sliders and inputs
- Transparency / Opacity support
- Hex support
- Palette interface
- Styling
Link to module: https://create.roblox.com/store/asset/121183485123754
Code samples provided at end of post
You are free to use and modify this resource for your needs, credit is appreciated
Updates
v1.0.1
- Added ability for users to resize window (drag right side of window)
- AddPaletteColors method
- Added PaletteEnabled parameter
v1.0.2
- RealTimeEventCalling parameter
- AnchorPoint parameter
- Fixes
v1.0.3
- ConfirmButton parameter
- DestroyAutomatically parameter
- Background frame sinks mouse input
v1.0.4
- Controller support
- GetPickerMode, GetColorSpace
Methods
List of 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:GetPickerMode(): PICKER_MODE
ColorPicker:GetColorSpace(): COLOR_SPACE
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:SetVisible(boolean)
Sets visibility of color picker window, does not destroy instance
ColorPicker:GetVisible(): boolean
Returns visibility of color picker window
ColorPicker:SetPosition(UDim2)
ColorPicker:GetPosition(): UDim2
ColorPicker:SetSize(number | UDim2)
ColorPicker:GetSize(): UDim2
ColorPicker:SetPaletteVisible(boolean)
ColorPicker:GetPaletteColor(index, isColor3: boolean) → Color3 | HEX string
ColorPicker:GetPaletteColors(isColor3: boolean) → {[number]: Color3 | HEX string}
ColorPicker:SetPaletteColor(index, color: Color3 | HEX string)
ColorPicker:SetPaletteColors(colors: {[number]: Color3 | HEX string})
ColorPicker:AddPaletteColor(color: Color3 | HEX string)
ColorPicker:AddPaletteColors(colors: {[number]: Color3 | HEX string})
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
Acts as cancel button when ConfirmButton parameter enabled
ColorPicker.ColorConfirmed? → (color: Color3, transparency: number?)
Fires when the users clicks the confirm button
ConfirmButton parameter required
List of all parameters:
| Name | Data Type | Default* |
|---|---|---|
| Parent | ScreenGui | Creates new ScreenGui, deleted when window is closed |
| Position | UDim2 | Mouse position |
| Size | number or UDim2 | 0.6 |
| AnchorPoint | Vector2 | (0, 0) |
| TopbarEnabled | boolean | true |
| PaletteEnabled | boolean | true |
| ConfirmButton | boolean | false |
| UserCanClose | boolean | true |
| Draggable | boolean | true |
| Resizable | boolean | true |
| DisplayOrder | number | 1 |
| ZIndex | number | 1 |
| TransparencyEnabled | boolean | false |
| RealTimeEventCalling | boolean | true - fire ColorChanged every movement |
| DestroyAutomatically | boolean | true |
| PickerMode | - | ColorPicker.PICKER_MODE.CIRCLE |
| ColorSpace | - | ColorPicker.COLOR_SPACE.HSV |
| Style | - | Default style |
*Default value / functionality when not defined in parameter table or no parameters given
Example code with transparency and palette functionality
local ColorPicker = require(...)
local currentColorPicker: ColorPicker.Type
local savedPalette
button.MouseButton1Down:Connect(function()
-- Ignore if a color picker is active
if currentColorPicker then
return
end
-- Create new color picker window
local newColorPicker = ColorPicker.new({
TransparencyEnabled = true
})
-- Set color to button background color
newColorPicker:SetColor(button.BackgroundColor3)
newColorPicker:SetTransparency(button.BackgroundTransparency)
-- Load saved palette, default palette
if savedPalette and #savedPalette > 0 then
newColorPicker:SetPaletteColors(savedPalette)
else
newColorPicker:AddPaletteColor(Color3.new(0.8,0.8,0.8))
end
-- Color changed event
newColorPicker.ColorChanged:Connect(function(color,t)
button.BackgroundColor3 = color
button.BackgroundTransparency = t
end)
-- Window closed event, save palette and remove reference
newColorPicker.WindowClosed:Connect(function()
savedPalette = newColorPicker:GetPaletteColors()
currentColorPicker = nil
end)
currentColorPicker = newColorPicker
end)
Basic code sample
-- Create new color picker instance
-- Optional parameters given in first parameter
local newColorPicker = ColorPicker.new({
Position = UDim2.fromScale(0.4,0.2),
Size = 0.5,
PickerMode = ColorPicker.PICKER_MODE.CIRCLE,
ColorSpace = ColorPicker.COLOR_SPACE.HSV
})
-- Set default color
newColorPicker:SetColor(button.BackgroundColor3)
-- Listen to color changed and window closed events
newColorPicker.ColorChanged:Connect(function(color: Color3)
button.BackgroundColor3 = color
end)
newColorPicker.WindowClosed:Connect(function()
print("Window closed by user")
end)
Styling
The appearance of the color picker can be changed through the Style parameter
local newColorPicker = ColorPicker.new({
Style = {
BackgroundColor = {
Color = Color3.fromRGB(20, 22, 24),
Transparency = 0
},
AccentColor = {
Color = Color3.fromRGB(30, 32, 34),
Transparency = 0
},
TextColor = {
Color = Color3.new(1, 1, 1)
},
RoundedCorners = true,
}
})
it works now!!