Conversor de cores

Conversor de cores de rgb pra hexa e de hexa pra rgb.

by ravan

HTML

<h1 id="title">Conversor de cores</h1>
<span>Valores aceitos: <br/>
    rgb(x,x,x), rgba(x,x,x,x)<br/>
    #xxxxxx, #xxx<br/>
</span>
<input type="text" id="text" /><br/>
<input type="button" id="go" value="Converter!" /><br/>

CSS

html, body {
    text-align: center;
    font-family: 'Helvetica', 'Lucida Grande', arial, serif;
}
h1 {
    font-weight: bold;
    font-size: 1.6em;
    margin: 20px;
    text-shadow: 3px 2px 1px rgba(0,0,0,0.4);
}
input {
    margin: 20px 0 2px 0;
    padding: 10px;
    font-size: 1.2em;
}

span {
    color: #ccc;
}

JavaScript

function hex2rgb(hex) {
    var rgb = 'rgb(';

    if (hex.length == 4) {
        var aux = hex;
        hex = '#';
        for (i = 1; i < 4; i++) {
            hex += aux[i] + aux[i];
        }
    }

    for (var i = 1; i < 4; i += 2) {
        rgb += parseInt(hex.slice(i, i + 2), 16) + ',';
    }

    rgb += parseInt(hex.slice(i, i + 2), 16) + ')';
    return rgb;
}

function rgb2hex(rgb) {
    var hex = '#';
    var colors = rgb.match(/\d+/g);
    for (i = 0; i < 3; i++) {
        var d = parseInt(colors[i]);
        if(d > 255 || d < 0) return 'Inválido!';
        var c = d.toString(16);
        hex += c.length > 1 ? c : '0' + c;
    }
    return hex;
}

function detect() {
    var t = document.getElementById('text');
    var h = document.getElementById('title');
    var text = t.value;
    if (/^#[0-9a-f]{6}$/i.test(text) || /^#[0-9a-f]{3}$/i.test(text)) {
        t.value = h.style.color = hex2rgb(text);
    } else if (/^rgb\((\d{1,3},){2}\d{1,3}\)$/i.test(text) ||
               /^rgba\((\d{1,3},){3}[01]\.\d\)$/i.test(text)) {
        t.value = h.style.color = rgb2hex(text);
    } else {
        t.value = 'Inválido!';
        t.style.color = '#000';
    }
}

document.getElementById('go').addEventListener('click', detect, false);


document.getElementById('text').addEventListener('keypress', function(event) {
    if (event.keyCode == 13) {
        detect();
    }
});