let greenSlide;

let blueSlide;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noLoop();

  textSize(20);

​

  redSlide = createSlider(0, 255, 220);

  redSlide.position(20, 20);

  redSlide.size(width / 2);

​

  greenSlide = createSlider(0, 255, 20);

  greenSlide.position(20, 70);

  greenSlide.size(width / 2);

​

  blueSlide = createSlider(0, 255, 120);

  blueSlide.position(20, 120);

  blueSlide.size(width / 2);

}

​

function draw() {

  const redVal = redSlide.value();

  const greenVal = greenSlide.value();

  const blueVal = blueSlide.value();

​

  const avgVal = (redVal + greenVal + blueVal) / 3;

​

  const redHex = redVal.toString(16).toUpperCase();

  const blueHex = greenVal.toString(16).toUpperCase();

  const greenHex = blueVal.toString(16).toUpperCase();

​

  HTMLRGB.sort(distFromRgb(redVal, greenVal, blueVal));

  const closestName = HTMLRGB[0].name;

  const closestRGB = HTMLRGB[0].rgb;

  const closestHex = HTMLRGB[0].hex;

​

  background(redVal, greenVal, blueVal);

​

  fill(avgVal > 128 ? 0 : 255);

​

  text(`red`, 20, 20);

  text(`green`, 20, 70);

  text(`blue`, 20, 120);

​

  text(`RGB: ${redVal}, ${greenVal}, ${blueVal}`, 20, 190);

  text(`HEX: #${redHex}${greenHex}${blueHex}`, 20, 210);

​

  text(`CLOSEST HTML COLOR`, 20, 270);

  text(`${closestName}: (${closestRGB}) ${closestHex}`, 20, 290);

​

  fill(`${closestHex}`);

  rect(20, 300, width / 4, width / 8);

}

​

function mouseReleased() {

  redraw();

}

function mouseDragged() {

  redraw();

}

​