Cara Membuat Color Picker di Halaman Statis Blog Dengan Menggunakan HTML5

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Color Picker di Halaman Statis Blog Dengan menggunakan HTML5, Tapi sebelum itu saya akan memberitahukan apa sih itu Color Picker.

Apa itu Color Picker ?

Color Picker dalam bahasa inggris memiliki arti ‘Pemilih warna’. Sesuai dengan namanya, Color Picker merupakan tools atau alat yang memiliki fungsi untuk memilih warna dan akan ditampilkan secara detail, Seperti warna HEX dan RGB-nya.

Bicara soal Tools Color Picker, pada artikel kali ini penulis akan memberikan sedikit tutorial singkat Cara Membuat Halaman Color Picker Responsive di Blogger. Jika kamu tertarik untuk membuatnya, kamu bisa simak dalam tutorial berikut ini.

Cara Membuat Color Picker di Halaman Statis Dengan HTML5

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Selanjutnya masuk ke menu HALAMAN > Buat Halaman Baru dan Masukan Judul Color Picker di atas.
3. Masuk ke mode HTML ( Bukan Compose ) dan paste kode dibawah ini tepat di halaman HTMLnya.

<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>

4. kalau sudah silahkan klik PUBLISH dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Color Picker di Halaman Statis Dengan menggunakan HTML5 dengan mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.