let sSlide;

let bSlide;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noLoop();

  colorMode(HSB);

  textSize(20);

​

  hSlide = createSlider(0, 360, 330);

  hSlide.position(20, 20);

  hSlide.size(width / 2);

​

  sSlide = createSlider(0, 100, 91);

  sSlide.position(20, 70);

  sSlide.size(width / 2);

​

  bSlide = createSlider(0, 100, 86);

  bSlide.position(20, 120);

  bSlide.size(width / 2);

}

​

function draw() {

  const hVal = hSlide.value();

  const sVal = sSlide.value();

  const bVal = bSlide.value();

​

  const rgb = HSVtoRGB(hVal, sVal, bVal);

  const redVal = rgb[0];

  const greenVal = rgb[1];

  const blueVal = rgb[2];

​

  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(hVal, sVal, bVal);

​

  fill(0, 0, bVal > 50 ? 0 : 100);

​

  text(`hue`, 20, 20);

  text(`saturation`, 20, 70);

  text(`brightness`, 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();

}

​