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.
di postingan kali ini saya akan menshare cara membuat clor picker pada
codngan html yang bisa di gunakan ataupun yang lebih sering.
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
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%}
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-fd]{2})([a-fd]{2})([a-fd]{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+’)’;
}
<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-fd]{2})([a-fd]{2})([a-fd]{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>
