JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <style>
            div {
                display:inline-block;
                height:300px;
                width:300px;
                box-shadow:0px 0px 10px black;
                background:red;
                border-radius:5px;
            }
        </style>
        <script>
            window.onload = function () {
                var colorDiv = document.getElementById("colorDiv");
                var l_range = document.getElementById("cur_l_r");
                var l_label = document.getElementById("cur_l_l");
                var r_range = document.getElementById("cur_r_r");
                var r_label = document.getElementById("cur_r_l");
                var g_range = document.getElementById("cur_g_r");
                var g_label = document.getElementById("cur_g_l");
                var b_range = document.getElementById("cur_b_r");
                var b_label = document.getElementById("cur_b_l");
                var recalc = document.getElementById("recalc");

                function calcLightness(l, r, g, b) {
                    var tmp_r = r;
                    var tmp_g = g;
                    var tmp_b = b;

                    tmp_r = (255 - r) * l + r;
                    tmp_g = (255 - g) * l + g;
                    tmp_b = (255 - b) * l + b;

                    if (tmp_r > 255 || tmp_g > 255 || tmp_b > 255) 
                        return { r: r, g: g, b: b };
                    else 
                        return { r:parseInt(tmp_r), g:parseInt(tmp_g), b:parseInt(tmp_b) }
                }

                function sliderChange() {
                    var color = calcLightness(parseInt(l_range.value) / 100, parseInt(r_range.value), parseInt(g_range.value), parseInt(b_range.value));
                    colorDiv.style.background = "rgb(" + color.r + "," + color.g + "," + color.b + ")";

                    if (this === l_range) {
                        if(recalc.checked)
                           ...