is there a way to open up the ColorProps window if i close it accidentally? this is a rly good plugin btw :3
edit: ohhhhh wait i have to right click at the top of a pane and select from the dropdown
1 Like
This will be extremely useful for creating colors easily, but it’s kinda annoying having to do the #insert color code here every time.
Edit: the colors save correct? When you close studio.
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.
2 Likes
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.
1 Like
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.)
2 Likes
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