Skip to main content

Cara Membuat Color Picker Pada HTML

Konten [Tampil]
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 :

BACA JUGA:

Buka Blog Komptik dengan aplikasi Google News dengan Ikuti atau Follow Komptik di Google News. Jangan lupa juga support kami: SUBSCRIBE DEPRIHANTA. :: APK ::
Help Me Plend: Jika Sahabat merasa bahwa artikel-artikel di blog ini bermanfaat, Sahabat bisa memberikan donasi melalui Paypal atau Pulsa.

Comment Policy: Silahkan tuliskan komentar Sahabat yang sesuai dengan topik postingan halaman ini. Untuk komentar out of topics silahkan masuk ke Buku Tamu Komptik.
Buka Komentar
Tutup Komentar