let c;

​

function setup() {

  createCanvas(100, 100);

  setup_colpick();

  info();

}

​

function draw() {

  c = inp.color(); //________________________________________________________________ get color from color picker

  background(c);

  printcolor();

}

​

function setup_colpick() {

  inp = createColorPicker('#ffffff'); //______________________________________________ DOM element

  inp.position(-1, height - 34); //__________________________________________________ optional positioning inside canvas: x,y 

  inp.size(width, 20); //____________________________________________________________ and size: w,h

}

​

function printcolor() {

  noStroke();

  fill(255);

  rect(0, height - 15, width, 15); //_______________________________________________ text background white

  fill(0);

  text("rgb(" + red(c) + "," + green(c) + "," + blue(c) + ")", 2, height - 3); //____ print RGB

}

​

function info() {

  print("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color"); 

  print("https://p5js.org/reference/#/p5/createColorPicker"); 

  print("https://editor.p5js.org/figraham/sketches/SJ9vUWAeV"); 

  print("forum:"); 

  print("https://discourse.processing.org/t/accessing-data-from-color-picker-array/14960/2");   

}