Tabel Warna HTML Di Blog Atau Web

Dalam mendesain blog ataupun website, pastinya kita tidak akan terlepas dari gradiasi warna. Untuk itu kita perlu mengetahui macam-macam warna tersebut dalam HTML atau sering disebut "Kode Warna HTML". Oleh karena kebutuhan tersebut, saya mencoba menyediakan untuk kawan kawan :)

Anda Tertarik ?? silahkan kawan ikuti langkah-langkah berikut ini :
1. Login ke akun Blogger Anda
2. Klik Tata Letak / Layout
3. Klik Edit HTML
4. Cari kode </head> Untuk memudahkan tekan ctrl+F.
5. Kemudian copy paste-kan kode dibawah ini persis diatas kode </head>

<script language="javascript">
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>


<script type="text/javascript">
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;


function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}


// Picker ---------------------------------------------------------


function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };


picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };


hueUpdate();


dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}


executeonload(init);


function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}




function hueUpdate(newVal) {


var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }


var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);


document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";


pickerSwatchUpdate();
}


function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);


h = h / 180;


var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);


var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);


var a = YAHOO.util.Color.hsv2rgb( h, s, v );


document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";


document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script>

6. Kemudian klik Save Template

Setelah itu script kode warna HTML untuk memasang ke posting atau ke widget blog atau situs anda :

<center><form name="hcc" id="hcc"> 
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb"> 
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb"> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5"> 
</td></tr><tr height="10"><td> 
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2"> 
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff"> 
</td></tr></tbody></table></td></tr></tbody></table> 
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24"> 
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table> 
</form></center>

Hasilnya akan seperti dibawah ini :

Kode warna yang terpilih :

SELAMAT MENCOBA.... :)

Posted in: Belajar Blog,Code Script