Cara Membuat Tool Kode Warna Di Blog Responsive

Tool Kode Warna adalah Tool yang digunakan untuk mencari kode dari sebuah warna misalnya warna putih yaitu #FFFFFF arau hitam #000000 dan lain-lain. Tool ini sangat berguna sekali bagi kalian yang sedang belajar melakukan modifikasi tampilas sebuah blog. Sebenarnya banyak cara untuk mengetahui Kode Warna misalnya dengan aplikasi adobe photosop namun saya rasa akan sangat merepotkan jika harus membuka photosop saat kita akan mencari sebuah warna, tetapi dengan tool ini maka proses pencarian sebuah warna akan menjadi mudah tanpa perlu membuka photosop :v

Tools ini cukup simpel, ada 2 kegunaan yang bisa kita pakai dari tools kode warna tersebut.

• Yang pertama untuk mengetahui warnanya langsung, caranya kita tinggal mengklik warna yang ingin kita ketahui kode nya lalu akan muncul kodenya yang berderet di samping
• Yang kedua untuk mengecek kode warnanya, kelebihan dari tools ini kita bisa mengecek kode untuk mengetahui warna apakah itu, caranya kita tulis kode yang ingin kita ketahui warnanya ke dalam kolom yang tersedia tanpa mencantumkan tanda # (pagar) lalu klik "Update"

Tool ini responsive jadi bisa otomatis menyesuaikan ukuran lebar device yang kalian gunakan .
Untuk demonya bisa dilihat dibawah ini atau disini.

Jika kalin ingin membuat Tool Kode Warna diatas pada blog kalian, Caranya copy script dibawah pada postingan atau laman dalam mode HTML bukan yang Compose.

<style>
.color-code{text-align: center;margin:20px auto;width:100%;}
.color-responsive {position: relative;padding-bottom: 100%;height: 0;overflow: hidden}
.color-responsive object {position: absolute;top: 0;left: 0;width:100%;height:100%;border:0}
</style>
<div style="text-align: center;">
<div class="color-code">
<div class="color-responsive">
<object data="https://googledrive.com/host/0Bz4YdwRI3rnCc01fUWNaNGNHbjQ/" height="490" width="490"></object></div>
</div>
<div class="color-code">
<div class="color-responsive">
<object data="https://googledrive.com/host/0Bz4YdwRI3rnCNDVYN2tlcFF1b3c/" height="490" width="490"></object></div>
</div>
</div>