<!--
Add/Edit/Remove Hex Colors from the array to update the palette
-->

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

$wht: #fff;
$blk: #000;
$sq: 120px;
$offset:$sq/25;
$brd-radius:8px;

@mixin flexy-boi() {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body{
  @include flexy-boi();
  min-height: 100vh;
  font-family: 'Roboto Mono', monospace;
}

.palette{
  text-align:center;
  display: block;
  .color{
    width:$sq;
    height:$sq;
    border-radius:$brd-radius;
    background:red;
    margin:$offset;
    display: inline-block;
    position:relative;
    transition:all 300ms ease;
    cursor:pointer;
    border:$offset solid $wht;
    box-shadow:($offset/2) ($offset/2) 0 0 rgba($blk,0.2);
    
    &:hover{
      box-shadow:$offset $offset 0 0 rgba($blk,0.1);
      transform:scale(1.03);
    }
    
    &:after{
      content:attr(data-color);
      position:absolute;
      text-transform:uppercase;
      border-radius:inherit;
      border:$offset solid transparent;
      box-shadow:inset 0 (-$offset*2) 0 0 rgba($blk,0.15);
      top:-$offset;
      left:-$offset;
      width:$sq;
      height:$sq;
      color:$blk;
      @include flexy-boi();
    }
    
    &.dark:after{
      color:$wht;
    }
  }
}

function createPalette(colors){
  
  function lightness(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);result.shift();
    result.forEach((val,i) => {result[i] = parseInt(val, 16)});
    return result.reduce(function(a, b){return a+b})/result.length;
  }
  
  var ol = 0, olc = null, palette = document.createElement("div");
  colors.forEach(color => {
    var l = lightness(color), e = document.createElement("div");
    e.className = l<127?"color dark":"color";
    e.style.background = color;
    e.dataset.color = color;
    palette.appendChild(e);
    if(l>ol){ol=l;olc=color}
  });
  
  palette.className = "palette";
  document.body.appendChild(palette);
  document.body.style.backgroundColor = "rgb("+[ol,ol,ol].join(',')+")";
  
}

// createPalette(["#a7dbd8","#69d2e7","#e0e4cc","#f38630","#fa6900","#606060"]);
createPalette(["#0084ff","#44bec7","#ffc300","#fa3c4c","#d696bb"]);
// createPalette(["#839e4d","#cc8d6a","#ba392e","#54243a","#79172d","#606060"]);