Cara Membuat Color Picker Pada HTML

This content uses Indonesian, please change to your language by pressing the translate button below.
Cara Membuat Color Picker Pada HTML
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




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 :

Comment Policy: Silahkan tuliskan komentar Sahabat yang sesuai dengan topik postingan halaman ini.

Post a Comment (0)
Previous Post Next Post

Baca juga: