Sure. I’m not sure exactly what you want me to go into, but you can reply again if you still have questions that needs to be answered.
The ColorPane API is exposed through a ModuleScript in the CoreGui named ColorPane, so to get the API you would use something like require(game:GetService("CoreGui"):FindFirstChild("ColorPane")). If the user hasn’t injected the API, this script won’t exist, so you will need to keep that in mind.
If you want to get a color, you would use:
ColorPane.PromptForColor({
PromptTitle = "Select a color", -- title bar text
InitialColor = Color3.new(0.5, 0.5, 0.5), -- the starting color
OnColorChanged = function(newColor)
-- do something
end,
})
PromptForColor returns a Promise, which allows you to do operations asynchronously. The Promise will get rejected when you provide invalid prompt options or if the color picker is already open, and it will resolve when the user presses the OK button.
OnColorChanged is called whenever the user changes the color (e.g. moving a slider, using the color wheel, editing the color hex, or picking a color from a palette). It should only be used for previewing color changes, and not for applying any color changes (e.g. setting waypoints with ChangeHistoryService). You should only apply colors when the Promise resolves.
ColorPane.PromptForColor({
-- prompt options
}):andThen(function(newColor)
-- user pressed the OK button, apply color changes
end, function()
-- handle rejections
end):finally(function(status)
-- most likely used for explicitly handling cancellations
end)
You can also get gradients by using PromptForColorSequence, where the prompt options are the same but use ColorSequences instead of Color3s.
You can use IsColorEditorOpen (or IsColorSequenceEditorOpen) to check if the prompts are currently being used.
If you keep the ColorPane API or Promises in stored somewhere (e.g. in variables or in state when using Roact or Rodux), you can use the ColorPane.Unloading event to know when to clean these up.
ColorPane.Unloading:Connect(function()
-- clean up
end)
Here’s an example script that shows you the basics of using the API. The script lets you use ColorPane to edit the color of a TextButton when you click on it.
local ColorPane = ... -- the required API script
local textButton = ...
local textButtonLastColor = textButton.BackgroundColor3
local colorPaneUnloading
textButton.Activated:Connect(function()
if (not ColorPane) then return end
if (ColorPane.IsColorEditorOpen()) then return end
ColorPane.PromptForColor({
PromptTitle = "TextButton Color",
InitialColor = textButtonLastColor,
OnColorChanged = function(intermediateColor)
-- preview colors
textButton.BackgroundColor3 = intermediateColor
end,
}):andThen(function(newColor)
-- apply the new color
textButton.BackgroundColor3 = newColor
textButtonLastColor = newColor
end, function() end):finally(function(status)
if (status == ColorPane.PromiseStatus.Cancelled) then -- ColorPane.PromiseStatus = Promise.Status
-- user cancelled color picking, restore the original color
textButton.BackgroundColor3 = textButtonLastColor
end
end)
end)
colorPaneUnloading = ColorPane.Unloading:Connect(function()
colorPaneUnloading:Disconnect()
colorPaneUnloading = nil
ColorPane = nil
end)
If you’re not used to Promises, you can Promise.awaitStatus to turn it into a synchronous call, although in this example it won’t make too much of a difference.
textButton.Activated:Connect(function()
if (not ColorPane) then return end
if (ColorPane.IsColorEditorOpen()) then return end
local status, newColor = ColorPane.PromptForColor(...):awaitStatus()
if (status == ColorPane.PromiseStatus.Resolved) then
-- apply the new color
textButton.BackgroundColor3 = newColor
textButtonLastColor = newColor
elseif (status == ColorPane.PromiseStatus.Cancelled) then
-- user cancelled color picking, restore the original color
textButton.BackgroundColor3 = textButtonLastColor
end
end)
(I haven’t tested this script, apologies if there are typos or it doesn’t work for some reason.)
13 August 2024 - v0.5.0 released
Documentation | 
Changelog | 
Source Code
