Cara Membuat Tools Color Picker Di Blog 2020

Memasang tools color picker - color picker merupakan alat untuk seorang programmer agar bisa mencari warna kesukaan mereka, yang ingin di terapkan di website. bukan hanya programmer, bagi anda yang suka desain menggunakan photopshop juga bermanfaat juga, tapi kan photoshop sudah ada fitur bermacam warna.

Color picker ini cocok untuk di blog anda yang ingin mengisi ruang menu navigasi dengan tab tools. tools ini mudah di gunakan dan responsive untuk semua perangkat. anda tinggal menekan salah satu warna yang di inginkan, otomatis kode hexadesimal keluar sendiri.

Lihat Juga : Cara Memasang Icon Font Awesome

Cara Memasang Tools Color Picker Blog

1. Login blogger.
2. Halaman > Buat halaman baru.
3. Salin dan pastekan script di bawah ini di bagian HTML, bukan compose.

<center class="button_wrap">
<a class="button button_turquoise" onClick="colorToTurquoise()">Turquoise</a><a class="button button_green_sea" onClick="colorToGreenSea()">GreenSea</a><a class="button button_emerald" onClick="colorToEmerald()">Emerald</a><a class="button button_nephritis" onClick="colorToNephritis()">Nephritis</a><a class="button button_peter_river" onClick="colorToPeterRiver()">PRiver</a><a class="button button_belize_hole" onClick="colorToBelizeHole()">BelizeH</a><a class="button button_amethyst" onClick="colorToAmethyst()">Amethyst</a><a class="button button_wisteria" onClick="colorToWisteria()">Wisteria</a><a class="button button_wet_asphalt" onClick="colorToWetAsphalt()">WetA</a><a class="button button_midnight_blue" onClick="colorToMidnightBlue()">Midnight</a><a class="button button_sunflower" onClick="colorToSunflower()">Sunflower</a><a class="button button_orange" onClick="colorToOrange()">Orange</a><a class="button button_carrot" onClick="colorToCarrot()">Carrot</a><a class="button button_white_smoke" onClick="colorToWhiteSmoke()">WhiteSmoke</a><a class="button button_pumpkin" onClick="colorToPumpkin()">Pumpkin</a><a class="button button_alizarin" onClick="colorToAlizarin()">Alizarin</a><a class="button button_pomegranate" onClick="colorToPomegranate()">Pgranate</a><a class="button button_clouds" onClick="colorToClouds()">Clouds</a><a class="button button_silver" onClick="colorToSilver()">Silver</a><a class="button button_concrete" onClick="colorToConcrete()">Concrete</a><a class="button button_asbestos" onClick="colorToAsbestos()">Asbestos</a><a class="button button_chestnut_rose" onClick="colorToChestnutRose()">ChestnutR</a><a class="button button_alice_blue" onClick="colorToAliceBlue()">AliceBlue</a><a class="button button_spray" onClick="colorToSpray()">Spray</a><a class="button button_gossip" onClick="colorToGossip()">Gossip</a><a class="button button_cream_can" onClick="colorToCreamCan()">CreamCan</a><a class="button button_silver_tree" onClick="colorToSilverTree()">SilverTree</a><a class="button button_cape_honey" onClick="colorToCapeHoney()">CapeHoney</a><a class="button button_medium_turquoise" onClick="colorToMediumTurquoise()">MTurquoise</a><a class="button button_lynch" onClick="colorToLynch()">Lynch</a><a class="button button_crusta" onClick="colorToCrusta()">Crusta</a><a class="button button_jungle_green" onClick="colorToJungleGreen()">JungleG</a><a class="button button_hoki" onClick="colorToHoki()">Hoki</a><a class="button button_wax_flower" onClick="colorToWaxFlower()">WaxFlower</a><a class="button button_observatory" onClick="colorToObservatory()">Observat</a><a class="button button_ecstacy" onClick="colorToEcstasy()">Ecstacy</a></center>
<center>
<div class="virlyz-header">
FLAT UI COLOR</div>
<div class="hasil-kode" id="hasil-kode">
<div class="colorName" id="colorName">
Silakan klik button warna diatas,</div>
<div class="colorText" id="colorText">
Lalu copy kode warna yang dihasilkan sesuai yang anda pilih..!!!</div>
<section><p>
</p>
</section></div>
</center>


<div id="flatuarlina">
    <ul class="flatui">
      <li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
      </li>
      <li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
      </li>
      <li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
      </li>
      <li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
      </li>
      <li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
      </li>
      <li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
      </li>
      <li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
      </li>
      <li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
      </li>
      <li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
      </li>
      <li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
      </li>
      <li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
      </li>
      <li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
      </li>
      <li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
      </li>
      <li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
      </li>
      <li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
      </li>
      <li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
      </li>
      <li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
      </li>
      <li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
      </li>
      <li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
      </li>
      <li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
      </li>
      <li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
      </li>
      <li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
      </li>
      <li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
      </li>
      <li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
      </li>
      <li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
      </li>
      <li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
      </li>
      <li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
      </li>
      <li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
      </li>
      <li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
      </li>
      <li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
      </li>
      <li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
      </li>
      <li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
      </li>
      <li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
      </li>
      <li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
      </li>
      <li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
      </li>
      <li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
      </li>
      <li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
      </li>
      <li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
      </li>
      <li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
      </li>
      <li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
      </li>
      <li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
      </li>
      <li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
      </li>
      <li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
      </li>
      <li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
      </li>
      <li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
      </li>
      <li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
      </li>
      <li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
      </li>
      <li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
      </li>
      <li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
      </li>
      <li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
      </li>
      <li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
      </li>
      <li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
      </li>
      <li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
      </li>
      <li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
      </li>
      <li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
      </li>
      <li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
      </li>
      <li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
      </li>
      <li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
      </li>
      <li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
      </li>
      <li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
      </li>
      <li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
      </li>
      <li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
      </li>
      <li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
      </li>
      <li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
      </li>
      <li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
      </li>
      <li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
      </li>
      <li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
      </li>
      <li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
      </li>
      <li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
      </li>
      <li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
      </li>
      <li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
      </li>
      <li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
      </li>
      <li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
      </li>
      <li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
      </li>
      <li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
      </li>
      <li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
      </li>
      <li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
      </li>
      <li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
      </li>
      <li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
      </li>
      <li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
      </li>
    </ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by www.arlinadzgn.com */
#flatuarlina ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuarlina ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatuarlina ul.flatui li:hover{z-index:4}
#flatuarlina ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatuarlina ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuarlina ul.flatui li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatuarlina ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuarlina ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuarlina ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatuarlina ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuarlina ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuarlina ul.flatui li{width:100%}}
</style>
<style scoped="" type="text/css">
/* Color Picker by www.lk21.news */
.virlyz-header{
text-align:center;
font-size:30px;
background:#777;
color:#fafafa;
border:1px solid #777;
padding:10px;
}

.button_wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: center;
  align-content: center;
margin-bottom:20px;
}
.button {
  text-transform: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 2.4em;
  flex: 100 100 8%;
  -webkit-flex: 100 100 8%;
}
.button_turquoise {
  border: 5px solid #1abc9c;
  background: #1abc9c;
  color: #fff;
  padding: 1px;
}
.button_green_sea {
  border: 5px solid #16a085;
  background: #16a085;
  color: #fff;
  padding: 1px;
}
.button_emerald {
  border: 5px solid #2ecc71;
  background: #2ecc71;
  color: #fff;
  padding: 1px;
}
.button_nephritis {
  border: 5px solid #27ae60;
  background: #27ae60;
  color: #fff;
  padding: 1px;
}
.button_peter_river {
  border: 5px solid #3498db;
  background: #3498db;
  color: #fff;
  padding: 1px;
}
.button_belize_hole {
  border: 5px solid #2980b9;
  background: #2980b9;
  color: #fff;
  padding: 1px;
}
.button_amethyst {
  border: 5px solid #9b59b6;
  background: #9b59b6;
  color: #fff;
  padding: 1px;
}
.button_wisteria {
  border: 5px solid #8e44ad;
  background: #8e44ad;
  color: #fff;
  padding: 1px;
}
.button_wet_asphalt {
  border: 5px solid #34495e;
  background: #34495e;
  color: #fff;
  padding: 1px;
}
.button_midnight_blue {
  border: 5px solid #2c3e50;
  background: #2c3e50;
  color: #fff;
  padding: 1px;
}
.button_sunflower {
  border: 5px solid #f1c40f;
  background: #f1c40f;
  color: #fff;
  padding: 1px;
}
.button_orange {
  border: 5px solid #f39c12;
  background: #f39c12;
  color: #fff;
  padding: 1px;
}
.button_carrot {
  border: 5px solid #e67e22;
  background: #e67e22;
  color: #fff;
  padding: 1px;
}
.button_pumpkin {
  border: 5px solid #d35400;
  background: #d35400;
  color: #fff;
  padding: 1px;
}
.button_alizarin {
  border: 5px solid #e74c3c;
  background: #e74c3c;
  color: #fff;
  padding: 1px;
}
.button_pomegranate {
  border: 5px solid #c0392b;
  background: #c0392b;
  color: #fff;
  padding: 1px;
}
.button_clouds {
  border: 5px solid #ecf0f1;
  background: #ecf0f1;
  color: #808080;
  padding: 1px;
}
.button_silver {
  border: 5px solid #bdc3c7;
  background: #bdc3c7;
  color: #fff;
  padding: 1px;
}
.button_concrete {
  border: 5px solid #95a5a6;
  background: #95a5a6;
  color: #fff;
  padding: 1px;
}
.button_asbestos {
  border: 5px solid #7f8c8d;
  background: #7f8c8d;
  color: #fff;
  padding: 1px;
}

.button_chestnut_rose{
  border: 5px solid #D24D57;
  background: #D24D57;
  color: #fff;
  padding: 1px;
}

.button_alice_blue{
  border: 5px solid #E4F1FE;
  background: #E4F1FE;
  color: #999;
  padding: 1px;
}

.button_spray{
  border: 5px solid #81CFE0;
  background: #81CFE0;
  color: #fff;
  padding: 1px;
}

.button_gossip{
  border: 5px solid #87D37C;
  background: #87D37C;
  color: #fff;
  padding: 1px;
}

.button_cream_can{
  border: 5px solid #F5D76E;
  background: #F5D76E;
  color: #fff;
  padding: 1px;
}

.button_silver_tree{
  border: 5px solid #68C3A3;
  background: #68C3A3;
  color: #fff;
  padding: 1px;
}

.button_cape_honey{
  border: 5px solid #FDE3A7;
  background: #FDE3A7;
  color: #999;
  padding: 1px;
}

.button_medium_turquoise{
  border: 5px solid #4ECDC4;
  background: #4ECDC4;
  color: #fff;
  padding: 1px;
}

.button_white_smoke{
  border: 5px solid #ECECEC;
  background: #ECECEC;
  color: #999;
  padding: 1px;
}

.button_lynch{
  border: 5px solid #6C7A89;
  background: #6C7A89;
  color: #fff;
  padding: 1px;
}

.button_crusta{
  border: 5px solid #F2784B;
  background: #F2784B;
  color: #fff;
  padding: 1px;
}

.button_jungle_green{
  border: 5px solid #26C281;
  background: #26C281;
  color: #fff;
  padding: 1px;
}

.button_hoki{
  border: 5px solid #67809F;
  background: #67809F;
  color: #fff;
  padding: 1px;
}

.button_wax_flower{
  border: 5px solid #F1A9A0;
  background: #F1A9A0;
  color: #fff;
  padding: 1px;
}

.button_observatory{
  border: 5px solid #049372;
  background: #049372;
  color: #fff;
  padding: 1px;
}

.button_ecstacy{
  border: 5px solid #F9690E;
  background: #F9690E;
  color: #fff;
  padding: 1px;
}

.hasil-kode {border:1px solid #777;
  padding-top: 15px;
  font-size:24px;
  color: #999;
  width: 100%;
  background: #ececec;
}
section {
  background: #transparent;
  margin: 30px;
  font-family: "Arvo";
  width: 80%;
  color: #000;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: left;
}

@media (max-width: 800px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 4px;
  }
  .hasil-kode {
    width: 100%;
  }
}
@media (max-width: 320px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 3px;
  }
  .hasil-kode {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 3px;
  }

@import url(https://fonts.googleapis.com/css?family=Oxygen:400,700);
a:link {
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}

a:visited,
a:link:hover,
a:visited:hover {
  text-decoration: none;
}

body {
  background: #e0e0e0;
  color: #444;
  font-family: 'Oxygen', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  background: #fff;
  max-width: 920px;
  margin: 4% auto;
  padding: 20px;
  font-family: 'Oxygen', sans-serif;
  border-radius: 10px;
  overflow: hidden;
}

.container h2 {
  background: #fff;
  position: relative;
  overflow: hidden;
  margin: 0 0 20px 0;
  font-size: 2.2em;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  padding: 0 12px 20px 12px;
  color: #4B77BE;
  border-bottom: 2px dotted rgba(0, 0, 0, 0.28);
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>

<script type='text/javascript'>
function colorToTurquoise() {
 document.getElementById("hasil-kode").style.backgroundColor = "#1abc9c";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Turquoise";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#1abc9c";
}

function colorToGreenSea() {
 document.getElementById("hasil-kode").style.backgroundColor = "#16a085";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Green Sea";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#16a085";
}

function colorToEmerald() {
 document.getElementById("hasil-kode").style.backgroundColor = "#2ecc71";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Emerald";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#2ecc71";
}

function colorToNephritis() {
 document.getElementById("hasil-kode").style.backgroundColor = "#27ae60";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Nephritis";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#27ae60";
}

function colorToPeterRiver() {
 document.getElementById("hasil-kode").style.backgroundColor = "#3498db";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Peter River";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#3498db";
}

function colorToBelizeHole() {
 document.getElementById("hasil-kode").style.backgroundColor = "#2980b9";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Belize Hole";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#2980b9";
}

function colorToAmethyst() {
 document.getElementById("hasil-kode").style.backgroundColor = "#9b59b6";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Amethyst";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#9b59b6";
}

function colorToWisteria() {
 document.getElementById("hasil-kode").style.backgroundColor = "#8e44ad";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Wisteria";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#8e44ad";
}

function colorToWetAsphalt() {
 document.getElementById("hasil-kode").style.backgroundColor = "#34495e";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Wet Asphalt";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#34495e";
}

function colorToMidnightBlue() {
 document.getElementById("hasil-kode").style.backgroundColor = "#2c3e50";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Midnight Blue";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#2c3e50";
}

function colorToSunflower() {
 document.getElementById("hasil-kode").style.backgroundColor = "#f1c40f";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Sunflower";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#f1c40f";
}

function colorToOrange() {
 document.getElementById("hasil-kode").style.backgroundColor = "#f39c12";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Orange";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#f39c12";
}

function colorToCarrot() {
 document.getElementById("hasil-kode").style.backgroundColor = "#e67e22";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Carrot";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#e67e22";
}

function colorToPumpkin() {
 document.getElementById("hasil-kode").style.backgroundColor = "#d35400";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Pumpkin";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#d35400";
}

function colorToAlizarin() {
 document.getElementById("hasil-kode").style.backgroundColor = "#e74c3c";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Alizarin";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#e74c3c";
}

function colorToPomegranate() {
 document.getElementById("hasil-kode").style.backgroundColor = "#c0392b";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Pomegranate";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#c0392b";
}

function colorToClouds() {
 document.getElementById("hasil-kode").style.backgroundColor = "#ecf0f1";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Clouds";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#ecf0f1";
}

function colorToSilver() {
 document.getElementById("hasil-kode").style.backgroundColor = "#bdc3c7";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Silver";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#bdc3c7";
}

function colorToConcrete() {
 document.getElementById("hasil-kode").style.backgroundColor = "#95a5a6";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Concrete";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#95a5a6";
}

function colorToAsbestos() {
 document.getElementById("hasil-kode").style.backgroundColor = "#7f8c8d";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Asbestos";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#7f8c8d";
}

function colorToChestnutRose() {
 document.getElementById("hasil-kode").style.backgroundColor = "#D24D57";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Chestnut Rose";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#D24D57";
}

function colorToAliceBlue() {
 document.getElementById("hasil-kode").style.backgroundColor = "#E4F1FE";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Alice Blue";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#E4F1FE";
}

function colorToSpray() {
 document.getElementById("hasil-kode").style.backgroundColor = "#81CFE0";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Spray";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#81CFE0";
}

function colorToGossip() {
 document.getElementById("hasil-kode").style.backgroundColor = "#87D37C";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Gossip";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#87D37C";
}

function colorToCreamCan() {
 document.getElementById("hasil-kode").style.backgroundColor = "#F5D76E";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "CreamCan";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#F5D76E";
}

function colorToSilverTree() {
 document.getElementById("hasil-kode").style.backgroundColor = "#68C3A3";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "SilverTree";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#68C3A3";
}

function colorToCapeHoney() {
 document.getElementById("hasil-kode").style.backgroundColor = "#FDE3A7";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "CapeHoney";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#FDE3A7";
}

function colorToMediumTurquoise() {
 document.getElementById("hasil-kode").style.backgroundColor = "#4ECDC4";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Medium Turquoise";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#4ECDC4";
}

function colorToWhiteSmoke() {
 document.getElementById("hasil-kode").style.backgroundColor = "#ECECEC";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "White Smoke";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#ECECEC";
}

function colorToLynch() {
 document.getElementById("hasil-kode").style.backgroundColor = "#6C7A89";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Lynch";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#6C7A89";
}


function colorToCrusta() {
 document.getElementById("hasil-kode").style.backgroundColor = "#F2784B";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Crusta";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#F2784B";
}

function colorToJungleGreen() {
 document.getElementById("hasil-kode").style.backgroundColor = "#26C281";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "JungleGreen";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#26C281";
}

function colorToHoki() {
 document.getElementById("hasil-kode").style.backgroundColor = "#67809F";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Hoki";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#67809F";
}

function colorToWaxFlower() {
 document.getElementById("hasil-kode").style.backgroundColor = "#F1A9A0";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "WaxFlower";
 ColorName.style.color = "gray";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "gray";
 ColorText.innerHTML = "#F1A9A0";
}

function colorToObservatory() {
 document.getElementById("hasil-kode").style.backgroundColor = "#049372";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Observatory";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#049372";
}

function colorToEcstasy() {
 document.getElementById("hasil-kode").style.backgroundColor = "#F9690E";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Ecstasy";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#F9690E";
}
</script> 

3. Publikan halaman anda.
4. Silahkan lihat hasilnya.

Demikianlah, tutorial cara membuat color picker di blog. semoga bermanfaat untuk anda semua.

Berbagi :