<!--Easier URL: https://color.koya.io/-->

<div class="error">
   <div class="overlay">
      <div class="close"></div>
      <div class="colorcode">
         <input type="text" class="errorcode"/>
      </div>
      <div class="desc">Your browser does not support clipboard.js - copy the color code above.</div>
   </div>
   <div class="catchment"></div>
</div>


<div class="header">
   <div class="dropdown">
      <div class="selection">HEX - #123DEF</div>
      <div class="options">
         <div class="selected">HEX - #123DEF</div>
         <div>HEX - 123DEF</div>
         <div>WHEX - #123</div>
         <div>WHEX - 123</div>
         <div>WHEX - #112233</div>
         <div>WHEX - 112233</div>
         <div>HEXA - #123DEFFF</div>
         <div>HEXA - 123DEFFF</div>
         <div>RGB - (255,255,255)</div>
         <div>RGB - rgb(255,255,255)</div>
         <div>RGBA - (255,255,255,1)</div>
         <div>RGBA - rgba(255,255,255,1)</div>
         <div>RGBA - (255,255,255,255)</div>
         <div>RGBA - rgba(255,255,255,255)</div>
         <div>RGB - Individual</div>
         <div>CYMK - (0.1,0.1,0.1,0.1)</div>
         <div>CYMK% - (10,10,10,10)</div>
         <!--
            To add:
            CYMK
         -->
      </div>
   </div>

</div>

<div class="palettes">
   <div class="palette">
      <div class="colours">
         <div class="c1" color="D8334A" style="background-color:#D8334A" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="BF263C" style="background-color:#BF263C" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Ruby</div>
         <div class="values">#D8334A, #BF263C</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="ED5565" style="background-color:#ED5565" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="DA4453" style="background-color:#DA4453" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Grapefruit</div>
         <div class="values">#ED5565, #DA4453</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="FC6E51" style="background-color:#FC6E51" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="E9573F" style="background-color:#E9573F" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Bittersweet</div>
         <div class="values">#FC6E51, #E9573F</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="FFCE54" style="background-color:#FFCE54" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="F6BB42" style="background-color:#F6BB42" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Sunflower</div>
         <div class="values">#FFCE54, #F6BB42</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="E8CE4D" style="background-color:#E8CE4D" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="E0C341" style="background-color:#E0C341" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Straw</div>
         <div class="values">#E8CE4D, #E0C341</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="A0D468" style="background-color:#A0D468" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="8CC152" style="background-color:#8CC152" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Grass</div>
         <div class="values">#A0D468, #8CC152</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="2ECC71" style="background-color:#2ECC71" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="2ABA66" style="background-color:#2ABA66" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Basil</div>
         <div class="values">#2ECC71, #2ABA66</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="48CFAD" style="background-color:#48CFAD" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="37BC9B" style="background-color:#37BC9B" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Mint</div>
         <div class="values">#48CFAD, #37BC9B</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="A0CECB" style="background-color:#A0CECB" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="7DB1B1" style="background-color:#7DB1B1" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Teal</div>
         <div class="values">#A0CECB, #7DB1B1</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="4FC1E9" style="background-color:#4FC1E9" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="3BAFDA" style="background-color:#3BAFDA" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Aqua</div>
         <div class="values">#4FC1E9, #3BAFDA</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="5D9CEC" style="background-color:#5D9CEC" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="4A89DC" style="background-color:#4A89DC" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Blue Jeans</div>
         <div class="values">#5D9CEC, #4A89DC</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="AC92EC" style="background-color:#AC92EC" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="967ADC" style="background-color:#967ADC" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Lavender</div>
         <div class="values">#AC92EC, #967ADC</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="8067B7" style="background-color:#8067B7" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="6A50A7" style="background-color:#6A50A7" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Plum</div>
         <div class="values">#8067B7, #6A50A7</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="EC87C0" style="background-color:#EC87C0" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="D770AD" style="background-color:#D770AD" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Pink Rose</div>
         <div class="values">#EC87C0, #D770AD</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="BAA286" style="background-color:#BAA286" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="AA8E69" style="background-color:#AA8E69" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Grizzly Bear</div>
         <div class="values">#BAA286, #AA8E69</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="8E8271" style="background-color:#8E8271" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="7B7163" style="background-color:#7B7163" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Chocolate</div>
         <div class="values">#8E8271, #7B7163</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="F5F7FA" style="background-color:#F5F7FA" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="E6E9ED" style="background-color:#E6E9ED" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Light Grey</div>
         <div class="values">#F5F7FA, #E6E9ED</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="CCD1D9" style="background-color:#CCD1D9" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="AAB2BD" style="background-color:#AAB2BD" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Grey</div>
         <div class="values">#CCD1D9, #AAB2BD</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="656D78" style="background-color:#656D78" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="434A54" style="background-color:#434A54" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Dark Grey</div>
         <div class="values">#656D78, #434A54</div>
      </div>
   </div>
   <div class="palette">
      <div class="colours">
         <div class="c1" color="3C3B3D" style="background-color:#3C3B3D" data-clipboard-target=".colourvalue"></div>
         <div class="c2" color="323133" style="background-color:#323133" data-clipboard-target=".colourvalue"></div>
      </div>
      <div class="details">
         <div class="name">Charcoal</div>
         <div class="values">#3C3B3D, #323133</div>
      </div>
   </div>
</div>
<div class="individual" style="display:none">
   <div class="red" data-clipboard-target=".colourvalue"></div>
   <div class="green" data-clipboard-target=".colourvalue"></div>
   <div class="blue" data-clipboard-target=".colourvalue"></div>
</div>

<!--<div class="palettes custompalettes">
   <div class="palette add">
      <div class="sign" color="A0D468"></div>
   </div>
</div>-->

<div class="footer">
   <p>"Compliment each other like colors"</p>
</div>


<div class="hidden">
   <input type="text" class="colourvalue" />
</div>
$bg:#F0F2F5;
$shadow:#E6E9ED;

/*mixin by Dario Corsi
https://codepen.io/dariocorsi/pen/jqxERJ
*/
@function shadow-string($color1, $color2, $length){
  $total-length: $length;
  $string: $color1 0px 0px;
  @while $length > 0 {
    $mix-amount: 100 - (($length / $total-length) * 100);
    $mixed-color: mix($color1,$color2, $mix-amount);
    $string-addition: $length+px $length+px;
    $string: $mixed-color $string-addition, $string;
    $length: $length - 1;  
  }
  @return $string
}

@mixin longshadow($color1, $color2, $length) {  
  box-shadow: shadow-string($color1, $color2, $length);    
}
@mixin longshadowt($color1, $color2, $length) {  
  text-shadow: shadow-string($color1, $color2, $length);    
}

body {
   background-color:#F0F2F5;
   font-family:"arcon", sans-serif;
   overflow-x:hidden;
   overflow-y:scroll;
   display:flex;
   flex-direction:column;
   .error {
      z-index:1000000000;
      position: fixed;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      text-align:center;
      display:none;
      pointer-events:none;
      &.shown {
         display:block;
      }
      .overlay {
         pointer-events:auto;
         background-color:#ffffff;
         position: absolute;
         top:50%;
         left:50%;
         transform:translate(-50%,-50%);
         width:calc(100% - 120px);
         max-width:600px;
         padding:30px;
         display:flex;
         flex-direction:column;
         justify-content:center;
         border-radius:4px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 120);
         .close {
            width:10px;
            height:10px;
            position: absolute;
            top:10px;
            right:10px;
            cursor: pointer;
            &:before, &:after {
               position: absolute;
               content: '';
               background-color:#E6E9ED;
               width:100%;
               height:20%;
               top:50%;
               left:50%;
               transform:translate(-50%,-50%) rotate(45deg);
            }
            &:after {
               transform:translate(-50%,-50%) rotate(-45deg);
            }
            &:hover {
               &:before, &:after {
                  background-color:#CCD1D9;
               }
            }
         }
         .colorcode {
            width:100%;
            input {
               width:calc(100% - 4px);
               font-family:"arcon", sans-serif;
               text-align:center;
               border:none;
               outline:none;
               padding:4px;
               background-color:#E6E9ED;
            }
         }
         .desc {
            pointer-events:auto;
            margin-top:10px;
         }
      }
      .catchment {
         pointer-events:auto;
         width:100%;
         height:100%;
         background-color:rgba(50,49,51,0.1);
      }
   }
   .dropdown {
      z-index:1000;
      position: relative;
      margin:auto;
      width:250px;
      border-radius:4px;
      @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 60);
      .selection {
         position: relative;
         cursor: pointer;
         background-color:#434A54;
         color:#F5F7FA;
         padding: 10px;
         z-index:100;
         border-radius:4px;
         margin-top:20px;
         &:after {
            position: absolute;
            content: '';
            top:50%;
            right:8px;
            transform:translateY(-50%);
            border:8px solid transparent;
            border-bottom:0px solid #F5F7FA;
            border-top:8px solid #F5F7FA;
            width:0px;
         }
      }
      .options {
         border-bottom-left-radius:4px;
         border-bottom-right-radius:4px;
         position: absolute;
         top:100%;
         min-width:100%;
         background-color:#FFF;
         height:0px;
         //transition:.25s ease;
         overflow:hidden;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 60);
         div {
            padding: 0 10px;
            cursor: pointer;
            &:hover {
               background-color:#656D78;
               color:#F5F7FA;
            }
            &.selected {
               font-weight:bold; /*Don't add a bold font type so that adding bold keeps the same font size*/
            }
         }
      }
      &:hover {
         .options {
            height:auto;
            padding:10px 0;
         }
         .selection {
            border-bottom-left-radius:0px;
            border-bottom-right-radius:0px;
         }
         .selection:after {
            border:8px solid transparent;
            border-top:0px solid #F5F7FA;
            border-bottom:8px solid #F5F7FA;
         }
      }
   }
   .help {
      cursor: help;
      position: fixed;
      top:40px;
      right:30px;
      @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
      width:24px;
      height:24px;
      line-height:28px;
      text-align:center;
      background-color:#656D78;
      color:#F0F2F5;
      border-radius:100%;
      .container {
         display:none;
         line-height:18px;
         position: absolute;
         top:41px;
         right:-5px;
         color:#000;
         width:200px;
         z-index:10000000000;
         background-color:#fff;
         padding:0 20px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 50);
         &:after {
            position: absolute;
            content: '';
            bottom:100%;
            right:0px;
            border:17px solid transparent;
            border-bottom-color:#fff;
         }
         a {
            color:#5D9CEC; 
            text-decoration:none;
         }
      }
      &:hover {
         .container {
            display:block;
         }
      }
   }
   .tweetthis {
      z-index:-10000000000;
      cursor: pointer;
      position: fixed;
      top:40px;
      right:60px;
      @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
      width:24px;
      height:24px;
      line-height:28px;
      text-align:center;
      background-color:#656D78;
      color:#F0F2F5;
      border-radius:100%;
      .fa-heart {
         margin-top:4px;
         display:none;
         transition:.25s ease;
         color:#F0F2F5;
      }
      &:active {
         .fa-twitter {
            display:none;
         }
         .fa-heart {
            display:block;
            color:#D8334A;
         }
      }
   }
   .palettes {
      padding:20px;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
      .palette {
         position: relative;
         width:140px;
         background-color:#fff;
         border-radius:4px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
         display:flex;
         flex-direction:column;
         margin:20px;
         .colours {
            height:50px;
            display:flex;
            flex-direction:row;
            >* {
               cursor: crosshair;
               flex-grow:1;
               transition:.25s ease;
               &:hover {
                  flex-grow:1.5;
               }
            }
            .c1 {
               border-top-left-radius:4px;
            }
            .c2 {
               border-top-right-radius:4px;
            }
         }
         .details {
            padding:6px 10px;
            .name {
               font-weight:bold;
            }
            .values {
               display:none;
               font-size:12px;
               color:#AAB2BD;
            }
         }
         &.add {
            position: relative;
            background-color:transparent;
            width:140px;
            height:102px;
            border:4px dotted #fff;
            box-shadow:none;
            .sign {
               position: absolute;
               top:50%;
               left:50%;
               transform:translate(-50%,-50%);
               width:50px;
               height:50px;
               background-color:#A0D468;
               border-radius:100%;
               @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 30);
               cursor: pointer;
               &:before, &:after {
                  width:50%;
                  height:10%;
                  position: absolute;
                  content: '';
                  background-color:#fff;
                  top:50%;
                  left:50%;
                  transform:translate(-50%,-50%);
               }
               &:after {
                  transform:translate(-50%,-50%) rotate(90deg);
               }
            }
         }
      }
   }
   .individual {
      margin-bottom:40px;
      display:flex;
      justify-content:center;
      >* {
         position: relative;
         cursor: crosshair;
         width:50px;
         height:50px;
         border-radius:100%;
         margin:0 20px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
         border:4px solid #434A54;
         background-color:#F5F7FA;
      }
      .red {
         border-color:#ED5565;
      }
      .green {
         border-color:#A0D468;
      }
      .blue {
         border-color:#4FC1E9;
      }
   }
   .blast {
      z-index:-1000;
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      opacity:0.1;
      border-radius:100%;
      animation: blast 1s ease-in;
   }
   .footnote {
      position: fixed;
      bottom:20px;
      left:20px;
      a {
         color:#5D9CEC;
      }
   }
   .hidden {
      position: fixed;
      top:-1000px;
   }
   .footer {
      z-index:-1000000;
      font-style:italic;
      color:#656D78;
      text-align:center;
      p {
         @include longshadowt($shadow, $bg, 20);
      }
   }
}

::-webkit-resizer {
    background-color: $bg;
}
::-webkit-scrollbar {
    background-color: $bg;
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-corner {
    background-color: $bg;
}
::-webkit-scrollbar-thumb {
    background-color: $shadow;
    border-radius: 5px;
}
@keyframes blast {
   0% {
      width:50px;
      height:50px;
      opacity:0.3;
   }
   100% {
      width:1000px;
      height:1000px;
      opacity:0;
   }
}
View Compiled 
//console.clear();

setTimeout(function(){permitted = true;}, 500);

var clip = new Clipboard('.colours >*');
var clipr = new Clipboard('.individual .red');
var clipg = new Clipboard('.individual .green');
var clipb = new Clipboard('.individual .blue');
var permitted = false;
var selection = 0;
var r, g, b, a = 255;

clip.on('error', error());
clipr.on('error', error());
clipg.on('error', error());
clipb.on('error', error());

function error() {
   if(permitted) {
      console.error("Clip");
      $(".error").addClass("shown");
   }
}
$(".catchment, .close").click(function(){
   $(".error").removeClass("shown")
});

$(".dropdown .options div").click(function(){
   $(".dropdown .selection").text($(this).text());
   $(".dropdown .options div").removeClass("selected");
   $(this).addClass("selected");
   selection = $(this).index();
   if (selection == 14) {
      $(".individual").css("display", "flex");
   } else {
      $(".individual").css("display", "none");
   }
});

$(".sign").mousedown(function(e){
   var val = $(this).attr("color");
   $(this).parent().parent().append('<div class="blast" id="'+ts+'" style="background-color:#' + val + '"></div>');
   remove("#" + ts);
});
$(".colours >*").mousedown(function(e){
   var val = $(this).attr("color"), val2 = "";
   var ts = Math.floor(e.timeStamp);
   $(this).parent().parent().append('<div class="blast" id="'+ts+'" style="background-color:#' + val + '"></div>');
   remove("#" + ts);
   if (selection >= 2) {
      r = $.baseConvert(val.substr(0,2), 16, 10);
      g = $.baseConvert(val.substr(2,2), 16, 10);
      b = $.baseConvert(val.substr(4,2), 16, 10);
      $(".individual .red").css("background-color", "rgb(" + r + ",0,0)");
      $(".individual .green").css("background-color", "rgb(0," + g + ",0)");
      $(".individual .blue").css("background-color", "rgb(0,0," + b + ")");
   }
   if(selection >= 2 && selection <=5) {
      /*C0 -> BB not CC*/
      var r2 = Math.round(r/17) + "";
      val2 += $.baseConvert(r2, 10, 16); 
      /*I may have forgotten that jQuery already supports base 16-10 conversions absolutely fine*/
      if(selection >= 4) {
         val2 += $.baseConvert(r2, 10, 16);
      }
      var g2 = Math.round(g/17) + "";
      val2 += $.baseConvert(g2, 10, 16);
      if(selection >= 4) {
         val2 += $.baseConvert(g2, 10, 16);
      }
      var b2 = Math.round(b/17) + "";
      val2 += $.baseConvert(b2, 10, 16);
      if(selection >= 4) {
         val2 += $.baseConvert(b2, 10, 16);
      }
      val = val2;
   }
   if(selection >= 6 && selection <=7) {
      val += "FF";
   }
   switch(selection) {
      case 0:case 2:case 4:case 6:
         $(".colourvalue").val("#" + val);
         $(".errorcode").val("#" + val);
         break;
      case 1:case 3:case 5:case 7:
         $(".colourvalue").val(val);
         $(".errorcode").val(val);
         break;
      case 8:
         $(".colourvalue").val("(" + r + "," + g + "," + b + ")");
         $(".errorcode").val("(" + r + "," + g + "," + b + ")");
         break;
      case 10:
         $(".colourvalue").val("(" + r + "," + g + "," + b + ",1)");
         $(".errorcode").val("(" + r + "," + g + "," + b + ",1)");
         break;
      case 12:
         $(".colourvalue").val("(" + r + "," + g + "," + b + ",255)");
         $(".errorcode").val("(" + r + "," + g + "," + b + ",255)");
         break;
      case 9:
         $(".colourvalue").val("rgb(" + r + "," + g + "," + b + ")");
         $(".errorcode").val("rgb(" + r + "," + g + "," + b + ")");
         break;
      case 11:
         $(".colourvalue").val("rgba(" + r + "," + g + "," + b + ",1)");
         $(".errorcode").val("rgba(" + r + "," + g + "," + b + ",1)");
         break;
      case 13:
         $(".colourvalue").val("rgba(" + r + "," + g + "," + b + ",255)");
         $(".errorcode").val("rgba(" + r + "," + g + "," + b + ",255)");
         break;
      case 15:case 16:
          /*http://www.javascripter.net/faq/hex2cmyk.htm*/
          var C = 1 - (r/255);
          var M = 1 - (g/255);
          var Y = 1 - (b/255);
          var K = 0;
          var minCMY = Math.min(C,Math.min(M,Y));
          C = (C - minCMY) / (1 - minCMY) ;
          M = (M - minCMY) / (1 - minCMY) ;
          Y = (Y - minCMY) / (1 - minCMY) ;
          K = minCMY;
         if(selection == 15) {
            $(".colourvalue").val("cymk(" + C + "," + Y + "," + M + "," + K + ")");
            $(".errorcode").val("cymk(" + C + "," + Y + "," + M + "," + K + ")");
         } else {
            $(".colourvalue").val("cymk(" + C*100 + "," + Y*100 + "," + M*100 + "," + K*100 + ")");
            $(".errorcode").val("cymk(" + C*100 + "," + Y*100 + "," + M*100 + "," + K*100 + ")");
         }
         break;
   }
});

$(".individual .red").mousedown(function(){
   var ts = Math.floor(e.timeStamp);
   $(this).append('<div class="blast" id="'+ts+'" style="background-color:rgb(' + r + ',0,0)"></div>');
   remove("#" + ts);
   $(".colourvalue").val(r);
});

$(".individual .green").mousedown(function(){
   var ts = Math.floor(e.timeStamp);
   $(this).append('<div class="blast" id="'+ts+'" style="background-color:rgb(0,' + g + ',0)" onload="remove()"></div>');
   remove("#" + ts);
   $(".colourvalue").val(g);
});

$(".individual .blue").mousedown(function(){
   var ts = Math.floor(e.timeStamp);
   $(this).append('<div class="blast" id="'+ts+'" style="background-color:rgb(0,0,' + b + ')" onload="remove()"></div>');
   remove("#" + ts);
   $(".colourvalue").val(b);
});

function remove(id) {
   setTimeout(function(){$(id).remove();},1200);
}

/*https://github.com/koya-io/baseConvert.js*/
$.baseConvert=function(n,i,t){var r="",e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",o="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";if(36>=i&&(n=n.toUpperCase()),i>64||2>t||t>64||2>i?r="Error, selector out of bounds.":n.replace(/[^0-9a-zA-Z+\/]/g,"").length!=n.length?r="Error, invalid character.":$.each((n+"").split(""),function(n,t){i>=63?63==i&&"/"==t&&(r="Error, invalid character."):o.indexOf(t)>=i&&(r="Error, invalid character.")}),""==r){var a=bigInt(0),g="";for(n+="",i+="",t+="",$.each(n.split(""),function(t,r){if(i>=63){var g=bigInt(n.length).minus(t).minus(1),l=bigInt(i).pow(g),d=bigInt(o.indexOf(r)).multiply(l);a=bigInt(a).add(d)}else{var g=bigInt(n.length).minus(t).minus(1),l=bigInt(i).pow(g),d=bigInt(o.indexOf(r)).multiply(l);a=bigInt(a).add(d)}});a>0;){g=t>=63?e[bigInt(a).mod(t)]+""+g:o[bigInt(a).mod(t)]+""+g;var l=bigInt(a).mod(t);bigInt(a).minus(l),a=bigInt(a).divide(t)}return g}return r};

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/arcon.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  3. https://peterolson.github.io/BigInteger.js/BigInteger.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js
  5. https://codepen.io/z-/pen/0a1bedbb8ca05b9afd329264fca7b921.js