NESGamepro.com - Javascript Hex <=> RGB

This Javascript tool will convert Hexadecimal (Hex) color values to Red, Green, Blue (RGB) values and vice versa. The color will be dispalyed as the background whenever you change a value.

There is full error checking included so you must enter valid Hex and RGB values.

Working Example - Text File - Zip File

Cut & Paste

<html>
<head><title>Hex &lt;=&gt; RGB</title>

<script>
<!-- Hide
// Hex <=> RGB (JS)  v1.0     July 2004
// by NESGamepro -    http://nescgi.com
// Please keep credit intact
// You may modify this script if you wish

var ct=0; var hrgb=new Array(); var hx=new Array(); var invbase=new Array(); var j=16;
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
for(i=0; i<16; i++) { for(j=0; j<16; j++) { cd = hexbase[i]+hexbase[j]; hrgb[ct] = cd; hx[cd] = ct; ct++; } }
for(i=0; i<16; i++) { j--; iv = hexbase[i]; invbase[iv] = hexbase[j]; }

function SetClr(clr) {
 document.bgColor = clr;
 inverse = "#";
 for(i=1; i<clr.length; i++) { inverse += invbase[clr.charAt(i)]; }
 document.fgColor = inverse;
}

function hexError() {
 alert("An invalid Hex value was entered. A valid value is exactly 6 characters using 0-9 and A-F (case insensitive). An optional pound sign \"#\" may be included at the beginning as well.");
}

function setHex() {
 var clr = document.clr.hex.value;
 if (clr.charAt(0) != "#") { clr = "#"+clr; }
 if (clr.length != 7) { hexError(); }
 else {
  hexval=clr.toLowerCase();
  r1=hexval.substring(1,3); g1=hexval.substring(3,5); b1=hexval.substring(5,7);
  r2=eval(parseInt(r1,16)); g2=eval(parseInt(g1,16)); b2=eval(parseInt(b1,16));
  if (r2 >= 0 && r2 <= 255 && g2 >= 0 && g2 <= 255 && b2 >= 0 && b2 <= 255){
   SetClr(hexval);
   document.clr.hex.value = clr;
   document.clr.rd.value=hx[r1];
   document.clr.gr.value=hx[g1];
   document.clr.bl.value=hx[b1];
  }
  else{ hexError(); }
 }
}

function isNum(Val) {
 if (Val == "") { return false; }
 for (i=0; i<Val.length; i++) {
  if (Val.charAt(i) < "0") { return false; }
  if (Val.charAt(i) > "9") { return false; }
 }
 return true;
}

function setRGB(){
 Rd = document.clr.rd.value;
 Gr = document.clr.gr.value;
 Bl = document.clr.bl.value;
 if (Rd >= 0 && Rd <= 255 && isNum(Rd) && Gr >= 0 && Gr <= 255 && isNum(Gr) && Bl >= 0 && Bl <= 255 && isNum(Bl)) {
  r1 = eval(Rd); g1 = eval(Gr); b1 = eval(Bl);
  document.clr.rd.value = r1; document.clr.gr.value = g1; document.clr.bl.value = b1;
  r2 = hrgb[r1]; g2 = hrgb[g1]; b2 = hrgb[b1];
  var rgb = "#"+r2+g2+b2;
  document.clr.hex.value = rgb;
  SetClr(rgb);
 }
 else { alert("An invalid RGB value was entered. A valid value is a number between 0 and 255 in all three fields."); }
}

// End Hide -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" onLoad="setHex()">

<center>
<form name="clr">
<table><tr><td>Hex </td><td><input type="text" name="hex" size="7" maxlength="7" onFocus="this.select()" value="#ffffff"></td><td><input type="button" name="a" value="Hex 2 RGB" onClick="setHex()"></td></tr>
<tr><td>RGB </td>
<td><input type="text" name="rd" size="3" maxlength="3" onFocus="this.select()" text="#ff0000" style="color:#ff0000">
<input type="text" name="gr" size="3" maxlength="3" onFocus="this.select()" text="#008000" style="color:#008000">
<input type="text" name="bl" size="3" maxlength="3" onFocus="this.select()" text="#0000ff" style="color:#0000ff"></td>
<td><input type="button" name="a" value="RGB 2 Hex" onClick="setRGB()"></td></tr>
</table>
</form>
</center>

</body>
</html>