JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://rawgit.com/PitPik/colorPicker/master/index.css" rel="stylesheet" />

<div id="testPatch">.</div>

<div id="contrastPatch"><div></div><i>-Test-</i></div>

<div id="colorValues">.</div>

<div id="sliders" class="sliders">
  <div id="rgbR"><div></div></div>
  <div id="rgbG"><div></div></div>
  <div id="rgbB"><div></div></div>

  <div id="hslH"><div></div></div>
  <div id="hslS"><div></div></div>
  <div id="hslL"><div></div></div>

  <!-- <div id="cmyC"><div></div></div>
  <div id="cmyM"><div></div></div>
  <div id="cmyY"><div></div></div> -->
</div>

<div id="hsv_map">
  <canvas id="surface" width="200" height="200"></canvas>
  <div class="cover"></div>
  <div class="hsv-cursor"></div>
  <div class="bar-bg"></div>
  <div class="bar-white"></div>
  <canvas id="luminanceBar" width="25" height="200"></canvas>
  <div class="hsv-barcursors" id="hsv_cursors">
    <div class="hsv-barcursor-l"></div>
    <div class="hsv-barcursor-r"></div>
  </div>
</div>

<div id="color_squares">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div id="description">Demo patches: demonstrate how to build color pickers and how Colors' / ColorPicker's API work. Patches are linked to <select><option value="Colors">Colors</option><option value="ColorPicker">ColorPicker</option></select>
<p>See a simple jQuery implementation <a href="jQuery_implementation/">preview here</a> or a simple javaScript implementation <a href="javaScript_implementation/">preview here</a></p></div>

<script type="text/javascript" src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>
<script type="text/javascript" src="https://rawgit.com/PitPik/colorPicker/master/colorPicker.data.js"></script>
<script type="text/javascript" src="https://rawgit.com/PitPik/colorPicker/master/colorPicker.js"></script>
<script type="text/javascript" src="index.js"></script>

CSS

.cp-app {
  display: none;
}

JavaScript

;
(function(window, undefined) {
  "use strict"


  // Some common use variables
  var ColorPicker = window.ColorPicker,
    Tools = ColorPicker || window.Tools, // provides functions like addEvent, ... getOrigin, etc.
    colorSourceSelector = document.getElementById('description').getElementsByTagName('select')[0],
    startPoint,
    currentTarget,
    currentTargetWidth = 0,
    currentTargetHeight = 0;

  /* ---------------------------------- */
  /* ------- Render color patch ------- */
  /* ---------------------------------- */
  var testPatch = document.getElementById('testPatch'),
    renderTestPatch = function(color) { // used in renderCallback of 'new ColorPicker'
      var RGB = color.RND.rgb;

      testPatch.style.cssText =
        'background-color: rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');' +
        'color: ' + (color.rgbaMixBlack.luminance > 0.22 ? '#222' : '#ddd');
      testPatch.firstChild.data = '#' + color.HEX;
    };

  /* ---------------------------------- */
  /* ------ Render contrast patch ----- */
  /* ---------------------------------- */
  var contrastPatch = document.getElementById('contrastPatch'),
    backGround = contrastPatch.firstChild,
    renderContrastPatch = function(color) { // used in renderCallback of 'new ColorPicker'
      var RGB = color.RND.rgb,
        bgColor = color.background.RGB,
        options = myColor.options ? myColor.options : myColor.color.options,
        cBGColor = myColor ? options.customBG : {},
        bgType,
        alphaBG;

      if (!cBGColor) {
        // contrastPatch.style.display = 'none';
        // return;
        cBGColor = {
          r: 1,
          g: 1,
          b: 1
        };
      }
      alphaBG = options.alphaBG;
      bgType = {
        w: 'White',
        b: 'Black',
        c: 'Custom'
      }[alphaBG];
      cBGColor = alphaBG === 'b' ? {
        r: 0,
        g: 0,
        b: 0
      } : alphaBG === 'w' ? {
        r: 1,
        g: 1,
        b:...