int r = 128;
int g = 128;
int b = 128;

int grayBackground = 120;

int increment = 1;

PFont font;

void setup() {
  size(400,400);

  rectMode(CENTER);
  textAlign(CENTER);
  cursor(CROSS);
  noStroke();

  font = createFont("SansSerif", 20);
  textFont(font);

  // Initialize fake values here so our initial green and blue components are zero.
  mouseX = 0;
  mouseY = height;
}

void draw() {
  background(grayBackground);

  // Compute green and blue components based on mouse location.
  // ...red is altered in the keyPressed() method.
  g = (int) map(mouseX, 0, width - 1, 0, 255);
  b = 255 - ((int) map(mouseY, 0, height - 1, 0, 255));

  // Draw main color rectangle.
  fill(r, g, b);
  rect(width / 2, height / 2, 175, 175);

  // Draw individual color component thumbnails.
  drawThumbnails();

  drawLabels();
}

void keyPressed() {
  // Up and Down arrow keys adjust red component value.
  if (keyCode == UP) {
    r = (r + increment) % 256;
  } else if (keyCode == DOWN) {
    r = (r - increment) % 256;
    if (r < 0) {
      r = 256 + r;
    }
  } // Right and Left arrow keys adjust background color.
    else if (keyCode == RIGHT) {
    grayBackground = (grayBackground + increment) % 256;
  } else if (keyCode == LEFT) {
    grayBackground = (grayBackground - increment) % 256;
    if (grayBackground < 0) {
    grayBackground = 256 + grayBackground;
    }
  }
}

void drawThumbnails() {
  fill(r,0,0);
  rect(width / 2 - 50, 20, 20, 20);
  fill(0,g,0);
  rect(width / 2, 20, 20, 20);
  fill(0,0,b);
  rect(width / 2 + 50, 20, 20, 20);
}

void drawLabels() {
  // We adjust the label text color based on current grayBackground value.
  // This way, the text stays legible as the background color changes.
  fill((grayBackground  % 128) + 50);
  text(r, width / 2 - 50, 50);
  text(g, width / 2, 50);
  text(b, width / 2 + 50, 50);

  text(hex(r,2), width / 2 - 50, 75);
  text(hex(g,2), width / 2, 75);
  text(hex(b,2), width / 2 + 50, 75);

  text(grayBackground, width / 2, height - 20);
}

void mousePressed() {
  var colorToCopy = "#" + hex(r,2) + hex(g,2) + hex(b,2);
  var colorBox = "<span style=\"color:" + colorToCopy + "; font-size: xx-large;\">&diams; </span>";
  document.getElementById('copied_colors').innerHTML =  copied_colors.innerHTML + colorBox + colorToCopy + "<br>";
}