This ScriptUI-based color picker script creates a simple user interface for selecting colors in Adobe applications. Developed by Mehmet Sensoy, the script features two color buttons that display the currently selected color with custom drawing functions. Users can click either button to open the native color picker, and the chosen color is converted to a normalized RGB array. This script is ideal for designers and developers who need a lightweight and customizable color selection tool within their Adobe projects.
Usage:
- Open your Adobe application (such as Photoshop or Illustrator) that supports ScriptUI.
- Run the script.
- A dialog window titled “Color Picker” will open with two color buttons.
- Click on the “First Color” or “Second Color” button to open the color picker.
- Choose a color from the native color picker dialog. The button will update to display the selected color.
- Canceling the color picker will leave the color unchanged.
JavaScript
// Simple Color Picker SCRIPTUI
// Script by Mehmet Sensoy
function colorpicker() {
var color_decimal = $.colorPicker();
if (color_decimal === -1) return null; // Return null if the color picker is canceled
// Convert decimal color to RGB array
var hexToRGB = function(hex) {
var r = hex >> 16;
var g = (hex >> 8) & 0xFF;
var b = hex & 0xFF;
return [r / 255, g / 255, b / 255]; // Normalize values for ScriptUI (0-1 range)
};
return hexToRGB(color_decimal);
}
function customDraw() {
with (this) {
graphics.drawOSControl();
graphics.rectPath(0, 0, size[0], size[1]);
graphics.fillPath(fillBrush);
if (text) {
graphics.drawString(
text,
textPen,
(size[0] - graphics.measureString(text, graphics.font, size[0])[0]) / 2,
3,
graphics.font
);
}
}
}
var w = new Window("dialog", "Color Picker");
// Create panel for color options
var pnl = w.add("panel", undefined, "Color Options");
// First Color Button
var colorbutton1 = pnl.add("iconbutton", undefined, undefined, { name: "coloroption1", style: "toolbutton" });
colorbutton1.size = [200, 20];
colorbutton1.fillBrush = colorbutton1.graphics.newBrush(colorbutton1.graphics.BrushType.SOLID_COLOR, [0, 0, 0, 1]);
colorbutton1.text = "First Color";
colorbutton1.textPen = colorbutton1.graphics.newPen(colorbutton1.graphics.PenType.SOLID_COLOR, [1, 1, 1], 1);
colorbutton1.onDraw = customDraw;
// Second Color Button
var colorbutton2 = pnl.add("iconbutton", undefined, undefined, { name: "coloroption2", style: "toolbutton" });
colorbutton2.size = [200, 20];
colorbutton2.fillBrush = colorbutton2.graphics.newBrush(colorbutton2.graphics.BrushType.SOLID_COLOR, [0, 0, 0, 1]);
colorbutton2.text = "Second Color";
colorbutton2.textPen = colorbutton2.graphics.newPen(colorbutton2.graphics.PenType.SOLID_COLOR, [1, 1, 1], 1);
colorbutton2.onDraw = customDraw;
// First Color Button Click Event
colorbutton1.onClick = function() {
var newcolor1 = colorpicker();
if (newcolor1 === null) return;
this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, newcolor1);
this.notify("onDraw");
};
// Second Color Button Click Event
colorbutton2.onClick = function() {
var newcolor2 = colorpicker();
if (newcolor2 === null) return;
this.fillBrush = this.graphics.newBrush(this.graphics.BrushType.SOLID_COLOR, newcolor2);
this.notify("onDraw");
};
w.center();
w.show();
