JSFiddle - React, Tailwind, and code Playground

HTML

<div id="spacer">
    <input id="named" type="text" alt="Enter a color: red, magenta, teal, etc" />
    <button id="go">convert</button>
    <div id="color"></div>
    <div id="values">
        <div id="hex"><strong>Hex Value:</strong></div>
        <div id="rgb"><strong>RGB Value:</strong></div>
    </div>
</div>

CSS

#spacer{
            margin: 50px;
        }
        
        #named
        {
            width: 175px;
        }
        
        input{ float: left; }
        
        #color
        {
            height: 50px;
            width: 50px;
            margin-top: 20px;
            background: #f8f8ff;
            border: 1px solid #999;
            border-radius: 25px;
            -moz-box-shadow: 0px 1px 5px -2px #888;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
        }
        
        #values{
            margin-top: 8px;
        }
        
        .overTxtLabel
        {
            padding-top: 1px;
            font-size: 10px;
            color: #999;
        }

JavaScript

/*** The crazy cross-browserization ***/

(function(String){
    
    var valueMatch = {
            'rgb(0,0,0)': { 'black': ' ', 'rgb(0,0,0)': ' ' },
            'rgba(0,0,0,0)': { 'transparent': ' ', 'rgba(0,0,0,0)': ' ' },
            '#ffffff': { 'transparent': ' ' },
            'transparent': { 'transparent': ' ' }
        },
        colorFromProbe = function(color){
            color = color.toString();
            if(!color.match(/^#.+$|^[^0-9]+$/)) return color;
            var probe = ($('moo_color_probe') || new Element('textarea', {
                    'id': 'moo_color_probe',
                    'styles': {
                        'display': 'none',
                        'color': 'transparent'
                    }
                }).inject(document.body, 'after'));
            try{ probe.setStyle('color', color) } catch(e){ return color } //IE throws an error instead of defaulting the style to some color or transparent when the value is unrecognized
            var computed = (Browser.ie) ? ieColorToHex(probe) : (Browser.opera) ? probe.style.color : probe.getComputedStyle('color'),
                match = valueMatch[computed.replace(/ /g, '')];
            probe.setStyle('color', 'transparent');
            if((!Browser.ie || Browser.ie9) && color == 'transparent' && (match && match['transparent'])) return 'rgba(0, 0, 0, 0)';
            return (computed == 'transparent' || match && !match[color.replace(/ /g, '')]) ? color : computed;
        },
        ieColorToHex = function(probe){ // Special IE mojo, thanks to Dean Edwards for the inspiration, his code used a pop-up window to test the color, I found you can simply use a textarea instead ;)
            var value = probe.set('value', '').createTextRange().queryCommandValue("ForeColor");
            value = (((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16)).toString(16);
            return "#000000".slice(0, 7 - value.length) + value;
        };
        
       ...