Monday, October 11, 2010

Javascript hex decimal rgb simple converter

<html>
<style>
body,ul,li{padding:0px;margin:0px;}
div {display:block;}
ul {list-style: none;background-color:red;height:60px;line-height:50px;}
li {float:left;background-color:green;height:50px;line-height:40px;}
a {font-family:arial,sans-serif;color:red;
background-color:yellow;padding:10px;height:20px;line-height:20px;}
</style>
<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var c = $("a").css("color");
var s = JCOLOR2HTML(c);
alert(HTML2RGB(s,"red"));
});

//0070FF=rgb(0, 70, 255);
function JCOLOR2HTML(color)
{
    var rgbString = color.toString();
    var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    // parts now should be ["rgb(0, 70, 255", "0", "70", "255"]
    delete (parts[0]);
    for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    var hexString = parts.join('');
    return hexString;
}
//FFFFFF=RGB2HTML(255, 255, 255);
function RGB2HTML(red, green, blue)
{
    var decColor = red + 256 * green + 65536 * blue;
    return decColor.toString(16);
}
//FF=RGB2HEX(255);
function RGB2HEX(rgb) {
var char = "0123456789ABCDEF";
return String(char.charAt(Math.floor(rgb / 16))) + String(char.charAt(rgb - (Math.floor(rgb / 16) * 16)));
}
//255=HEX2RGB("FF0000", "red");
function HEX2RGB(hex, name)
{
    hex = hex.replace('#', '');   
    if(name == null) name="red";
    if(name == 0) name='red';
    if(name == 1) name='green';
    if(name == 2) name='blue';   
    var s = (""+name).toLowerCase();
    if( s == 'red' ) return HTML2DEC(hex.substr(0,2));
    if( s == 'green' ) return HTML2DEC(hex.substr(2,2));
    if( s == 'blue' ) return HTML2DEC(hex.substr(4,2));
    else return HTML2DEC(hex);
}
//FFFFFF=DEC2HTML(16777215);
function DEC2HEX(d) {return d.toString(16);}
//255=HTML2DEC("FF");
function DEC2HEX(h) {return parseInt(h,16);}

</script>
<div><ul><li><a href="#">Product Search.</a></li></ul></div>
</body>
</html>

No comments: