javascriptsource 사이트에서 다운받아 사용하고 있는 것입니다.
스타일을 약간 수정하고 백그라운드가 색상이 바뀌는 것 없애고 사용하니 좀 낫네요..
북마크바에다 달아놓고 쓰니 코딩할때 편하네요.
[출처: http://www.javascriptsource.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title>색상표 코드 스크립트</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!--//Heres the code for the RGB in paint.
function rgb(x)
{
var value=0;
var value_array=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
var first=x.charAt(0);
var second=x.charAt(1);
var a=0;
var b=0;
while (value_array[value]!=first)
{
value++;
a=a+16;
}
value="0";
while (value_array[value]!=second)
{
value++;
b++;
}
x=a+b;
return x;
}
// end RGB in paint-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Heres the code to type in you own Hexadecimal value
function changeBack()
{
var hex=window.document.f.c.value;
document.bgColor=hex;
var hex1=hex.charAt(0);
if (hex1!="#")
{
hex=document.bgColor;
}
var red=hex.substring (1,3);
var rdd=rgb(red);
document.bb.re.value=rdd;
var green=hex.substring (3,5);
var grn=rgb(green);
document.cc.gr.value=grn;
var blue=hex.substring (5,7);
var blue1=rgb(blue);
document.dd.bl.value=blue1;
}
// End own Hexadecimal-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--Here\'s the code to type in your own RGB
function changeBackRGB()
{
var red=window.document.bb.re.value;
var green=window.document.cc.gr.value;
var blue=window.document.dd.bl.value;
red1=rgb_hex(red);
green1=rgb_hex(green);
blue1=rgb_hex(blue);
var hex="#"+red1+green1+blue1;
document.bgColor=hex;
document.f.c.value=hex;
}
// End your own RGB-->
//<!-- Change from RGB to hexadecimal
function rgb_hex(colour)
{
var rgb_array=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
if (colour==0)
{
var colour="00";
return colour;
}
else
{
var y=colour/16;
var y=y+"a";
if (y.indexOf(".")==-1)
{
var hex2="0";
var u=y.indexOf("a");
var q=y.substring(0,u);
var hex1=rgb_array[q];
}
else
{
var l=y.split(".");
var q=l[0];
var z=q*16;
var xyz=colour-z;
var hex1=rgb_array[q];
var hex2=rgb_array[xyz];
}
var colour=hex1+hex2;
return colour;
}
}
// end-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--Here\'s the background changer for the cube
leftclick=0;
function r(hval)
{
if (leftclick==0)
{
// 아래 주석표시를 제거하면 background color가 같이 변화 합니다.
// document.bgColor=hval;
document.f.c.value=hval;
var red=hval.substring (1,3);
var rdd=rgb(red);
document.bb.re.value=rdd;
var green=hval.substring (3,5);
var grn=rgb(green);
document.cc.gr.value=grn;
var blue=hval.substring (5,7);
var blue1=rgb(blue);
document.dd.bl.value=blue1;
document.colour1.colour2.value="";
}
}
//end changer
//Heres the lock button
function lock()
{
if (leftclick==0)
{
leftclick=1;
}
else
{
leftclick=0;
}
}
//end lock-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Reverse Lookup Color
function changeColor()
{
var clr=window.document.colour1.colour2.value;
document.f.c.value=clr;
var clr=changeBack();
var clr=changeBackRGB();
}
// End Reverse Lookup Color-->
</script>
<style>
.color-a {
width:500px;
margin:auto;
border:1px solid black;
padding: 20px 0 10px 0;
box-shadow:3px 3px 5px #999;
}
.textall {width:110px;text-align:center;font-weight:bolder;}
</style>
</head>
<body>
<center>
<br/>
<h3>[ 색 상 표 ]</H3></center>
<center><span style="font-size:12px">원본 스크립트를 아주 약간 수정했어요<br/><br/></span></center>
<div class="color-a">
<center>
<table>
<SCRIPT LANGUAGE="JavaScript">
<!-- Cube Maker
var hex_Red=new Array("00","33","66","99","cc","ff");
var hex_Green=new Array("00","33","66","99","cc","ff");
var hex_Blue=new Array("00","33","66","99","cc","ff");
var hexred="00";
var hexgreen="00";
var hexblue="00";
var red=0;
var green=0;
var blue=0;
var x=0;
var y=0;
var z=0;
var xyz=0;
while (y<6)
{
window.document.write("<tr>");
var x=0;
var hexblue=hex_Blue[blue];
while (x<6)
{
var z=0;
var hexgreen=hex_Green[green];
while (z<6)
{
var hexred=hex_Red[red];
var hexadecimal="#"+hexred+hexgreen+hexblue;
window.document.write("<td bgColor="+hexadecimal+"><a href=\"javascript:lock()\" onmouseover=\"r(\'"+hexadecimal+"\'); return true\"><img src=\"\" border=\"0\" height=\"20\" width=\"20\"/></a></td>");
z++;
red++;
if (red==6)
{
red=0;
}
}
x++;
green++;
if (green==6)
{
green=0;
}
xyz++;
if (xyz==3)
{
window.document.write("</tr>");
xyz=0;
}
}
y++;
blue++
if (blue==6)
{
blue=0;
}
}
// End color cube. -->
</script>
</table>
</center>
<br/>
<center><form name="f" onSubmit="changeBack(); return false;"><input class="textall" type="text" name="c" size="7"></form></center>
</div>
<p></p>
<div class="color-a">
<table align="center">
<tr>
<td align="center" width="100"><span style="color:red; font-weight:bolder">R</span>ed</td>
<td align="center" width="100"><span style="color:green; font-weight:bolder">G</span>reen</td>
<td align="center" width="100"><span style="color:blue; font-weight:bolder">B</span>lue</td>
</tr>
<tr>
<td align="center"><form name="bb" onSubmit="changeBackRGB(); return false;"><input class="textall" type="text" name="re" size="2"></form></td>
<td align="center"><form name="cc" onSubmit="changeBackRGB(); return false;"><input class="textall" type="text" name="gr" size="2"></form></td>
<td align="center"><form name="dd" onSubmit="changeBackRGB(); return false;"><input class="textall" type="text" name="bl" size="2"></form></td>
</tr>
</table>
</div>
<p></p>
<center><span style="font-size:12px">칼라박스를 클릭하면 색상이 고정되고 <br/> 다른 칼라박스를 클릭하면 고정이 풀립니다.<br/><br/> [출처: http://www.javascriptsource.com] </span></center>
</body>
</html>
