If youāre referring to palettes, then yes, palette colors should save when you close Studio.
3 Likes
Hello everyone, v0.2.0 of the plugin has been released, with the following highlights:
- Added a Settings window for some settings noted below
- The functionality of the ColorProps plugin has been integrated, so you no longer need 2 plugins to change object properties. You no longer need to load the API to use this.
- By default the Color Properties window requires you to load the Roblox API data manually, although there is a setting you can toggle to do this automatically at startup
- A color information section that lets you copy/paste the current color in different formats
- Removed the name restrictions on palettes, and added sections to the palette picker to distinguish between built-in and user-created palettes
- API loading is no longer automatic, you need to explicitly load it or toggle the setting to automatically load it at startup
- You will now be asked to name palettes before creating them, although there is a setting to disable this
- Added a palette of web colors (specifically from the CSS Color Module Level 4 working draft on 12 November 2020)
You can read the full changelog here. Thank you for using ColorPane.
v0.2.1 fixes some undesirable behaviour related to the Color Properties window.
Wow, this looks really useful. Definitely will use it. Thanks. 
1 Like
v0.3.0
Hello everyone, itās been a while, but the v0.3.0 update is here with quite a few changes. You can read the full changelog here.
Highlights
- Palette import and export is here! You can now import palettes from ModuleScripts, StringValues, JSON files on your computer, or from URLs. You can also export them to ModuleScripts or StringValues. You can access import/export from the overflow menu in the Palettes section of the editor.
- Two new built-in palettes! One of them is a palette that shows you variations of the current color, such as tints, tones, and shades. The other is a palette of Copic colors.
- A gradient palette! When using the gradient editor (previously called the ColorSequence editor), you can now store gradients for later use. It works similarly to a color palette in list layout.
- You can now use Color Properties during testing with a new option that caches Roblox API data (read the Color Properties page in the User Guide for more info).
Smaller Things
- Settings and palettes now auto-save. The default period is 5 minutes, but you can change this in the Settings.
- Palettes will now update search results as you type, instead of waiting for you to unfocus the text input
- New icons for the Color Editor and Gradient Editor
- Added some keyboard gestures for selecting palette colors and more (see the Tips and Tricks page in the User Guide)
- Overflow text in text boxes is now traversable instead of disappearing into a void where you canāt get to it
- Some text boxes will now select their entire text where it would make sense, such as for color inputs
- Removed the 99 quick palette color limit
Screenshots
Palette import and export
Variations palette
Gradient palette
A certain bug
You may have encountered a certain bug where you couldnāt drag the color wheel markers (or a slider marker) when there was a ScrollingFrame nearby on the screen. As far as I can tell this is a Roblox bug, and because of UserInputService doesnāt play well with PluginGuis, I donāt have any way to fix it (although if you do, please let me know).
Bug demonstration
For now, the easiest way to prevent this bug from happening is to scroll the frame all the way to the bottom, because for some reason this bug doesnāt happen if you do that. This is also shown in the demonstration video.
As always, thank you for using ColorPane. 
3 Likes
Looking clean and useful. Iāll try this.
2 Likes
Hello everyone, there are no updates in this post, but I wanted to let you know about a ColorPane integration I found. If you use the Tag Editor plugin, you can use ColorPane to edit tag colors if you have the API script injected.
This has actually been around for a while (since mid-May), but I just found out about it, and I wanted to let you know about it as well.
3 Likes
I would just like you to know this is the most POLISHED (And probably the best) resource I have ever seen on this forum for the Year I have been here. Thank you.
1 Like
Also could you explain more how to use the API? Iām creating a plugin and I would like to use this but Iām extremely confused.
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.)
1 Like
Is there any way to export a gradient as a ColorSequence.new() that I can put in a script?
Unfortunately there isnāt any way to export a gradient. Sorry about that. Iāll consider adding a way to export them in a future version.
1 Like
Is ColorPane in CoreGui? I thought it was in PluginGui.
If youāre asking if the API script named ColorPane is in CoreGui and not in the plugin gui, then yes, the API script is in CoreGui. If youāre asking if the plugin guis are in CoreGui, then no, the plugin guis are in PluginGuiService. Sorry if Iām not understanding your question.
1 Like
Yeah, that was what I was asking because plugins usually donāt put their api scripts in Core gui.
A really neat feature Iād like to see added into the gradient editor is the ability to utilize gamma correction, or a different interpolation space, using that other module of yours.
In my eyes, the option would have 3 modes, āOffā, āStandardā, and āUltraā, where āoffā does nothing but stock Roblox interpolation and allows for all 20 keypoints. āStandardā would only allow 10 keypoints, and would reserve one hidden keypoint between each of the available 10 that adjusts the middle between the two editable keypoints appropriately (resulting in 19 keypoints on the sequence used). āUltraā would allow only 8 keypoints, but have two hidden keypoints between each (resulting in all 20 keypoints on the sequence being used).
For most of my personal use cases, one keypoint between them is good enough to work with, but having the extra resolution could be useful.
Your thoughts on this?
1 Like
Cool plugin, can you give out a non plugin version, like a GUI and scripted and stuff and it will have rgb value inside the GUI ?
Bc I really needed one of these for a customize preference GUI for my plugin
Iāve been thinking about creating a version of ColorPane that has just the color picking components where you can integrate them into existing UI, but I havenāt really worked out any of the details on how that would work.
I may work on something like that in the future, but there arenāt any immediate plans to do so.
It sounds like an interesting idea, and it doesnāt seem too complicated to add into the plugin. Iāll consider adding such a feature in a future version.
1 Like
Hello everyone, ColorPane has been updated to v0.3.1. This is a very small update which fixes a single bug:
- Fixed a bug where trying to use the scroll wheel on a dropdown selector (e.g. slider or palette pickers) resulted in a blank page
If you donāt know what this update is talking about, there is a shortcut where you can use the scroll wheel to switch between sliders and palettes instead of having to open the dropdown. Hereās a video (scroll wheel not included):
Technical information about the bug
As far as I can tell, sometime between v0.3.0 and v0.3.1 there was an update where the Z component of an InputObjectās Position was changed from -1 or 1 to -0.5 or 0.5. The original dropdown UI code relied on this value being -1 or 1, so the change broke scroll wheel functionality.
Apologies for the lack of new stuff in this update. Unless there are new bugs discovered or reported, the next version should be a feature update.
In other news, we recently passed 300 sales! It means a lot to know that so many people have tried out ColorPane. Thank you for using the plugin, and happy holidays!
3 Likes
Thanks for making this available to the community! I am interested in using this as part of a plugin, as it appears Roblox Studio does not provide color picker functionality for plugin authors. Iāve seen a lot of Roblox devs asking for this feature, so I imagine yours would be great for many of us.
How can I reference ColorPane from my plugin? I am OK with either compiling your code directly into mine or requiring the end user to have already downloaded your plugin and referencing it that way. I tried both and failed.
Reference Github Sources
When I cloned your repo from github and referenced it from my script, I get all sorts of errors relating to not being able to find referenced .lua files. Specifically, the folders under your āincludeā dir are empty - promises, roact, etc.
I could take some guesses at which repo/release/etc. to clone for each of those repos and try to manually plumb things in, but Iām guessing there is some procedure to do this automatically that Iām not aware of.
Reference Live Plugin
I am not familiar with how to reference an existing live plugin, so I guessed a few things - CoreGui:WaitForChild(ā¦), PluginGuiService(ā¦) - and havenāt yet been able to figure it out.
Thanks for your help!