Convert named HTML color to HEX using jQuery

by salman

HTML

<p>Enter a <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">named color</a> here</p>
<p><input type="text" id="input1"/> <input type="button" value="go"/></p>
<p id="output1" style="border: 1px solid #000000;">output displays here</p>

CSS

* {
    font-family: monospace;
}

JavaScript

function namedColorToHex(namedColor) {
    var rgbColor = $("<div></div>").css("background-color", namedColor).css("background-color");
    var match = rgbColor.match(/\d+/i);
    var value = (+match[0] << 16) + (+match[1] << 8) + (+match[2] << 0);
    var hexColor = value.toString(16);
    while (hexColor.length < 6) {
        hexColor = "0" + hexColor;
    }
    return "#" + hexColor;
}

$("#input1").change(function() {
    var val = $(this).val();
    $("#output1").css("background-color", val).html(namedColorToHex(val));
    $(this).select();
});