JSFiddle - React, Tailwind, and code Playground

by saluce

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="test" style="background-color: hsl(202, 100%, 29%); width: 100%, height: 400px; position: absolute; top: 0; bottom: 0; right: 0; left: 0">
    <form>
        <input class="form-control" type="number" min=0 max=255 id="hue" value=202 />
        <input class="form-control" type=number min=0 max=100 id="sat" value=100 />
        <input class="form-control" type=number min=0 max=100 id="lgt" value=29 />
    </form>
    <div id=hslout>hsl(202, 100%, 29%)</div>
    <div id=rgbout>rgb(0, 92, 146)</div>
    <div id=hexout>#005c92</div>
</div>

JavaScript

function hslToRgb(h, s, l) {
    var hueToRgb = function(m1, m2, h) {
        if (h < 0) {
            h += 1;
        }
        if (h > 1) {
            h -= 1;
        }
        if (h * 6 < 1) {
            return m1 + (m2 - m1) * h * 6;
        }
        if (h * 2 < 1) {
            return m2;
        }
        if (h * 3 < 2) {
            return m1 + (m2 - m1) * (2.0 / 3.0 - h) * 6;
        }
        return m1;
    }
    var m1;
    var m2;
    if (l <= 0.5) {
        m2 = l * (s + 1);
    } else {
        m2 = l + s - l * s;
    }
    m1 = l * 2 - m2;
    var r = hueToRgb(m1, m2, h + 1.0 / 3.0);
    var g = hueToRgb(m1, m2, h);
    var b = hueToRgb(m1, m2, h - 1.0 / 3.0);
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
        ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}

function hex2rgb(hex) {
	var r,g,b;
    var h = hex.toUpperCase();
	if (hex.length === 3) {
        h = hex.charAt(0) + h.charAt(0) + hex.charAt(1) + h.charAt(1) + hex.charAt(2) + h.charAt(2);
    }
    return [
    	parseInt(hex.charAt(0) + h.charAt(1), 16),
    	parseInt(hex.charAt(2) + h.charAt(2), 16),
    	parseInt(hex.charAt(4) + h.charAt(5), 16),
    ]
}
$("input").on('change', function() {
    $("#hslout").html(
        'hsl(' +
        $("#hue").val() + ', ' +
        $("#sat").val() + '%, ' +
        $("#lgt").val() +
        '%)')
    var rgbvals = hslToRgb($("#hue").val() / 360.0, $("#sat").val() / 100.0, $("#lgt").val() / 100.0);

    $("#rgbout").html(
        'rgb(' +
        rgbvals[0] + ', ' +
        rgbvals[1] + ', ' +
        rgbvals[2] +
        ')')

    $("#hexout").html(
        rgb2hex($("#rgbout").html())
    )

   ...