Cara Membuat Color Picker Pada HTML

KOMPTIK - Color Picker atau yang biasa disebut dengan kode HTML ini sering digunakan pada para desain website ataupun grafis-grafis yang lebih sering menggunakan gradasi warna pada tampilan website/ blog mereka.

Nah di postingan kali ini saya akan menshare cara membuat clor picker pada codngan html yang bisa di gunakan ataupun yang lebih sering.

Cara memasang color picker ini tentunya kalian pikirkan sendiri ingin meletakkannya di mana. Contoh untuk pemasangan pada postingan blog yaitu;
Pertama-tama masuk ke akun blog kalian.
Masuk ke postingan blog-new post-masuk ke postingan html (bukan compose).
Masukkan kode warna di bawah ini
Kode warna

Pilih Warna

Dapatkan Kode Warna

Scriptnya;

<h3 style="text-align: center;">Pilih Warna</h3>

<div style="text-align: center;"><input id="inputColor" type="color" value="#ff1a1a" /><br /></div>

<div style="text-align: center;"><a class="tombol" onclick="getColor()" title="Dapatkan Kode Warna">Dapatkan Kode Warna</a></div>

<p id="colorHex" style="text-align: center;"></p>

<p id="colorRGB" style="text-align: center;"></p>

<style type="text/css">

input{

width:20%;

cursor: pointer;

}

a.tombol{margin:3px;height:30px auto;padding:5px 10px;color:#ff1744;background-color:#f4f4f4;border:3px solid #f4f4f4;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;transition:all 0.3s ease;font-family:'Roboto',sans-serif;position:relative}

a.tombol:hover{box-shadow:3px 3px 10px #999999;transition:all 0.3s ease}

@media only screen and(max-width:720px){tombol:width:95%}

</style>

<script type="text/javascript">

function getColor(id, text, btn) {

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>

Lihat juga :

lengkap kode HTML/ CSS disini!

Blog menggunakan terjemahan otomatis Google