Cara Membuat Color Picker Sederhana

 

Pada artikel ini mimin akan memberikan sebuah tutorial

seputar programming yaitu membuat sebuah color picker

menggunakan HTML, CSS, JAVASCRIPT.

Color picker dapat kamu manfaatkan mecari kode warna

secara spesifik dan kalian bisa atur warna sesuka kalian

dan kalian bisa atur warna sesuai blog kamu.

Cara membuatnya cukup sederhana kalian tinggal

copy aja code di bawah dan paste di code editor 

kalian.

HTML

<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>

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%}

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+')'; }