Integrate a color picker in UI Panel

Find out why the . goes before the /

Moderator: Paul Tuersley

Post Reply
Posts: 21
Joined: February 19th, 2013, 2:44 pm


I've finaly found a solution to request a color to the user by using the after effect color window with the 'pipette' (color picker),
I post this script here if someone else look for something similar, or if you have some notes/comments to make this function better.

Code: Select all

var solidColorPickerName="zzz_solidColorPicker_zzz"; // name use for the temporary solid
var solidColorPickerName_DefaultColor=[0.5,0.5,0.5]; // default color for the temporary solid ( use to check user modification or cancel button)
var needsMsg="To use this function, you need to be in a comp\n(Composition panel)";

function userColorPicker(){
    var result=false;
    var curComp=app.project.activeItem;
    if (curComp==null ){alert(needsMsg);}else{
             if(curComp.typeName!="Composition"){alert(needsMsg); }else{ 
                                var userColor;
                                var solidSize=50;
                                //creation of a temporary solid
                                mySolid=curComp.layers.addSolid(solidColorPickerName_DefaultColor, solidColorPickerName, solidSize, solidSize, 1, 1);
                                 mySolid.moveToEnd(); // i prefer, because some random value use layer index and like that there is no change
                                 mySolid.transform.position.setValue([-solidSize/2,-solidSize/2]); // solid not visible in comp => user can pick what he want
                                 mySolid.selected=true; // => to activate timeline ang ive acces to the solid setting menu
                                 app.executeCommand(app.findMenuCommandId("Solid Settings..."));
                                 //--> waitting while solid setting windows is open
                                 var userTmpColor=mySolid.source.mainSource.color;   //checking the new color of he solid (define by user)
                                 // test if color is different from default (detecting the cancel action on solid setting) anf if it's case memorisation of new color 
                                 //remove of the temporary solid
    return result;


I hope you like, :wink:
Tks for your comment.

Posts: 21
Joined: February 19th, 2013, 2:44 pm


No comments ? is it not interresting ? :( or perfect ? :wink:

Posts: 1
Joined: July 14th, 2017, 1:13 pm

Hi tapsystem,

your piece of code was very helpful for my soloution to bring up the default color picker of AE.

I use this to add colors to something. Any Idea, how to detect if the user clicks 'cancel'? Because with your solution nothing would happen, if the user would take the default color you picked.

Maybe you get a notification after 4 years. I hope so.

User avatar
Posts: 1
Joined: January 7th, 2019, 10:52 pm

Hi tapsystem,
I know It's after 6 years, but still your post helping people like me.
Many thanks for the solution.


And while I am googling about this, I found this on creativecow. believe this will useful to someone.

colorButton.onClick = function(){
myHexColor = $.colorPicker();

Following function converts the Hex value to RGB

function hexToColor(theHex){
theHex = parseInt(theHex,16);
var r = theHex >> 16;
var g = (theHex & 0x00ff00) >> 8;
var b = theHex & 0xff;
return [r/255,g/255,b/255];
User avatar
Posts: 35
Joined: October 31st, 2016, 5:00 pm
Location: Los Angeles

While the system colour picker is fine, here's a scriptui-native solution that offers quite a bit more functionality (and platform agnosticism):
Post Reply