Color picker adalah tools untuk memilih warna dan menghasilkan kode warna yang diinginkan. Biasanya digunakan oleh desainer grafis, desainer web maupun web developer untuk memilih warna sekaligus mendapat kode warna yang dinginkan untuk dimasukkan ke dalam website atau desain yang dibuatnya. Beberapa contoh color picker yang biasa digunakan di antaranya ColorPick Eyedropper, HTML Color picker dari W3School dan masih ada beberapa lainnya yang lebih kompleks.
Ide awalnya adalah saya ingin membuat sebuah package NPM sendiri yang saya upload di website npmjs.com. Akhirnya saya memutuskan untuk membuat library berupa color picker, karena saya pun kerap kali menggunakan fitur tersebut. Pertimbangan lainnya adalah karena membuat color picker relatif mudah sehingga bisa segera saya upload di npm js untuk melihat hasilnya.
Apa Itu arka-color-picker-js?
Package color picker tersebut saya beri nama arka-color-picker-js adalah sebuah package JavaScript ringan yang menyediakan fitur pemilih warna (color picker) modern dan responsif untuk website maupun aplikasi webmu. Package ini tersedia di NPM dan dapat digunakan pada berbagai proyek frontend.
Arka Color Picker memiliki Tampilan sederhana dan bersih, dengan Ukuran package kecil yang hanya sekitar beberapa kilobyte, mendukung berbagai format warna seperti (HEX, RGB, HSL) dan tentunya relatif mudah dikustomisasi sesuai kebutuhan UI.
 |
| Tampilan color picker yang sudah di instal pada website |
Jika kamu pernah menggunakan package color picker yang besar, pasti tahu rasanya performa website jadi berat. arka-color-picker-js hadir dengan ukuran ringan sehingga loading halaman tetap optimal. Arka Color Picker tidak perlu konfigurasi ribet. Cukup instal dan import, lalu gunakan di elemen HTML sesuai dokumentasi.
Color picker ini bekerja baik di Chrome, Firefox, Edge, maupun Safari, memastikan pengguna tidak mengalami masalah kompatibilitas. Pengguna bisa memilih warna sesuai keinginan secara langsung tanpa menebak kode warna.
Jika websitemu memiliki fitur custom theme, color picker menjadi fitur wajib agar user dapat mempersonalisasi tampilan. Dengan adanya color picker, tidak perlu membuat input manual untuk kode warna. Cukup drag dan pilih warna di UI.
Cara Instalasi via NPM
npm install arka-color-picker-js
Contoh Implementasi Sederhana pada html
<!DOCTYPE html>
<html>
<head>
<title>Color Picker Example</title>
<link rel="stylesheet" href="node_modules/color-picker-js/dist/color-picker.css">
</head>
<body>
<div id="color-picker"></div>
<script src="node_modules/color-picker-js/dist/color-picker.min.js"></script>
<script>
const colorPicker = new ColorPicker({
container: '#color-picker',
color: '#ff0000',
onChange: function(color) {
console.log('Color changed:', color);
}
});
</script>
</body>
</html>
Perbandingan dengan Package Color Picker Lain
arka-color-picker-js vs react-color
- arka-color-picker-js memiliki ukuran yang lebih kecil
- react-color dibuat khusus React, sedangkan arka-color-picker-js framework-agnostic
arka-color-picker-js vs pickr
- Secara UI, pickr lebih kompleks dan berat, arka-color-picker-js lebih minimalis
- jika hanya perlu basic picker, arka-color-picker-js lebih cocok
arka-color-picker-js adalah solusi praktis untuk menghadirkan fitur color picker di websitemu tanpa perlu library besar. Ringan, mudah diintegrasi, dan fleksibel digunakan di berbagai use case, mulai dari custom theme hingga desain grafis online. Untuk source code dari package ini kamu bisa mengunjungi https://github.com/ekosalvinus/arka-color-picker