Cara Membuat Color Picker Pada HTML

views
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




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 :
Komptik.

404 Not Found!



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

Post a Comment (0)
Previous Post Next Post

App Intellifluence

I'm inviting you to join Intellifluence with me and get paid to do influencer reviews.

g00!




You may like these posts


Seedbacklink

BACA ARTIKEL LAINNYA DI GOOGLE NEWS