Here is the code for a simple Processing GUI utility for editing color palettes. It generates gradients given a start and end color. It will print palettes as hex strings and RGB triplets, change the “prefix” and “suffix” variables to turn the output into readymade code.
I whipped this up to make it easy to make decent color combos for a current project I'm working on. It could do with a few more features, like a 2D RGB color field to choose from and the ability to save and maybe even load files. It feeds into a color library I use, maybe I’ll make that available at some point to make it a bit more useful.
Source code - SimpleColorPicker.pde
// SimpleColorPicker.pde
// Marius Watz - http://workshop.evolutionzone.com
// Interactive creation of gradient palettes.
// Will print palettes as hex and RGB triplets.
// Select either left or right side of the gradient boxes
// to edit that color.
// By pressing 'd' the "dropper" mode is activated, clicking
// on a color will fill the currently selected slot with that
// color.
int rgb[][];
float R,G,B;
int sel,numrows,barTop,barRight;
boolean isDropper,whiteBG=false,edited[];
PFont font;
void setup() {
size(10*20+15,10*20+200);
font=createFont("Arial", 10);
numrows=10;
rgb=new int[numrows*2][3];
edited=new boolean[numrows];
for(int i=0; i< numrows; i++) {
fillRGB(i*2, 50,50,50);
fillRGB(i*2+1, 255,255,255);
edited[i]=false;
}
R=50;
G=50;
B=50;
sel=0;
barTop=20*10+60;
barRight=10+9*20+5;
}
void draw() {
float rD,gD,bD,r,g,b;
noStroke();
if(whiteBG) background(255);
else background(0);
// draw title
fill(0xFFEBAC32);
rect(0,0,width,20);
fill(255,255,255);
textFont(font,10);
text("SimpleColorPicker 0.9", 10,13);
// draw selection
if(sel!=-1) {
if(isDropper) fill(255,0,0);
else fill(255);
rect(10+(9*20*(sel%2))-1,30+20*(sel/2)-1, 17,17);
}
// draw color boxes
for(int i=0; i< numrows; i++) {
rD=(float)(rgb[i*2+1][0]-rgb[i*2][0])/9f;
gD=(float)(rgb[i*2+1][1]-rgb[i*2][1])/9f;
bD=(float)(rgb[i*2+1][2]-rgb[i*2][2])/9f;
for(int j=0; j<10; j++) {
r=rgb[i*2][0]+rD*(float)j;
g=rgb[i*2][1]+gD*(float)j;
b=rgb[i*2][2]+bD*(float)j;
fill(r,g,b);
rect(10+j*20,30+i*20, 15,15);
}
}
// draw big color field
fill(R,G,B);
rect(10,barTop+10, barRight,30);
// draw smaller contrast color field
int sel2=sel+1;
if(sel%2==1) sel2=sel-1;
// println("sel "+sel+" sel2 "+sel2);
fill(rgb[sel2][0],rgb[sel2][1],rgb[sel2][2]);
rect(10,barTop+40, barRight,10);
// color bar background
fill(60);
rect(10,barTop+60, barRight, 10);
rect(10,barTop+75, barRight, 10);
rect(10,barTop+90, barRight, 10);
// color bar foreground
fill(255);
rect(10,barTop+60, barRight*(float)R/255, 10);
rect(10,barTop+75, barRight*(float)G/255, 10);
rect(10,barTop+90, barRight*(float)B/255, 10);
// draw title
fill(0xFFEBAC32);
rect(0,barTop-25,width,20);
fill(255);
text("'p' to print palette, 'd' to use dropper", 10,barTop-12);
}
void printColors() {
// change this to add readymade function calls for pasting into your code
String prefix="";
String suffix="";
println("");
for(int i=0; i< numrows; i++)
if(edited[i]) {
print(prefix);
print("\\""+getColString(i*2)+"\\", \\""+getColString(i*2+1)+"\\"");
println(suffix);
}
println("");
for(int i=0; i< numrows; i++)
if(edited[i]) {
print(prefix);
print(getColStringNumeric(i*2)+", "+
getColStringNumeric(i*2+1));
println(suffix);
}
}
String getColStringNumeric(int id) {
String s;
s=""+rgb[id][0]+", "+rgb[id][1]+", "+rgb[id][2];
return s;
}
String getColString(int id) {
String s=Integer.toHexString(color(rgb[id][0],rgb[id][1],rgb[id][2]));
s=s.substring(2).toUpperCase();
return s;
}
void mousePressed() {
int mx=(mouseX-10)/20;
int my=(mouseY-30)/20;
if(mx<10 && (my<10)) {
mx=(mx/5);
int newsel=my*2+mx;
if(isDropper) {
fillRGB(sel, rgb[newsel][0],rgb[newsel][1],rgb[newsel][2]);
R=rgb[sel][0];
G=rgb[sel][1];
B=rgb[sel][2];
isDropper=false;
}
else {
sel=newsel;
R=rgb[sel][0];
G=rgb[sel][1];
B=rgb[sel][2];
}
// println("mx "+mx+" my "+my+" "+(mx/9)+" sel "+sel);
}
else {
my=(mouseY-(barTop+60))/15;
if(my<3 && my>-1) {
mx=mouseX-10;
if(mx<0) mx=0;
else if(mx>barRight) mx=barRight;
float val=(float)(mx*255)/(float)barRight;
if(my==0) R=val;
if(my==1) G=val;
if(my==2) B=val;
if(sel!=-1) fillRGB(sel, (int)R,(int)G,(int)B);
edited[sel/2]=true;
// println("mx "+mx+" val "+val+" R "+R+" G "+G+" B "+B);
}
}
}
void mouseDragged() {
mousePressed();
}
void keyPressed() {
if(key=='p') printColors();
if(key=='d') isDropper=!isDropper;
if(key=='b') whiteBG=!whiteBG;
}
void fillRGB(int id, int r,int g, int b) {
rgb[id][0]=r;
rgb[id][1]=g;
rgb[id][2]=b;
}





Hi marius,
just in the line 115 have to change to: print(”"+getColString(i*2)+” “+getColString(i*2+1)+”");
good code,
mar
Thanks, Mar, that’s actually a flaw in the code publication I use here on the blog. In my code it says “\”", not “”", but the \” is decoded as an escape sequence. Which it is, of course, but not for the PHP parser…
hi marius.
playin around with your colorpicker.
very useful thing, thanks a lot.