Color Picker

by Tgwizman

HTML

<script src="http://html5man.com/jslibs/puredom.light.js"></script>
<div id="d1"></div>
<input type="range" id="rr1" max="255" min="0" value="0" /><br>
<input type="range" id="gr1" max="255" min="0" value="0" /><br>
<input type="range" id="br1" max="255" min="0" value="0" /><br>
<input type="text" id="lt1" value="RGB" readonly/>
<input type="text" id="rt1" value="0" />
<input type="text" id="gt1" value="0" />
<input type="text" id="bt1" value="0" />
<input type="text" id="lt2" value="HEX" readonly/>
<input type="text" id="ht1" value="#" readonly/>
<input type="text" id="ht2" value="000000" />

CSS

body {
    padding: 5px;
}

#d1 {
    margin: 0px;
    padding: 0px;
    display: block;
    float: left;
    width: 52px;
    height: 52px;
    border: 1px solid #999;
    background: #000;
}

#rr1, #gr1, #br1 {
    -webkit-appearance:none !important;
    margin: 0px;
    padding: 0px 1px;
    float: left;
    width: 150px;
    height: 16px;
    border: 1px solid #999;
    /* border-top: 1px solid #999; */
    border-left: none;
}

#rr1 {
    border-top: 1px solid #999;
}

#rr1::-webkit-slider-thumb,
#gr1::-webkit-slider-thumb,
#br1::-webkit-slider-thumb {
    -webkit-appearance:none !important;
    margin: 0px;
    padding: 0px;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
}

#rr1::-webkit-slider-thumb {background-color: #F00}
#gr1::-webkit-slider-thumb {background-color: #0F0}
#br1::-webkit-slider-thumb {background-color: #00F}

#lt1, #rt1, #gt1, #bt1, #lt2, #ht1, #ht2 {
    -webkit-appearance:none !important;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 24px;
    height: 16px;
    text-align: center;
    border: 1px solid #999;
    border-top: none;
    border-right: none;
    background: #FFF;
}

#lt1, #lt2 {
    width: 36px;
}

#ht1 {
    text-align: right;
    width: 10px;
}

#ht2 {
    width: 46px;
    text-align: left;
    border-left: none;
    border-right: 1px solid #999;
}

JavaScript

rgb = function(r,g,b) {
    return "rgb("+r+","+g+","+b+")";
};

function getHex() {
    puredom('#ht2').value(
        toHex(puredom('#rr1').value()) +
        toHex(puredom('#gr1').value()) +
        toHex(puredom('#br1').value()),
        {fireChange:false}
    );
}

function toHex(n) {
    n = parseInt(n,10);
    if (isNaN(n)) {
        return "00";
    }
    n = Math.max(0,Math.min(n,255));
    return "0123456789ABCDEF".charAt((n-n%16)/16) +
        "0123456789ABCDEF".charAt(n%16);
}

function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

colorDiv = function() {
    document.getElementById('d1').style.backgroundColor = 
        rgb(
            document.getElementById('rr1').value,
            document.getElementById('gr1').value,
            document.getElementById('br1').value
        );
};

puredom('#rr1').on('change', function() {
    puredom('#rt1').value(this.value, {fireChange:false});
    colorDiv();
    getHex();
});

puredom('#rt1').on('change', function() {
    puredom('#rr1').value(this.value, {fireChange:false});
    colorDiv();
    getHex();
});

puredom('#gr1').on('change', function() {
    puredom('#gt1').value(this.value, {fireChange:false});
    colorDiv();
    getHex();
});

puredom('#gt1').on('change', function() {
    puredom('#gr1').value(this.value, {fireChange:false});
    colorDiv();
    getHex();
});

puredom('#br1').on('change', function() {
    puredom('#bt1').value(this.value, {fireChange:false});
    colorDiv();
    getHex();
});

puredom('#bt1').on('change', function() {
    puredom('#br1').value(this.value, {fireChange:false});
    colorDiv();
    getHex();
});

puredom('#ht2').on('change', function() {
    puredom('#rr1').value(hexToR(this.value), {fireChange:false});
   ...