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;
}

There are 3 comments to "SimpleColorPicker.pde". You may leave your own comment.
1. Mar Canet, September 10th, 2006 at 00:53

Hi marius,
just in the line 115 have to change to: print(”"+getColString(i*2)+” “+getColString(i*2+1)+”");

good code,

mar

2. watz, September 10th, 2006 at 12:53

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…

3. lenny, March 18th, 2007 at 15:51

hi marius.
playin around with your colorpicker.
very useful thing, thanks a lot.

Comment on this entry

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>