Kode Warna HTML + Update

Select color:   #B20100 Selected color:

Darker/lighter shades: Hex values:   #000000   #1A0000   #330000   #4C0000   #660000   #800000   #990000   #B20000   #CC0000   #E60000   #FF0000 #FF1919 #FF3333 #FF4D4D #FF6666 #FF8080 #FF9999 #FFB2B2 #FFCCCC #FFE6E6 #FFFFFF

Tak kenal maka tak sayang, padahal kalau kita hendak mendesain website, tentunya kita tak luput dengan yang namanya kode warna yang akan di pakai pada html.

Nah, Pada kesempatan kali ini kita akan membuat kode warna untuk html dan agar supaya kita lebih akrab memanggilnya dengan aksara dan angka sesuai penciptanya yang menciptakannya..

ihhh kayak film drama aja..

oke langsung bergeser sedikit ke depan monitor dan tatap mata saya... hehehe..
Ini kodenya :

BLOK CODE

<br /> <script><br /> <!--<br /> var colorhex="#FF0000"<br /> function mouseOverColor(hex)<br /> {<br /> document.getElementById("divpreview").style.backgroundColor=hex;<br /> document.getElementById("divpreviewtxt").innerHTML=hex;<br /> document.body.style.cursor="pointer";<br /> }<br /> function mouseOutMap()<br /> {<br /> document.getElementById("divpreview").style.backgroundColor=colorhex;<br /> document.getElementById("divpreviewtxt").innerHTML=colorhex;<br /> document.body.style.cursor="";<br /> }<br /> function clickColor(hex,seltop,selleft)<br /> {<br /> var xhttp,c<br /> if (hex==0)<br /> {<br /> c=document.getElementById("colorhex").value;<br /> }<br /> else<br /> {<br /> c=hex;<br /> }<br /> if (c.substr(0,1)=="#")<br /> {<br /> c=c.substr(1);<br /> }<br /> colorhex="#" + c;<br /> colorhex=colorhex.substr(0,10);<br /> document.getElementById("colorhex").value=colorhex;<br /> if (window.XMLHttpRequest)<br /> {<br /> xhttp=new XMLHttpRequest();<br /> }<br /> else<br /> {<br /> xhttp=new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br /> xhttp.open("http://w3schools.com/tags/GET","http_colorshades425b.html?colorhex=" + c + "&r=" + Math.random(),false);<br /> xhttp.send("");<br /> document.getElementById("colorshades").innerHTML=xhttp.responseText;<br /> if (seltop>-1 && selleft>-1)<br /> {<br /> document.getElementById("selectedColor").style.top=seltop + "px";<br /> document.getElementById("selectedColor").style.left=selleft + "px";<br /> document.getElementById("selectedColor").style.visibility="visible";<br /> }<br /> else<br /> {<br /> document.getElementById("divpreview").style.backgroundColor=colorhex;<br /> document.getElementById("divpreviewtxt").innerHTML=colorhex;<br /> document.getElementById("selectedColor").style.visibility="hidden";<br /> }<br /> //refreshleader()<br /> }<br /> //--><br /> </script><br /> <form name="colorform" id="colorform" method="get" action="http://codestyle.blogspot.com/2010/12/kode-warna-html.html"><br /> <table style="width:100%;border:0"><br /> <tbody><tr><br /> <td valign="top" style="width:250px;"><br /> Select color:<br /> <div style="visibility: visible; position: relative; width: 21px; height: 21px; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAlJ-THjDba_koKX3dPgUktxOV0Z9FJ-IOXLhbp1Es_Z8qoCn0yMcSoiS0NrgvkuULwvKvSUDAFQFbzuyHeO1oV5-Kji-5OgUDMKUssb-hhDOAHWXwaTCmvq4L5Y8BwShyXFBtTy8np9ei/s1600/selectedcolor.gif'); top: 185px; left: 135px;" id="selectedColor"></div><img alt="colormap" usemap="#colormap" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMp4RWLIr7SQeqGeWnJPkO6JAsTNVw6VK8BgOWqnJ5iYDutzTP4wzVqbG2uPsVceS0SZ5RvlUQJBNra2mpWKa5mS7healqfvVhtr8HGKbfwk0Ek-JP4zjlb2t75NzPsZdLVbRhV_Xc91M/s1600/colormap.gif" style="margin-right:2px;"><map onmouseout="mouseOutMap()" name="colormap" id="colormap"><area alt="#003366" onmouseover="mouseOverColor(&quot;#003366&quot;)" onclick="clickColor(&quot;#003366&quot;,20,54)" coords="63,0,72,4,72,15,63,19,54,15,54,4" shape="poly" style="cursor:pointer"><area alt="#336699" onmouseover="mouseOverColor(&quot;#336699&quot;)" onclick="clickColor(&quot;#336699&quot;,20,72)" coords="81,0,90,4,90,15,81,19,72,15,72,4" shape="poly" style="cursor:pointer"><area alt="#3366CC" onmouseover="mouseOverColor(&quot;#3366CC&quot;)" onclick="clickColor(&quot;#3366CC&quot;,20,90)" coords="99,0,108,4,108,15,99,19,90,15,90,4" shape="poly" style="cursor:pointer"><area alt="#003399" onmouseover="mouseOverColor(&quot;#003399&quot;)" onclick="clickColor(&quot;#003399&quot;,20,108)" coords="117,0,126,4,126,15,117,19,108,15,108,4" shape="poly" style="cursor:pointer"><area alt="#000099" onmouseover="mouseOverColor(&quot;#000099&quot;)" onclick="clickColor(&quot;#000099&quot;,20,126)" coords="135,0,144,4,144,15,135,19,126,15,126,4" shape="poly" style="cursor:pointer"><area alt="#0000CC" onmouseover="mouseOverColor(&quot;#0000CC&quot;)" onclick="clickColor(&quot;#0000CC&quot;,20,144)" coords="153,0,162,4,162,15,153,19,144,15,144,4" shape="poly" style="cursor:pointer"><area alt="#000066" onmouseover="mouseOverColor(&quot;#000066&quot;)" onclick="clickColor(&quot;#000066&quot;,20,162)" coords="171,0,180,4,180,15,171,19,162,15,162,4" shape="poly" style="cursor:pointer"><area alt="#006666" onmouseover="mouseOverColor(&quot;#006666&quot;)" onclick="clickColor(&quot;#006666&quot;,35,45)" coords="54,15,63,19,63,30,54,34,45,30,45,19" shape="poly" style="cursor:pointer"><area alt="#006699" onmouseover="mouseOverColor(&quot;#006699&quot;)" onclick="clickColor(&quot;#006699&quot;,35,63)" coords="72,15,81,19,81,30,72,34,63,30,63,19" shape="poly" style="cursor:pointer"><area alt="#0099CC" onmouseover="mouseOverColor(&quot;#0099CC&quot;)" onclick="clickColor(&quot;#0099CC&quot;,35,81)" coords="90,15,99,19,99,30,90,34,81,30,81,19" shape="poly" style="cursor:pointer"><area alt="#0066CC" onmouseover="mouseOverColor(&quot;#0066CC&quot;)" onclick="clickColor(&quot;#0066CC&quot;,35,99)" coords="108,15,117,19,117,30,108,34,99,30,99,19" shape="poly" style="cursor:pointer"><area alt="#0033CC" onmouseover="mouseOverColor(&quot;#0033CC&quot;)" onclick="clickColor(&quot;#0033CC&quot;,35,117)" coords="126,15,135,19,135,30,126,34,117,30,117,19" shape="poly" style="cursor:pointer"><area alt="#0000FF" onmouseover="mouseOverColor(&quot;#0000FF&quot;)" onclick="clickColor(&quot;#0000FF&quot;,35,135)" coords="144,15,153,19,153,30,144,34,135,30,135,19" shape="poly" style="cursor:pointer"><area alt="#3333FF" onmouseover="mouseOverColor(&quot;#3333FF&quot;)" onclick="clickColor(&quot;#3333FF&quot;,35,153)" coords="162,15,171,19,171,30,162,34,153,30,153,19" shape="poly" style="cursor:pointer"><area alt="#333399" onmouseover="mouseOverColor(&quot;#333399&quot;)" onclick="clickColor(&quot;#333399&quot;,35,171)" coords="180,15,189,19,189,30,180,34,171,30,171,19" shape="poly" style="cursor:pointer"><area alt="#669999" onmouseover="mouseOverColor(&quot;#669999&quot;)" onclick="clickColor(&quot;#669999&quot;,50,36)" coords="45,30,54,34,54,45,45,49,36,45,36,34" shape="poly" style="cursor:pointer"><area alt="#009999" onmouseover="mouseOverColor(&quot;#009999&quot;)" onclick="clickColor(&quot;#009999&quot;,50,54)" coords="63,30,72,34,72,45,63,49,54,45,54,34" shape="poly" style="cursor:pointer"><area alt="#33CCCC" onmouseover="mouseOverColor(&quot;#33CCCC&quot;)" onclick="clickColor(&quot;#33CCCC&quot;,50,72)" coords="81,30,90,34,90,45,81,49,72,45,72,34" shape="poly" style="cursor:pointer"><area alt="#00CCFF" onmouseover="mouseOverColor(&quot;#00CCFF&quot;)" onclick="clickColor(&quot;#00CCFF&quot;,50,90)" coords="99,30,108,34,108,45,99,49,90,45,90,34" shape="poly" style="cursor:pointer"><area alt="#0099FF" onmouseover="mouseOverColor(&quot;#0099FF&quot;)" onclick="clickColor(&quot;#0099FF&quot;,50,108)" coords="117,30,126,34,126,45,117,49,108,45,108,34" shape="poly" style="cursor:pointer"><area alt="#0066FF" onmouseover="mouseOverColor(&quot;#0066FF&quot;)" onclick="clickColor(&quot;#0066FF&quot;,50,126)" coords="135,30,144,34,144,45,135,49,126,45,126,34" shape="poly" style="cursor:pointer"><area alt="#3366FF" onmouseover="mouseOverColor(&quot;#3366FF&quot;)" onclick="clickColor(&quot;#3366FF&quot;,50,144)" coords="153,30,162,34,162,45,153,49,144,45,144,34" shape="poly" style="cursor:pointer"><area alt="#3333CC" onmouseover="mouseOverColor(&quot;#3333CC&quot;)" onclick="clickColor(&quot;#3333CC&quot;,50,162)" coords="171,30,180,34,180,45,171,49,162,45,162,34" shape="poly" style="cursor:pointer"><area alt="#666699" onmouseover="mouseOverColor(&quot;#666699&quot;)" onclick="clickColor(&quot;#666699&quot;,50,180)" coords="189,30,198,34,198,45,189,49,180,45,180,34" shape="poly" style="cursor:pointer"><area alt="#339966" onmouseover="mouseOverColor(&quot;#339966&quot;)" onclick="clickColor(&quot;#339966&quot;,65,27)" coords="36,45,45,49,45,60,36,64,27,60,27,49" shape="poly" style="cursor:pointer"><area alt="#00CC99" onmouseover="mouseOverColor(&quot;#00CC99&quot;)" onclick="clickColor(&quot;#00CC99&quot;,65,45)" coords="54,45,63,49,63,60,54,64,45,60,45,49" shape="poly" style="cursor:pointer"><area alt="#00FFCC" onmouseover="mouseOverColor(&quot;#00FFCC&quot;)" onclick="clickColor(&quot;#00FFCC&quot;,65,63)" coords="72,45,81,49,81,60,72,64,63,60,63,49" shape="poly" style="cursor:pointer"><area alt="#00FFFF" onmouseover="mouseOverColor(&quot;#00FFFF&quot;)" onclick="clickColor(&quot;#00FFFF&quot;,65,81)" coords="90,45,99,49,99,60,90,64,81,60,81,49" shape="poly" style="cursor:pointer"><area alt="#33CCFF" onmouseover="mouseOverColor(&quot;#33CCFF&quot;)" onclick="clickColor(&quot;#33CCFF&quot;,65,99)" coords="108,45,117,49,117,60,108,64,99,60,99,49" shape="poly" style="cursor:pointer"><area alt="#3399FF" onmouseover="mouseOverColor(&quot;#3399FF&quot;)" onclick="clickColor(&quot;#3399FF&quot;,65,117)" coords="126,45,135,49,135,60,126,64,117,60,117,49" shape="poly" style="cursor:pointer"><area alt="#6699FF" onmouseover="mouseOverColor(&quot;#6699FF&quot;)" onclick="clickColor(&quot;#6699FF&quot;,65,135)" coords="144,45,153,49,153,60,144,64,135,60,135,49" shape="poly" style="cursor:pointer"><area alt="#6666FF" onmouseover="mouseOverColor(&quot;#6666FF&quot;)" onclick="clickColor(&quot;#6666FF&quot;,65,153)" coords="162,45,171,49,171,60,162,64,153,60,153,49" shape="poly" style="cursor:pointer"><area alt="#6600FF" onmouseover="mouseOverColor(&quot;#6600FF&quot;)" onclick="clickColor(&quot;#6600FF&quot;,65,171)" coords="180,45,189,49,189,60,180,64,171,60,171,49" shape="poly" style="cursor:pointer"><area alt="#6600CC" onmouseover="mouseOverColor(&quot;#6600CC&quot;)" onclick="clickColor(&quot;#6600CC&quot;,65,189)" coords="198,45,207,49,207,60,198,64,189,60,189,49" shape="poly" style="cursor:pointer"><area alt="#339933" onmouseover="mouseOverColor(&quot;#339933&quot;)" onclick="clickColor(&quot;#339933&quot;,80,18)" coords="27,60,36,64,36,75,27,79,18,75,18,64" shape="poly" style="cursor:pointer"><area alt="#00CC66" onmouseover="mouseOverColor(&quot;#00CC66&quot;)" onclick="clickColor(&quot;#00CC66&quot;,80,36)" coords="45,60,54,64,54,75,45,79,36,75,36,64" shape="poly" style="cursor:pointer"><area alt="#00FF99" onmouseover="mouseOverColor(&quot;#00FF99&quot;)" onclick="clickColor(&quot;#00FF99&quot;,80,54)" coords="63,60,72,64,72,75,63,79,54,75,54,64" shape="poly" style="cursor:pointer"><area alt="#66FFCC" onmouseover="mouseOverColor(&quot;#66FFCC&quot;)" onclick="clickColor(&quot;#66FFCC&quot;,80,72)" coords="81,60,90,64,90,75,81,79,72,75,72,64" shape="poly" style="cursor:pointer"><area alt="#66FFFF" onmouseover="mouseOverColor(&quot;#66FFFF&quot;)" onclick="clickColor(&quot;#66FFFF&quot;,80,90)" coords="99,60,108,64,108,75,99,79,90,75,90,64" shape="poly" style="cursor:pointer"><area alt="#66CCFF" onmouseover="mouseOverColor(&quot;#66CCFF&quot;)" onclick="clickColor(&quot;#66CCFF&quot;,80,108)" coords="117,60,126,64,126,75,117,79,108,75,108,64" shape="poly" style="cursor:pointer"><area alt="#99CCFF" onmouseover="mouseOverColor(&quot;#99CCFF&quot;)" onclick="clickColor(&quot;#99CCFF&quot;,80,126)" coords="135,60,144,64,144,75,135,79,126,75,126,64" shape="poly" style="cursor:pointer"><area alt="#9999FF" onmouseover="mouseOverColor(&quot;#9999FF&quot;)" onclick="clickColor(&quot;#9999FF&quot;,80,144)" coords="153,60,162,64,162,75,153,79,144,75,144,64" shape="poly" style="cursor:pointer"><area alt="#9966FF" onmouseover="mouseOverColor(&quot;#9966FF&quot;)" onclick="clickColor(&quot;#9966FF&quot;,80,162)" coords="171,60,180,64,180,75,171,79,162,75,162,64" shape="poly" style="cursor:pointer"><area alt="#9933FF" onmouseover="mouseOverColor(&quot;#9933FF&quot;)" onclick="clickColor(&quot;#9933FF&quot;,80,180)" coords="189,60,198,64,198,75,189,79,180,75,180,64" shape="poly" style="cursor:pointer"><area alt="#9900FF" onmouseover="mouseOverColor(&quot;#9900FF&quot;)" onclick="clickColor(&quot;#9900FF&quot;,80,198)" coords="207,60,216,64,216,75,207,79,198,75,198,64" shape="poly" style="cursor:pointer"><area alt="#006600" onmouseover="mouseOverColor(&quot;#006600&quot;)" onclick="clickColor(&quot;#006600&quot;,95,9)" coords="18,75,27,79,27,90,18,94,9,90,9,79" shape="poly" style="cursor:pointer"><area alt="#00CC00" onmouseover="mouseOverColor(&quot;#00CC00&quot;)" onclick="clickColor(&quot;#00CC00&quot;,95,27)" coords="36,75,45,79,45,90,36,94,27,90,27,79" shape="poly" style="cursor:pointer"><area alt="#00FF00" onmouseover="mouseOverColor(&quot;#00FF00&quot;)" onclick="clickColor(&quot;#00FF00&quot;,95,45)" coords="54,75,63,79,63,90,54,94,45,90,45,79" shape="poly" style="cursor:pointer"><area alt="#66FF99" onmouseover="mouseOverColor(&quot;#66FF99&quot;)" onclick="clickColor(&quot;#66FF99&quot;,95,63)" coords="72,75,81,79,81,90,72,94,63,90,63,79" shape="poly" style="cursor:pointer"><area alt="#99FFCC" onmouseover="mouseOverColor(&quot;#99FFCC&quot;)" onclick="clickColor(&quot;#99FFCC&quot;,95,81)" coords="90,75,99,79,99,90,90,94,81,90,81,79" shape="poly" style="cursor:pointer"><area alt="#CCFFFF" onmouseover="mouseOverColor(&quot;#CCFFFF&quot;)" onclick="clickColor(&quot;#CCFFFF&quot;,95,99)" coords="108,75,117,79,117,90,108,94,99,90,99,79" shape="poly" style="cursor:pointer"><area alt="#CCCCFF" onmouseover="mouseOverColor(&quot;#CCCCFF&quot;)" onclick="clickColor(&quot;#CCCCFF&quot;,95,117)" coords="126,75,135,79,135,90,126,94,117,90,117,79" shape="poly" style="cursor:pointer"><area alt="#CC99FF" onmouseover="mouseOverColor(&quot;#CC99FF&quot;)" onclick="clickColor(&quot;#CC99FF&quot;,95,135)" coords="144,75,153,79,153,90,144,94,135,90,135,79" shape="poly" style="cursor:pointer"><area alt="#CC66FF" onmouseover="mouseOverColor(&quot;#CC66FF&quot;)" onclick="clickColor(&quot;#CC66FF&quot;,95,153)" coords="162,75,171,79,171,90,162,94,153,90,153,79" shape="poly" style="cursor:pointer"><area alt="#CC33FF" onmouseover="mouseOverColor(&quot;#CC33FF&quot;)" onclick="clickColor(&quot;#CC33FF&quot;,95,171)" coords="180,75,189,79,189,90,180,94,171,90,171,79" shape="poly" style="cursor:pointer"><area alt="#CC00FF" onmouseover="mouseOverColor(&quot;#CC00FF&quot;)" onclick="clickColor(&quot;#CC00FF&quot;,95,189)" coords="198,75,207,79,207,90,198,94,189,90,189,79" shape="poly" style="cursor:pointer"><area alt="#9900CC" onmouseover="mouseOverColor(&quot;#9900CC&quot;)" onclick="clickColor(&quot;#9900CC&quot;,95,207)" coords="216,75,225,79,225,90,216,94,207,90,207,79" shape="poly" style="cursor:pointer"><area alt="#003300" onmouseover="mouseOverColor(&quot;#003300&quot;)" onclick="clickColor(&quot;#003300&quot;,110,0)" coords="9,90,18,94,18,105,9,109,0,105,0,94" shape="poly" style="cursor:pointer"><area alt="#009933" onmouseover="mouseOverColor(&quot;#009933&quot;)" onclick="clickColor(&quot;#009933&quot;,110,18)" coords="27,90,36,94,36,105,27,109,18,105,18,94" shape="poly" style="cursor:pointer"><area alt="#33CC33" onmouseover="mouseOverColor(&quot;#33CC33&quot;)" onclick="clickColor(&quot;#33CC33&quot;,110,36)" coords="45,90,54,94,54,105,45,109,36,105,36,94" shape="poly" style="cursor:pointer"><area alt="#66FF66" onmouseover="mouseOverColor(&quot;#66FF66&quot;)" onclick="clickColor(&quot;#66FF66&quot;,110,54)" coords="63,90,72,94,72,105,63,109,54,105,54,94" shape="poly" style="cursor:pointer"><area alt="#99FF99" onmouseover="mouseOverColor(&quot;#99FF99&quot;)" onclick="clickColor(&quot;#99FF99&quot;,110,72)" coords="81,90,90,94,90,105,81,109,72,105,72,94" shape="poly" style="cursor:pointer"><area alt="#CCFFCC" onmouseover="mouseOverColor(&quot;#CCFFCC&quot;)" onclick="clickColor(&quot;#CCFFCC&quot;,110,90)" coords="99,90,108,94,108,105,99,109,90,105,90,94" shape="poly" style="cursor:pointer"><area alt="#FFFFFF" onmouseover="mouseOverColor(&quot;#FFFFFF&quot;)" onclick="clickColor(&quot;#FFFFFF&quot;,110,108)" coords="117,90,126,94,126,105,117,109,108,105,108,94" shape="poly" style="cursor:pointer"><area alt="#FFCCFF" onmouseover="mouseOverColor(&quot;#FFCCFF&quot;)" onclick="clickColor(&quot;#FFCCFF&quot;,110,126)" coords="135,90,144,94,144,105,135,109,126,105,126,94" shape="poly" style="cursor:pointer"><area alt="#FF99FF" onmouseover="mouseOverColor(&quot;#FF99FF&quot;)" onclick="clickColor(&quot;#FF99FF&quot;,110,144)" coords="153,90,162,94,162,105,153,109,144,105,144,94" shape="poly" style="cursor:pointer"><area alt="#FF66FF" onmouseover="mouseOverColor(&quot;#FF66FF&quot;)" onclick="clickColor(&quot;#FF66FF&quot;,110,162)" coords="171,90,180,94,180,105,171,109,162,105,162,94" shape="poly" style="cursor:pointer"><area alt="#FF00FF" onmouseover="mouseOverColor(&quot;#FF00FF&quot;)" onclick="clickColor(&quot;#FF00FF&quot;,110,180)" coords="189,90,198,94,198,105,189,109,180,105,180,94" shape="poly" style="cursor:pointer"><area alt="#CC00CC" onmouseover="mouseOverColor(&quot;#CC00CC&quot;)" onclick="clickColor(&quot;#CC00CC&quot;,110,198)" coords="207,90,216,94,216,105,207,109,198,105,198,94" shape="poly" style="cursor:pointer"><area alt="#660066" onmouseover="mouseOverColor(&quot;#660066&quot;)" onclick="clickColor(&quot;#660066&quot;,110,216)" coords="225,90,234,94,234,105,225,109,216,105,216,94" shape="poly" style="cursor:pointer"><area alt="#336600" onmouseover="mouseOverColor(&quot;#336600&quot;)" onclick="clickColor(&quot;#336600&quot;,125,9)" coords="18,105,27,109,27,120,18,124,9,120,9,109" shape="poly" style="cursor:pointer"><area alt="#009900" onmouseover="mouseOverColor(&quot;#009900&quot;)" onclick="clickColor(&quot;#009900&quot;,125,27)" coords="36,105,45,109,45,120,36,124,27,120,27,109" shape="poly" style="cursor:pointer"><area alt="#66FF33" onmouseover="mouseOverColor(&quot;#66FF33&quot;)" onclick="clickColor(&quot;#66FF33&quot;,125,45)" coords="54,105,63,109,63,120,54,124,45,120,45,109" shape="poly" style="cursor:pointer"><area alt="#99FF66" onmouseover="mouseOverColor(&quot;#99FF66&quot;)" onclick="clickColor(&quot;#99FF66&quot;,125,63)" coords="72,105,81,109,81,120,72,124,63,120,63,109" shape="poly" style="cursor:pointer"><area alt="#CCFF99" onmouseover="mouseOverColor(&quot;#CCFF99&quot;)" onclick="clickColor(&quot;#CCFF99&quot;,125,81)" coords="90,105,99,109,99,120,90,124,81,120,81,109" shape="poly" style="cursor:pointer"><area alt="#FFFFCC" onmouseover="mouseOverColor(&quot;#FFFFCC&quot;)" onclick="clickColor(&quot;#FFFFCC&quot;,125,99)" coords="108,105,117,109,117,120,108,124,99,120,99,109" shape="poly" style="cursor:pointer"><area alt="#FFCCCC" onmouseover="mouseOverColor(&quot;#FFCCCC&quot;)" onclick="clickColor(&quot;#FFCCCC&quot;,125,117)" coords="126,105,135,109,135,120,126,124,117,120,117,109" shape="poly" style="cursor:pointer"><area alt="#FF99CC" onmouseover="mouseOverColor(&quot;#FF99CC&quot;)" onclick="clickColor(&quot;#FF99CC&quot;,125,135)" coords="144,105,153,109,153,120,144,124,135,120,135,109" shape="poly" style="cursor:pointer"><area alt="#FF66CC" onmouseover="mouseOverColor(&quot;#FF66CC&quot;)" onclick="clickColor(&quot;#FF66CC&quot;,125,153)" coords="162,105,171,109,171,120,162,124,153,120,153,109" shape="poly" style="cursor:pointer"><area alt="#FF33CC" onmouseover="mouseOverColor(&quot;#FF33CC&quot;)" onclick="clickColor(&quot;#FF33CC&quot;,125,171)" coords="180,105,189,109,189,120,180,124,171,120,171,109" shape="poly" style="cursor:pointer"><area alt="#CC0099" onmouseover="mouseOverColor(&quot;#CC0099&quot;)" onclick="clickColor(&quot;#CC0099&quot;,125,189)" coords="198,105,207,109,207,120,198,124,189,120,189,109" shape="poly" style="cursor:pointer"><area alt="#993399" onmouseover="mouseOverColor(&quot;#993399&quot;)" onclick="clickColor(&quot;#993399&quot;,125,207)" coords="216,105,225,109,225,120,216,124,207,120,207,109" shape="poly" style="cursor:pointer"><area alt="#333300" onmouseover="mouseOverColor(&quot;#333300&quot;)" onclick="clickColor(&quot;#333300&quot;,140,18)" coords="27,120,36,124,36,135,27,139,18,135,18,124" shape="poly" style="cursor:pointer"><area alt="#669900" onmouseover="mouseOverColor(&quot;#669900&quot;)" onclick="clickColor(&quot;#669900&quot;,140,36)" coords="45,120,54,124,54,135,45,139,36,135,36,124" shape="poly" style="cursor:pointer"><area alt="#99FF33" onmouseover="mouseOverColor(&quot;#99FF33&quot;)" onclick="clickColor(&quot;#99FF33&quot;,140,54)" coords="63,120,72,124,72,135,63,139,54,135,54,124" shape="poly" style="cursor:pointer"><area alt="#CCFF66" onmouseover="mouseOverColor(&quot;#CCFF66&quot;)" onclick="clickColor(&quot;#CCFF66&quot;,140,72)" coords="81,120,90,124,90,135,81,139,72,135,72,124" shape="poly" style="cursor:pointer"><area alt="#FFFF99" onmouseover="mouseOverColor(&quot;#FFFF99&quot;)" onclick="clickColor(&quot;#FFFF99&quot;,140,90)" coords="99,120,108,124,108,135,99,139,90,135,90,124" shape="poly" style="cursor:pointer"><area alt="#FFCC99" onmouseover="mouseOverColor(&quot;#FFCC99&quot;)" onclick="clickColor(&quot;#FFCC99&quot;,140,108)" coords="117,120,126,124,126,135,117,139,108,135,108,124" shape="poly" style="cursor:pointer"><area alt="#FF9999" onmouseover="mouseOverColor(&quot;#FF9999&quot;)" onclick="clickColor(&quot;#FF9999&quot;,140,126)" coords="135,120,144,124,144,135,135,139,126,135,126,124" shape="poly" style="cursor:pointer"><area alt="#FF6699" onmouseover="mouseOverColor(&quot;#FF6699&quot;)" onclick="clickColor(&quot;#FF6699&quot;,140,144)" coords="153,120,162,124,162,135,153,139,144,135,144,124" shape="poly" style="cursor:pointer"><area alt="#FF3399" onmouseover="mouseOverColor(&quot;#FF3399&quot;)" onclick="clickColor(&quot;#FF3399&quot;,140,162)" coords="171,120,180,124,180,135,171,139,162,135,162,124" shape="poly" style="cursor:pointer"><area alt="#CC3399" onmouseover="mouseOverColor(&quot;#CC3399&quot;)" onclick="clickColor(&quot;#CC3399&quot;,140,180)" coords="189,120,198,124,198,135,189,139,180,135,180,124" shape="poly" style="cursor:pointer"><area alt="#990099" onmouseover="mouseOverColor(&quot;#990099&quot;)" onclick="clickColor(&quot;#990099&quot;,140,198)" coords="207,120,216,124,216,135,207,139,198,135,198,124" shape="poly" style="cursor:pointer"><area alt="#666633" onmouseover="mouseOverColor(&quot;#666633&quot;)" onclick="clickColor(&quot;#666633&quot;,155,27)" coords="36,135,45,139,45,150,36,154,27,150,27,139" shape="poly" style="cursor:pointer"><area alt="#99CC00" onmouseover="mouseOverColor(&quot;#99CC00&quot;)" onclick="clickColor(&quot;#99CC00&quot;,155,45)" coords="54,135,63,139,63,150,54,154,45,150,45,139" shape="poly" style="cursor:pointer"><area alt="#CCFF33" onmouseover="mouseOverColor(&quot;#CCFF33&quot;)" onclick="clickColor(&quot;#CCFF33&quot;,155,63)" coords="72,135,81,139,81,150,72,154,63,150,63,139" shape="poly" style="cursor:pointer"><area alt="#FFFF66" onmouseover="mouseOverColor(&quot;#FFFF66&quot;)" onclick="clickColor(&quot;#FFFF66&quot;,155,81)" coords="90,135,99,139,99,150,90,154,81,150,81,139" shape="poly" style="cursor:pointer"><area alt="#FFCC66" onmouseover="mouseOverColor(&quot;#FFCC66&quot;)" onclick="clickColor(&quot;#FFCC66&quot;,155,99)" coords="108,135,117,139,117,150,108,154,99,150,99,139" shape="poly" style="cursor:pointer"><area alt="#FF9966" onmouseover="mouseOverColor(&quot;#FF9966&quot;)" onclick="clickColor(&quot;#FF9966&quot;,155,117)" coords="126,135,135,139,135,150,126,154,117,150,117,139" shape="poly" style="cursor:pointer"><area alt="#FF6666" onmouseover="mouseOverColor(&quot;#FF6666&quot;)" onclick="clickColor(&quot;#FF6666&quot;,155,135)" coords="144,135,153,139,153,150,144,154,135,150,135,139" shape="poly" style="cursor:pointer"><area alt="#FF0066" onmouseover="mouseOverColor(&quot;#FF0066&quot;)" onclick="clickColor(&quot;#FF0066&quot;,155,153)" coords="162,135,171,139,171,150,162,154,153,150,153,139" shape="poly" style="cursor:pointer"><area alt="#CC6699" onmouseover="mouseOverColor(&quot;#CC6699&quot;)" onclick="clickColor(&quot;#CC6699&quot;,155,171)" coords="180,135,189,139,189,150,180,154,171,150,171,139" shape="poly" style="cursor:pointer"><area alt="#993366" onmouseover="mouseOverColor(&quot;#993366&quot;)" onclick="clickColor(&quot;#993366&quot;,155,189)" coords="198,135,207,139,207,150,198,154,189,150,189,139" shape="poly" style="cursor:pointer"><area alt="#999966" onmouseover="mouseOverColor(&quot;#999966&quot;)" onclick="clickColor(&quot;#999966&quot;,170,36)" coords="45,150,54,154,54,165,45,169,36,165,36,154" shape="poly" style="cursor:pointer"><area alt="#CCCC00" onmouseover="mouseOverColor(&quot;#CCCC00&quot;)" onclick="clickColor(&quot;#CCCC00&quot;,170,54)" coords="63,150,72,154,72,165,63,169,54,165,54,154" shape="poly" style="cursor:pointer"><area alt="#FFFF00" onmouseover="mouseOverColor(&quot;#FFFF00&quot;)" onclick="clickColor(&quot;#FFFF00&quot;,170,72)" coords="81,150,90,154,90,165,81,169,72,165,72,154" shape="poly" style="cursor:pointer"><area alt="#FFCC00" onmouseover="mouseOverColor(&quot;#FFCC00&quot;)" onclick="clickColor(&quot;#FFCC00&quot;,170,90)" coords="99,150,108,154,108,165,99,169,90,165,90,154" shape="poly" style="cursor:pointer"><area alt="#FF9933" onmouseover="mouseOverColor(&quot;#FF9933&quot;)" onclick="clickColor(&quot;#FF9933&quot;,170,108)" coords="117,150,126,154,126,165,117,169,108,165,108,154" shape="poly" style="cursor:pointer"><area alt="#FF6600" onmouseover="mouseOverColor(&quot;#FF6600&quot;)" onclick="clickColor(&quot;#FF6600&quot;,170,126)" coords="135,150,144,154,144,165,135,169,126,165,126,154" shape="poly" style="cursor:pointer"><area alt="#FF5050" onmouseover="mouseOverColor(&quot;#FF5050&quot;)" onclick="clickColor(&quot;#FF5050&quot;,170,144)" coords="153,150,162,154,162,165,153,169,144,165,144,154" shape="poly" style="cursor:pointer"><area alt="#CC0066" onmouseover="mouseOverColor(&quot;#CC0066&quot;)" onclick="clickColor(&quot;#CC0066&quot;,170,162)" coords="171,150,180,154,180,165,171,169,162,165,162,154" shape="poly" style="cursor:pointer"><area alt="#660033" onmouseover="mouseOverColor(&quot;#660033&quot;)" onclick="clickColor(&quot;#660033&quot;,170,180)" coords="189,150,198,154,198,165,189,169,180,165,180,154" shape="poly" style="cursor:pointer"><area alt="#996633" onmouseover="mouseOverColor(&quot;#996633&quot;)" onclick="clickColor(&quot;#996633&quot;,185,45)" coords="54,165,63,169,63,180,54,184,45,180,45,169" shape="poly" style="cursor:pointer"><area alt="#CC9900" onmouseover="mouseOverColor(&quot;#CC9900&quot;)" onclick="clickColor(&quot;#CC9900&quot;,185,63)" coords="72,165,81,169,81,180,72,184,63,180,63,169" shape="poly" style="cursor:pointer"><area alt="#FF9900" onmouseover="mouseOverColor(&quot;#FF9900&quot;)" onclick="clickColor(&quot;#FF9900&quot;,185,81)" coords="90,165,99,169,99,180,90,184,81,180,81,169" shape="poly" style="cursor:pointer"><area alt="#CC6600" onmouseover="mouseOverColor(&quot;#CC6600&quot;)" onclick="clickColor(&quot;#CC6600&quot;,185,99)" coords="108,165,117,169,117,180,108,184,99,180,99,169" shape="poly" style="cursor:pointer"><area alt="#FF3300" onmouseover="mouseOverColor(&quot;#FF3300&quot;)" onclick="clickColor(&quot;#FF3300&quot;,185,117)" coords="126,165,135,169,135,180,126,184,117,180,117,169" shape="poly" style="cursor:pointer"><area alt="#FF0000" onmouseover="mouseOverColor(&quot;#FF0000&quot;)" onclick="clickColor(&quot;#FF0000&quot;,185,135)" coords="144,165,153,169,153,180,144,184,135,180,135,169" shape="poly" style="cursor:pointer"><area alt="#CC0000" onmouseover="mouseOverColor(&quot;#CC0000&quot;)" onclick="clickColor(&quot;#CC0000&quot;,185,153)" coords="162,165,171,169,171,180,162,184,153,180,153,169" shape="poly" style="cursor:pointer"><area alt="#990033" onmouseover="mouseOverColor(&quot;#990033&quot;)" onclick="clickColor(&quot;#990033&quot;,185,171)" coords="180,165,189,169,189,180,180,184,171,180,171,169" shape="poly" style="cursor:pointer"><area alt="#663300" onmouseover="mouseOverColor(&quot;#663300&quot;)" onclick="clickColor(&quot;#663300&quot;,200,54)" coords="63,180,72,184,72,195,63,199,54,195,54,184" shape="poly" style="cursor:pointer"><area alt="#996600" onmouseover="mouseOverColor(&quot;#996600&quot;)" onclick="clickColor(&quot;#996600&quot;,200,72)" coords="81,180,90,184,90,195,81,199,72,195,72,184" shape="poly" style="cursor:pointer"><area alt="#CC3300" onmouseover="mouseOverColor(&quot;#CC3300&quot;)" onclick="clickColor(&quot;#CC3300&quot;,200,90)" coords="99,180,108,184,108,195,99,199,90,195,90,184" shape="poly" style="cursor:pointer"><area alt="#993300" onmouseover="mouseOverColor(&quot;#993300&quot;)" onclick="clickColor(&quot;#993300&quot;,200,108)" coords="117,180,126,184,126,195,117,199,108,195,108,184" shape="poly" style="cursor:pointer"><area alt="#990000" onmouseover="mouseOverColor(&quot;#990000&quot;)" onclick="clickColor(&quot;#990000&quot;,200,126)" coords="135,180,144,184,144,195,135,199,126,195,126,184" shape="poly" style="cursor:pointer"><area alt="#800000" onmouseover="mouseOverColor(&quot;#800000&quot;)" onclick="clickColor(&quot;#800000&quot;,200,144)" coords="153,180,162,184,162,195,153,199,144,195,144,184" shape="poly" style="cursor:pointer"><area alt="#993333" onmouseover="mouseOverColor(&quot;#993333&quot;)" onclick="clickColor(&quot;#993333&quot;,200,162)" coords="171,180,180,184,180,195,171,199,162,195,162,184" shape="poly" style="cursor:pointer"></map><br /> <script><br /> document.getElementById("selectedColor").style.top="185px";<br /> document.getElementById("selectedColor").style.left="135px";<br /> document.getElementById("selectedColor").style.visibility="visible";<br /> </script><br /> <div style="width:200px;padding-top:33px;padding-left:66px;margin-bottom:30px;"><div style="float: left; height: 30px; width: 100px; border-width: 1px 1px medium; border-style: solid solid none; border-color: rgb(212, 212, 212) rgb(212, 212, 212) -moz-use-text-color; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none; background-color: rgb(178, 1, 0);" id="divpreview">&nbsp;</div><div style="float:left;width:50px;padding-left:5px;padding-top:7px;" id="divpreviewtxt">#B20100</div></div><br /> <br><br /> <br><br /> Selected color: <input value="#FF0000" id="colorhex" name="colorhex" style="width:70px;"><br /> <input type="button" onclick="clickColor(0,-1,-1)" value="Submit"><br /> <br><br /> <br><br /> </td><br /> <td align="right"><br /> <div style="height:500px;" id="colorshades"><br /> <table cellspacing="0" cellpadding="0" style="margin-right:5px;"><tbody><tr style="height:30px;"><td></td><td valign="top" align="left">Darker/lighter shades:</td><td valign="top" align="left" colspan="2">Hex values:</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(0,0,0)" onmouseover="mouseOverColor(&quot;#000000&quot;)" onclick="clickColor(&quot;#000000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#000000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(26,0,0)" onmouseover="mouseOverColor(&quot;#1A0000&quot;)" onclick="clickColor(&quot;#1A0000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#1A0000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(51,0,0)" onmouseover="mouseOverColor(&quot;#330000&quot;)" onclick="clickColor(&quot;#330000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#330000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(76,0,0)" onmouseover="mouseOverColor(&quot;#4C0000&quot;)" onclick="clickColor(&quot;#4C0000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#4C0000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(102,0,0)" onmouseover="mouseOverColor(&quot;#660000&quot;)" onclick="clickColor(&quot;#660000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#660000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(128,0,0)" onmouseover="mouseOverColor(&quot;#800000&quot;)" onclick="clickColor(&quot;#800000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#800000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(153,0,0)" onmouseover="mouseOverColor(&quot;#990000&quot;)" onclick="clickColor(&quot;#990000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#990000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(178,0,0)" onmouseover="mouseOverColor(&quot;#B20000&quot;)" onclick="clickColor(&quot;#B20000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#B20000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(204,0,0)" onmouseover="mouseOverColor(&quot;#CC0000&quot;)" onclick="clickColor(&quot;#CC0000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#CC0000</td></tr><tr><td style="width:10px;"></td><td style="width:200px;height:20px;color:#FFFFFF;background:rgb(230,0,0)" onmouseover="mouseOverColor(&quot;#E60000&quot;)" onclick="clickColor(&quot;#E60000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="width:10px;"></td><td style="font-family:courier new;font-size:110%;">#E60000</td></tr><tr><td style="height:20px;background:rgb(255,0,0)" colspan="3" onmouseover="mouseOverColor(&quot;#FF0000&quot;)" onclick="clickColor(&quot;#FF0000&quot;,-1,-1)" onmouseout="mouseOutMap()">&nbsp;</td><td style="font-family:courier new;font-size:110%;">#FF0000</td></tr><tr><td></td><td style="height:20px;background:rgb(255,25,25)" onmouseover="mouseOverColor(&quot;#FF1919&quot;)" onclick="clickColor(&quot;#FF1919&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FF1919</td></tr><tr><td></td><td style="height:20px;background:rgb(255,51,51)" onmouseover="mouseOverColor(&quot;#FF3333&quot;)" onclick="clickColor(&quot;#FF3333&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FF3333</td></tr><tr><td></td><td style="height:20px;background:rgb(255,77,77)" onmouseover="mouseOverColor(&quot;#FF4D4D&quot;)" onclick="clickColor(&quot;#FF4D4D&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FF4D4D</td></tr><tr><td></td><td style="height:20px;background:rgb(255,102,102)" onmouseover="mouseOverColor(&quot;#FF6666&quot;)" onclick="clickColor(&quot;#FF6666&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FF6666</td></tr><tr><td></td><td style="height:20px;background:rgb(255,128,128)" onmouseover="mouseOverColor(&quot;#FF8080&quot;)" onclick="clickColor(&quot;#FF8080&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FF8080</td></tr><tr><td></td><td style="height:20px;background:rgb(255,153,153)" onmouseover="mouseOverColor(&quot;#FF9999&quot;)" onclick="clickColor(&quot;#FF9999&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FF9999</td></tr><tr><td></td><td style="height:20px;background:rgb(255,178,178)" onmouseover="mouseOverColor(&quot;#FFB2B2&quot;)" onclick="clickColor(&quot;#FFB2B2&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FFB2B2</td></tr><tr><td></td><td style="height:20px;background:rgb(255,204,204)" onmouseover="mouseOverColor(&quot;#FFCCCC&quot;)" onclick="clickColor(&quot;#FFCCCC&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FFCCCC</td></tr><tr><td></td><td style="height:20px;background:rgb(255,230,230)" onmouseover="mouseOverColor(&quot;#FFE6E6&quot;)" onclick="clickColor(&quot;#FFE6E6&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FFE6E6</td></tr><tr><td></td><td style="height:20px;background:rgb(255,255,255)" onmouseover="mouseOverColor(&quot;#FFFFFF&quot;)" onclick="clickColor(&quot;#FFFFFF&quot;,-1,-1)" onmouseout="mouseOutMap()"></td><td></td><td style="font-family:courier new;font-size:110%;">#FFFFFF</td></tr></tbody></table><br /> </div><br /> </td></tr><br /> </tbody></table><br /> </form><br />

by the way, sambil menunggu loading yang lambat laun bikin mata ngantuk saat ini, ku coba bersabar sampai selesai terupdate posting ini dan .....
Sebelum semuanya berakhir, aku ingin nitip pesan,,, bahwa dirimu boleh mengkopas arikel ini kepada siapa saja, asalkan jangan tinggalkan diriku sebagai sumbernya yah... dan jika bermanfaat, saranlah atau komentarlah dikit biar hati ini tau bahwa ada juga orang yang mau belajar dari hal-hal sederhana ttentang blog ..bye !!