<div class="wrapper">
  <div class="container">
    <h1>Color</h1>
    <input id="picker" type="color" value="#ffffff">
  </div>
  <small>Click on the color picker to interact</small>
</div>

:root {
  --background-color: #ffffff;
  --text-color: #121212;
}
body {
  background: var(--background-color);
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  text-align: center;
  & > h1 {
    color: var(--text-color);
    font-size: calc(1vw * 14);
    margin: 0;
  }
  & > input {
    cursor: pointer;
  }
}

small {
  position: absolute;
  bottom: 2em;
  width: 100vw;
  text-align: center;
  font-size: 1em;
  font-family: monospace;
  
}

const picker = document.querySelectorAll('#picker');
const label = document.querySelectorAll('h1');
picker[0].addEventListener('change', (e) => handlePicker(e));

window.onload = () => {
  label[0].innerHTML = 'white';
}

function handlePicker(e){
  let hex = e.target.value;
  document.body.style.setProperty('--background-color', hex);
  var colorName = getColorName(hex.slice(1));
  if (colorName === 'black'){
    document.body.style.setProperty('--text-color', '#ffffff');
  } else {
    document.body.style.setProperty('--text-color', '#121212');
  }
  label[0].innerHTML = colorName;
}

function getColorName(hex){
  let rgb = getRgb(hex);
  let hsl = getHsl(rgb[0],rgb[1],rgb[2]);
  let degree = hsl[0] * 360;
  let hue = lookUpHue(degree);
  let lightness = lookUpLightness(hsl[2]);
  if (lightness === 'black'){
    return 'black';
  } else if (lightness === 'white'){
    return 'white';
  } else {
    return (lightness + ' ' + hue); 
  }
}

function getRgb(hex){
  let rgb = [];
  for (let i = 0; i < 6; i++){
    if (i % 2 === 0){
      rgb.push( parseInt(hex.substr(i,2), 16) );
    }
  }
  return rgb;
}

/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * https://github.com/stonesun/color-conversion-algorithms/blob/master/color-conversion-algorithms.js
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation
 */
function getHsl(r, g, b){
    r /= 255;
    g /= 255;
    b /= 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;
    if(max == min){
        h = s = 0; // achromatic
    }else{
        let d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0);
            break;
            case g: h = (b - r) / d + 2;
            break;
            case b: h = (r - g) / d + 4;
            break;
        }
        h /= 6;
    }
    return [h, s, l];
}

function lookUpLightness(value){
  switch(true){
    case value === 0:
      return 'black';
    break;
    case value <= .35:
      return 'dark';
    break;
    case value > .35 && value <= .5:
      return '';
    break;
    case value > .5 && value < .9:
      return 'light';
    break;
    case value >= .9:
      return 'white';
    break;
  }
}

function lookUpHue(degree) {
    switch (true) {
        case degree >= 0 && degree < 7:
            return "red";
            break;
        case degree >= 7 && degree < 14:
            return "vermillion";
            break;
        case degree >= 14 && degree < 28:
            return "orange";
            break;
        case degree >= 28 && degree < 42:
            return "amber";
            break;
        case degree >= 42 && degree < 56:
            return "yellow";
            break;
        case degree >= 56 && degree < 70:
            return "lime";
            break;
        case degree >= 70 && degree < 84:
            return "lime";
            break;
        case degree >= 84 && degree < 98:
            return "emerald";
            break;
        case degree >= 98 && degree < 112:
            return "green";
            break;
        case degree >= 112 && degree < 126:
            return "green";
            break;
        case degree >= 126 && degree < 140:
            return "turquoise";
            break;
        case degree >= 140 && degree < 154:
            return "turquoise";
            break;
        case degree >= 154 && degree < 168:
            return "cyan";
            break;
        case degree >= 168 && degree < 182:
            return "sky";
            break;
        case degree >= 182 && degree < 196:
            return "cobalt";
            break;
        case degree >= 196 && degree < 210:
            return "ultramarine";
            break;
        case degree >= 210 && degree < 224:
            return "blue";
            break;
        case degree >= 224 && degree < 238:
            return "blue";
            break;
        case degree >= 238 && degree < 252:
            return "violet";
            break;
        case degree >= 252 && degree < 266:
            return "violet";
            break;
        case degree >= 266 && degree < 280:
            return "purple";
            break;
        case degree >= 280 && degree < 294:
            return "magenta";
            break;
        case degree >= 294 && degree < 308:
            return "lavender";
            break;
        case degree >= 308 && degree < 322:
            return "pink";
            break;
        case degree >= 322 && degree < 336:
            return "pink";
            break;
        case degree >= 336 && degree < 350:
            return "red";
            break;
        case degree >= 350 && degree < 360:
            return "red";
            break;
    }
}