Cara Membuat Color Picker Menggunakan HTML, CSS dan JavaScript
Color Picker - Adalah widget yang dapat menampilkan warna, biasanya digunakan untuk membuat skema warna, terkadang juga hanya untuk memilih warna yang sesuai. Nah kali ini kita akan membuat Color Picker ini dengan menggunakan HTML, CSS dan JavaScript.
Pertama tama, kita buat file HTML, kita namai filenya dengan index.html. Copy kode dibawah ini
Kode yang terdapat pada sintaks <body> merupakan kode untuk membuat kotak warnanya
Dan Selanjutnya :<style>
html,
body {height: 100%;}
body {
text-align: center;}
.kotak {
width: 60px;
height: 50px;
margin: 40px auto;}
.merah {
background-color: red;}
.hijau {
background-color: green;}
.biru {
background-color: blue;}
</style>
</head>
<body>
<div class="kotak merah" id="merah"></div>
<input type="range" id="sMerah" min="0" max="255">
<div class="kotak hijau" id="hijau"></div>
<input type="range" id="sHijau" min="0" max="255">
<div class="kotak biru" id="biru"></div>
<input type="range" id="sBiru" min="0" max="255">
<script src="script.js"></script>
</body>
</html>Kode yang terdapat pada sintaks <body> merupakan kode untuk membuat kotak warnanya
Kita buat file Javascriptnya dengan nama Script.js
<style type="text/javascript">
const sMerah = document.getElementById('sMerah');
sHijau.addEventListener('input', function() {
const r = sMerah.value;
const g = sHijau.value;
const b = sBiru.value;
document.body.style.backgroundColor = 'rgb('+ r +','+ g +','+ b +')';
});
const sHijau = document.getElementById('sHijau');
sHijau.addEventListener('input', function() {
const r = sMerah.value;
const g = sHijau.value;
const b = sBiru.value;
document.body.style.backgroundColor = 'rgb('+ r +','+ g +','+ b +')';
});
const sBiru = document.getElementById('sBiru');
sBiru.addEventListener('input', function() {
const r = sMerah.value;
const g = sHijau.value;
const b = sBiru.value;
document.body.style.backgroundColor = 'rgb('+ r +','+ g +','+ b +')';
});
</script>
