JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<input type="text">
<button>Convert to RGB</button>
<div id="resukt">Result: <span></span>

</div>

JavaScript

$(document).ready(function () {
    $("button").click(function () {
        var span = $("span"),
            val = $("input[type=text]").val();

        span.text($.rgbGenerator(val));
    });
});

(function ($) {
    $.rgbGenerator = function (color, options) {
        var args = $.extend({
            asObject: false,
            addAlpha: false,
            removeAlpha: false
        }, options);

        var d = $("<div>");
        
        d.css("color", color).appendTo("body");
        
        var rgb = d.css("color");
        
        rgb = rgb.replace(/(^rgba?\(|\)$|\s)/g, "").split(",").map(Number);
        d.remove();

        if (args.asObject) {
            var obj = {
                r: rgb[0],
                g: rgb[1],
                b: rgb[2]
            };
            if (args.addAlpha !== false && args.removeAlpha === false) {
                obj.a = args.addAlpha;
            } else if (rgb.length == 4 && args.removeAlpha === false) {
                obj.a = rgb[3];
            }
            
            console.log(obj);
            return obj;
        }
        var prefix = ((args.addAlpha !== false  || rgb.length == 4) && args.removeAlpha === false) ? "rgba" : "rgb",
            alpha = "";
        if (args.addAlpha !== false  && args.removeAlpha === false) {
            alpha = "," + args.addAlpha;
        }
        else if (rgb.length == 4  && args.removeAlpha === false) {
            alpha = "," + rgb[3];
        }
        
        console.log(prefix + "(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + alpha + ")");
        return prefix + "(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + alpha + ")";
    };
})(jQuery);