JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"></script>
R:
<div id="red" class="rgbInput"></div>
<br /> G:
<div id="green" class="rgbInput"></div>
<br /> B:
<div id="blue" class="rgbInput"></div>
<br /> A:
<div id="alpha" class="rgbInput"></div>
<br />

<div id=colorWheelDiv></div>
<p id='label' style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 2em; line-height: normal; font-family: courier;">rgb(239,183,131)</p>
<input id="input" max="100" type="range" min="0">

CSS

#colorWheelDiv {
    width: 400px;
    height: 400px;
    position: relative;
}

#colorWheelOverlay {
    background-color: black;
    position: absolute;
    pointer-events: none;
}

#colorWheelDiv,
#colorWheelOverlay,
#colorWheel {
    border-radius: 50%;
}

#colorWheelOverlay,
#colorWheel {
    width: 100%;
    height: 100%;
}

JavaScript

var b = document.body;
var colorWheelDiv = document.getElementById('colorWheelDiv');
var colorWheel = document.createElement('canvas');
var colorWheelOverlay = document.createElement('div');

var a = colorWheel.getContext('2d');
var label = document.getElementById('label');
var input = document.getElementById('input');

var redInput = document.getElementById('red');
var greenInput = document.getElementById('green');
var blueInput = document.getElementById('blue');
var alphaInput = document.getElementById('alpha');
var rgbInput = document.getElementsByClassName('rgbInput');
document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218

// Jquery Elements

var $redSlider = $('#red');
var $greenSlider = $('#green');
var $blueSlider = $('#blue');
var $alphaSlider = $('#alpha');


(function() {

    // Declare constants and variables to help with minification
    // Some of these are inlined (with comments to the side with the actual equation)
    var doc = document;
    doc.colorWheel = doc.createElement;
    b.a = b.appendChild;


    // Add the colorWheel and the colorWheelOverlay
    colorWheelDiv.appendChild(colorWheelOverlay);
    colorWheelDiv.appendChild(colorWheel);
    colorWheelOverlay.id = 'colorWheelOverlay';
    colorWheel.id = 'colorWheel';


    var width = colorWheel.width = colorWheel.height = colorWheelDiv.clientHeight,
        imageData = a.createImageData(width, width),
        pixels = imageData.data,
        oneHundred = input.value = input.max = 100,
        circleOffset = 10,
        diameter = width - circleOffset * 2,
        radius = diameter / 2,
        radiusPlusOffset = radius + circleOffset,
        radiusSquared = radius * radius,
        two55 = 255,
        currentY = oneHundred,
        currentX = -currentY,
        center = radius / 2,
        wheelPixel = circleOffset * 4 * width + circleOffset * 4;

    // Math helpers
    var math = Math,
        PI = math.PI,
        PI2 = PI * 2,
        sqrt = math.sqrt,
       ...