<!--<div class="color" data-color="6ab150">
  <p></p>
  <div class="controls">
    <div class="inputDiv h"></div>
    <div class="inputDiv s"></div>
    <div class="inputDiv l"></div>
  </div>
</div>
<div class="color" data-color="506ab1">
  <p></p>
  <div class="controls">
    <div class="inputDiv h"></div>
    <div class="inputDiv s"></div>
    <div class="inputDiv l"></div>
  </div>
</div>
<div class="color" data-color="6a50b1">
  <p></p>
  <div class="controls">
    <div class="inputDiv h"></div>
    <div class="inputDiv s"></div>
    <div class="inputDiv l"></div>
  </div>
</div>
<div class="color" data-color="b1506a">
  <p></p>
  <div class="controls">
    <div class="inputDiv h"></div>
    <div class="inputDiv s"></div>
    <div class="inputDiv l"></div>
  </div>
</div>
<div class="color" data-color="bbaa66">
  <p></p>
  <div class="controls">
    <div class="inputDiv h"></div>
    <div class="inputDiv s"></div>
    <div class="inputDiv l"></div>
  </div>
</div>-->

@import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans');
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: Quattrocento Sans, Arial, sans-serif;
  font-size:16px;
  min-width: 20em;
}

body {
  display: flex;
}

i {
  display: inline-block;
  width: 1.5em;
  text-align: right;
}

.color {
  height: 100%;
  padding: 2em 0 1em 1em;
  line-height: 200%;
  border-left:1px solid black;
  border-top:1px solid black;
  flex: 1;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.color:last-child{border-right:1px solid black;border-bottom:1px solid black;}

.color p {
  margin-bottom: 1em;
  margin-right: 1em;
}

.inputDiv {
  display: flex;
}

.controls {
  width: 100%;
  height: auto;
}
.inputDiv:before{ display:inline-block;
  width:1em;}

.h:before {
  content: "h: ";
}

.s:before {
  content: "s: ";
}

.l:before {
  content: "l: ";
}

input[type='range'] {
  width: 80%;
}
.-moz- input[type='range'] {position:relative; top:9px;}

.output {
  width: 20%;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color:transparent;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  background-color:white;
  width: 20px;
  height: 20px;
  border: 3px solid var(--foo);
  border-radius: 50%;
  margin-top:-9px;
}

input[type=range]::-moz-range-thumb {
  background-color: white;
  width: 15px;
  height: 15px;
  border: 3px solid var(--foo);
  border-radius: 50%;
}

input[type=range]::-ms-thumb {
  background-color: white;
  width: 15px;
  height: 15px;
  border: 3px solid #ddd;
  border-radius: 50%;
  margin-top:1px;
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: #fff;
  border:1px solid #d9d9d9;
  height: 3px;
  
}

input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
}

input[type=range]::-moz-range-track {
  background-color: #fff;
  border:1px solid #d9d9d9;
  height: 3px;
}

input[type=range]::-ms-track {
  background-color: #fff;
  border:1px solid #d9d9d9;
  height: 3px;
}

input[type=range]::-ms-fill-lower {background-color: #fff;}

input[type=range]::-ms-fill-upper {background-color: #fff;}





@media only screen and (max-width:62.5em) {
  body {
    flex-direction: column;
  }
  .color {
    flex-direction: row;
    justify-content:space-between;
    flex: 1 0 9.4em;
  }
  .color p {
    flex: 1 0 10em;
    /*flex-shrink: 0*/
  }
  .controls {
  flex: 1 1 calc(100% - 10em);
  height: auto;
}
  input[type='range'] {
  width: 90%;
}

.output {
  width: 10%;
}
}

@media only screen and (max-width:32em) {
  input[type='range'] {
  width: 80%;
}

.output {
  width: 20%;
}
}

/*INCLUDES:
hsl to rgb to hex: https://codepen.io/enxaneta/pen/15d04eb1b8b68c95cd5298b46b2eabb8
Lea Verou's color contrast:
https://codepen.io/enxaneta/pen/729bdb57bcace876689066ba81417fc7
Input type range object for palette:
https://codepen.io/enxaneta/pen/623d2df0480cba649976132ec3413c08
*/
//var swatches = ["6ab150", "506ab1","6a50b1","#964fb0", "b1506a"];
//var swatches = ["2a80b9", "8f44ad","16a086", "f1c40f","e77e23"];
var swatches = ["#5F3152", "#874D6E", "#DCAB74", "#F4D8A0", "#5C9696"];

function buildHTML(swatches){
  var html = "";
for( var i = 0,len = Math.min(5, swatches.length); i < len; i++){  
html += '<div class="color" data-color="'+swatches[i]+'"><p></p><div class="controls"><div class="inputDiv h"></div><div class="inputDiv s"></div><div class="inputDiv l"></div></div></div>';}
  document.body.innerHTML = html;
}

buildHTML(swatches);


function display_hex(ry){
  return "#" + ry[0] + ry[1] + ry[2];
}

function display_rgb(ry){
  return "rgb(<i>" + Math.round(ry[0]) +"</i>, <i>"+  Math.round(ry[1]) +"</i>, <i>"+  Math.round(ry[2]) + "</i>)";
}

function display_hsl(ry){
  return "hsl(<i>" +  Math.round(ry[0]) +"</i>, <i>"+  Math.round(ry[1]) +"</i>%, <i>"+  Math.round(ry[2]) + "</i>%)";
}




var colors = document.querySelectorAll(".color");
var hexRy,rgbRy,hslRy;

for (var i = 0; i < colors.length; i++) {
  var p = colors[i].querySelector("p");
  hexRy = hex2ry(colors[i].dataset.color);
  rgbRy = hex2rgb(hexRy);
  hslRy = rgb2hsl(rgbRy);

  //create the hue input
  var h = new Input();
  h.att.max = 360;
  h.att.value = Math.round(hslRy[0]);
  h.create(colors[i].querySelector(".h"));
  inputsRy.push(h);
  //create the saturation input
  var s = new Input();
  s.att.value = Math.round(hslRy[1]);
  s.create(colors[i].querySelector(".s"));
  inputsRy.push(s);
  //create the l input
  var l = new Input();
  l.att.value = Math.round(hslRy[2]);
  l.create(colors[i].querySelector(".l"));
  inputsRy.push(l);

  var thisHex = display_hex(hexRy);
  var thisRgb = display_rgb(rgbRy);
  var thisHsl = display_hsl(hslRy);

  colors[i].style.backgroundColor = thisHex;
  colors[i].style.setProperty("--foo", thisHex);
  p.innerHTML = thisHex + "<br>";
  p.innerHTML += thisRgb + "<br>";
  p.innerHTML += thisHsl;
  getFontColor(rgbRy, colors[i]);

}

function updateDisplay() {
  
  for (var i = 0; i < colors.length; i++) {
    var p = colors[i].querySelector("p");
    var H = colors[i].querySelector(".h input").value;
    var S = colors[i].querySelector(".s input").value;
    var L = colors[i].querySelector(".l input").value;
    hslRy = [H, S, L];console.log(hslRy)
    rgbRy = hsl2rgb(hslRy);
    hexRy = hsl2hex(hslRy);

    var thisHex = display_hex(hexRy);
    var thisRgb = display_rgb(rgbRy);
    var thisHsl = display_hsl(hslRy);

    colors[i].style.backgroundColor = thisHex;
    colors[i].style.setProperty("--foo", thisHex);
    p.innerHTML = thisHex + "<br>";
    p.innerHTML += thisRgb + "<br>";
    p.innerHTML += thisHsl;
    getFontColor(rgbRy, colors[i]);

  }
}

for (var n = 0; n < inputsRy.length; n++) {
  //inputsRy[n].update();
  (function(n) {
    inputsRy[n].input.addEventListener("input", function() {
      inputsRy[n].update();
      updateDisplay()
    }, false)
  }(n));
}