JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<div class="color-picker">
  <div class="color-palette">
    <canvas width="483" height="228"></canvas>
    <div class="selector"></div>
  </div>
  <div class="color-slider">
    <canvas width="20" height="228"></canvas>
  </div>
  <div class="color-current"></div>
</div>
<div class="note">Check out more colorful pens by <a href="https://codepen.io/DerkJanS/" target="_blank">Derk Jan Speelman</a> <a href="https://codepen.io/collection/DENVMv/" target="_blank">here</a>.</div>

SCSS

*, *:after, *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #fff;
  padding: 10px;
}

.color-picker {
  display: inline-block;
  margin: auto;
  margin-bottom: 15px;
  padding: 20px;
  height: 228px;
  &:after {
    display: table;
    content: '';
    clear: both;
  }
  > div {
    float: left;
    position: relative;
    &:not(:first-child) {
      margin-left: 10px;
    }
  }
  .color-palette, .color-slider, .color-current {
    cursor: default;
    user-select: none;
  }
  canvas {
    display: block;
    user-select: none;
  }
  .selector {
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    border: 2px solid #fff;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .1),
      1px 1px 3px 1px rgba(0, 0, 0, .15);
    transform: translate(-50%, -50%);
  }
  .color-current {
    width: 100px;
    height: 50px;
    background: #f00;
  }
}

.note {
  margin-top: 15px;
}

JavaScript

function ColorPicker() {
  this.colorPalette    = $('.color-palette canvas').get(0);
  this.colorPaletteCtx = this.colorPalette.getContext('2d');

  this.colorSlider = $('.color-slider canvas').get(0);
  this.colorSliderCtx = this.colorSlider.getContext('2d');
  
  this.startColor = '#f00';
  this.colorCoords = {'x': 482, 'y': 0};
  
  this.color = {
    'hex'  : '',
    'rgb'  : '',
    'hsv'  : '',
    'hsl'  : '',
    'cmyk' : '',
  }

  this.getMouseCoords = function(e, canvas) {
    var mouseCoords = '',
        x = e.pageX - $(canvas).offset().left,
        y = e.pageY - $(canvas).offset().top;

    if (x < 0) x = 0;
    if (x >= canvas.width) x = canvas.width - 1;
    if (y < 0) y = 0;
    if (y >= canvas.height) y = canvas.height - 1;

    mouseCoords = {'x' : x, 'y': y};

    if (canvas == this.colorPalette) {
    	this.colorCoords = mouseCoords;
    }

    return mouseCoords;
  }

  this.selectColor = function() {
    var ctx = this.colorPaletteCtx,
        x   = this.colorCoords.x,
        y   = this.colorCoords.y,
        imgData = ctx.getImageData(x, y, 1, 1).data,
        rgb = 'rgb('+imgData[0]+', '+imgData[1]+', '+imgData[2]+')';
    
    this.colorValues(rgb);
    
    $('.color-palette .selector').css({
      'background': rgb,
      'top': this.colorCoords.y + 'px',
      'left': this.colorCoords.x + 'px'
    });

    $('.color-current').css('background', rgb);
  }
  
  this.colorValues = function(rgb) {
    
  }
  
  this.createColorPalette = function(color) {
    var picker  = this,
        canvas  = picker.colorPalette,
        ctx     = picker.colorPaletteCtx,
        clicked = false;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = color;
    ctx.fillRect(1, 0, canvas.width, canvas.height - 1);

    var whiteGradient = ctx.createLinearGradient(1, 1, canvas.width - 1, -1);
    whiteGradient.addColorStop(0, "#fff");
    whiteGradient.addColorStop(1, "transparent");
    ctx.fillStyle = whiteGradient;
   ...