JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<h2>Input color</h2>
<input type="text" id="in" value="red" />

<h2>Output color</h2>
<input type="text" id="out" />

JavaScript

var txtInput = $("#in");
var txtOutput = $("#out");

function convertToHexColor(englishColor) {
    var div = $('<div></div>').appendTo("body").css('background-color', englishColor);
    var computedStyle = window.getComputedStyle(div[0]);
    var computedColor = computedStyle.backgroundColor;
    div.remove();
    return computedColor;
};

function convertRGBDecimalToHex(rgb)
{
    var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/;
    var values = regex.exec(rgb);
    if(values.length != 4)
    {
        return rgb; // fall back to what was given.              
    }
    var r = Math.round(parseFloat(values[1]));
    var g = Math.round(parseFloat(values[2]));
    var b = Math.round(parseFloat(values[3]));
    return "#" 
        + (r + 0x10000).toString(16).substring(3).toUpperCase() 
        + (g + 0x10000).toString(16).substring(3).toUpperCase()
        + (b + 0x10000).toString(16).substring(3).toUpperCase();
}

function onInputChanged() {
    var decimalColor = convertToHexColor(txtInput.val());
    var hexColor = convertRGBDecimalToHex(decimalColor);
    txtOutput.val(hexColor.toString());
};

txtInput.change(onInputChanged);
txtInput.change();