PDA

View Full Version : Converting RGBB to HEX

Grant Palin
12-13-2002, 12:52 AM
How can you use javascript to convert red, green, and blue color values to the Hex equivalent? How does it work?
cheesebagpipe
12-13-2002, 01:33 AM
http://dhtmlkitchen.com/js/utilities/color/index.jsp
whammy
12-13-2002, 01:53 AM
I don't know where you came from, cheesebagpipe - but welcome to the forums! I've seen you giving a lot of useful answers tonight. ;)
jtr
12-13-2002, 05:13 AM
<html>
<head>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from Non-JavaScript Browsers
/* Script by CompuH@cker
compuhacker@geocities.com
http://www.geocities.com/SiliconValley/Vista/8435
*/
function GiveDec(Hex)
{
if(Hex == "A")
Value = 10;
else
if(Hex == "B")
Value = 11;
else
if(Hex == "C")
Value = 12;
else
if(Hex == "D")
Value = 13;
else
if(Hex == "E")
Value = 14;
else
if(Hex == "F")
Value = 15;
else
Value = eval(Hex);

return Value;
}

function GiveHex(Dec)
{
if(Dec == 10)
Value = "A";
else
if(Dec == 11)
Value = "B";
else
if(Dec == 12)
Value = "C";
else
if(Dec == 13)
Value = "D";
else
if(Dec == 14)
Value = "E";
else
if(Dec == 15)
Value = "F";
else
Value = "" + Dec;

return Value;
}

function HexToDec()
{
Input = window.document.forms['ColorForm'].elements['HexInput'].value;

Input = Input.toUpperCase();

a = GiveDec(Input.substring(0, 1));
b = GiveDec(Input.substring(1, 2));
c = GiveDec(Input.substring(2, 3));
d = GiveDec(Input.substring(3, 4));
e = GiveDec(Input.substring(4, 5));
f = GiveDec(Input.substring(5, 6));

x = (a * 16) + b;
y = (c * 16) + d;
z = (e * 16) + f;

window.document.forms['ColorForm'].elements['RedOutput'].value = x;
window.document.forms['ColorForm'].elements['GreenOutput'].value = y;
window.document.forms['ColorForm'].elements['BlueOutput'].value = z;
window.document.bgColor = Input;
}

function DecToHex()
{
Red = window.document.forms['ColorForm'].elements['RedInput'].value;
Green = window.document.forms['ColorForm'].elements['GreenInput'].value;
Blue = window.document.forms['ColorForm'].elements['BlueInput'].value;

a = GiveHex(Math.floor(Red / 16));
b = GiveHex(Red % 16);
c = GiveHex(Math.floor(Green / 16));
d = GiveHex(Green % 16);
e = GiveHex(Math.floor(Blue / 16));
f = GiveHex(Blue % 16);

z = a + b + c + d + e + f;

window.document.forms['ColorForm'].elements['HexOutput'].value = z;
window.document.bgColor = z;
}
// -->
</SCRIPT>

<title>hex2rgb</title>
</head>

<body>

<CENTER>
<TABLE WIDTH="90%">
<FORM NAME="ColorForm">
<TR>
<TH COLSPAN=3>
Hex Code
<TH COLSPAN=3>
<TH>
Red
<TH>
Green
<TH>
Blue

<TR>
<TD COLSPAN=3>
<INPUT TYPE="Text" SIZE="36" NAME="HexInput">
<TD COLSPAN=3>
<INPUT TYPE="Button" VALUE="Hex -> Dec" onClick="HexToDec()">
<TD>
<INPUT TYPE="Text" SIZE="10" NAME="RedOutput">
<TD>
<INPUT TYPE="Text" SIZE="10" NAME="GreenOutput">
<TD>
<INPUT TYPE="Text" SIZE="10" NAME="BlueOutput">

<TR>
<TD COLSPAN=9>
<HR>

<TR>
<TH>
Red
<TH>
Green
<TH>
Blue
<TH COLSPAN=3>
<TH COLSPAN=3>
Hex Code

<TR>
<TD>
<INPUT TYPE="Text" SIZE="10" NAME="RedInput">
<TD>
<INPUT TYPE="Text" SIZE="10" NAME="GreenInput">
<TD>
<INPUT TYPE="Text" SIZE="10" NAME="BlueInput">
<TD COLSPAN=3>
<INPUT TYPE="Button" VALUE="Dec -> Hex" onClick="DecToHex()">
<TD COLSPAN=3>
<INPUT TYPE="Text" SIZE="36" NAME="HexOutput"></TD>
</FORM></TABLE></CENTER>
<BR><BR><BR>

</body>
</html>