Cara Membuat Halaman Color Picker Responsive dengan HTML5

Color picker jika diartikan kedalam bahasa Indonesia yang berarti Pemilihan Warna. Apa gunanya color picker ? ya seperti namanya untuk pemilihan warna atau dalam pembuatan skema warna, color picker biasanya ditemukan didalam perangkat lunak grafik atau online.

Color picker juga dapat kamu miliki sendiri dengan membuatnya dihalaman web kamu khususnya halaman blogger, color picker akan menampilkan warna secara detail, misalkan seperti warna HEX dan RGB. Color picker biasanya ditemukan disebuah aplikasi atau software editor, selain ditemukan diaplikasi atau software editor, bukan hanya editor saja yang menggunakan color picker tersebut, para desainer web juga menggunakan color picker untuk menemukan warna warna unik dan menarik yang akan berguna untuk memperindah website mereka.

Untuk memiliki sebuah halaman color picker, kamu dapat mengikuti tutorial dibawah ini, namun color picker yang saya sajikan di artikel ini mungkin berbeda dengan color picker yang sering kamu temui, karna yang saya sajikan sangatlah sederhana, namun jika kamu tetap ingin mencobanya yuk ikuti tutorial dibawah ini.

Cara Membuat Halaman Color Picker HTML5

1. Pertama Login dulu ke Blogger,
2. Pada dashboard blogger, pilih Halaman/Page➜ Buat Halaman Baru➜ Dalam Mode Penulisan Pilih "HTML" bukan "Compose", Kemudian Copy Kode dibawah ini   

   <input id="inputColor" type="color" value="#ff1a1a" />
   <button onclick="getColor()">Get Color</button>
   <br />
   <div id="colorHex">
   </div>
   <div id="colorRGB">
   <script>
   function getColor() {
       document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value;
       document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
   }
   function hexToRgb(hex) {
       var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
       var r = parseInt(result[1], 16);
       var g = parseInt(result[2], 16);
       var b = parseInt(result[3], 16);
       return 'RGB('+r+','+g+','+b+')'; 
   }
   </script>
   </div>

3. Sebelum dipublish silahkan tambahkan terlebih dahulu kata katanya diatas Color Picker tersebut, agar ketika seseorang menggunakan color picker milik kamu, tidak kesusahan.

Sekian tutorial singkat yang dapat saya bagikan, jika kamu ingin meminta atau request tutorial silahkan berkomentar atau langsung saja hubungi saya melalui contact form yang tersedia diwebsite ini. 

DEMO