Klik atau geser di bagian mana pun pada gambar untuk mengambil warna
Setelah mengklik gambar untuk mengambil warna, akan tercatat di sini agar mudah dilihat dan dibandingkan lagi
Unggah gambar, gerakkan mouse atau jari untuk memposisikan di atas gambar, kaca pembesar menampilkan piksel yang diperbesar secara real-time untuk membantu posisi yang akurat, klik untuk mengambil warna di posisi tersebut, langsung tampil dalam 3 format HEX, RGB, HSL dan bisa disalin sekali klik, juga otomatis mencatat riwayat pengambilan untuk dibandingkan — semua diproses langsung di browser, tanpa diunggah ke server.
Pengambilan dan pembacaan piksel sepenuhnya di browser lokal, gambar tidak melewati server mana pun
Saat hover, piksel di sekitar kursor ditampilkan diperbesar secara real-time, kotak merah menandai piksel spesifik yang akan diambil
HEX, RGB, HSL ditampilkan bersamaan, klik tombol salin langsung tempel ke alat desain atau kode
Tidak perlu daftar, tidak perlu bayar, dan tidak ada batasan pemakaian tersembunyi
Skenario Umum
Baik untuk ambil warna brand, referensi warna foto, atau cek implementasi developer, klik gambarnya dan dapatkan nilai warna yang presisi.
Lihat warna website atau visual brand yang kamu suka, screenshot lalu unggah, klik langsung di bagian warna kuncinya untuk mendapatkan nilai HEX yang presisi untuk dipakai di desain atau kodemu sendiri.
Ambil warna langit, kulit, tanaman, dan tone natural lainnya dari foto pemandangan atau potret, jadikan referensi warna untuk rencana desain atau ilustrasi.
Saat developer mengimplementasikan desain, ambil warna dari screenshot desain dan screenshot halaman aslinya lalu bandingkan nilai HEX-nya, cepat memastikan warna sudah sesuai tanpa perlu menebak-nebak dengan mata.
Format Warna
Tiga cara berbeda untuk menjelaskan warna yang sama, pilih formatnya sesuai skenario tempat kamu akan menempelkannya.
| Format | Contoh Penulisan | Skenario Penggunaan Umum |
|---|---|---|
| HEX | #FF3B30 | CSS web, kotak input warna di kebanyakan alat desain (seperti Figma, Photoshop) |
| RGB | rgb(255, 59, 48) | Skenario yang perlu melihat atau mengatur nilai kanal merah, hijau, biru secara terpisah |
| HSL | hsl(4, 100%, 59%) | Menjelaskan berdasarkan hue, saturasi, lightness, praktis untuk mengatur gelap-terang atau saturasi pada hue yang sama |
Ketiga format menjelaskan warna yang sama persis, hanya cara penulisan nilainya berbeda; di halaman ini setiap format bisa disalin sekali klik, langsung tempel ke alat desain atau code editor yang kamu pakai.
Cara Pakai
Tidak perlu instal software apa pun, semua selesai langsung di halaman web, kaca pembesar membantu posisi yang presisi.
Klik untuk memilih atau seret gambar langsung ke halaman, mendukung JPG, PNG, WebP, GIF, maksimal 20MB, satu gambar per proses.
Gerakkan kursor di atas gambar, kaca pembesar menampilkan piksel di sekitarnya secara real-time, kotak merah menandai posisi spesifik yang akan diambil.
Klik atau lepas jari di posisi target untuk mengambil warna, langsung tampil nilai dalam 3 format HEX, RGB, HSL.
Klik tombol salin di sebelah format yang diinginkan, salin nilai warna ke clipboard untuk ditempel.
Penjelasan Teknis
Gambar akan didekode dulu di browser dan digambar ke canvas dengan resolusi yang sama persis dengan gambar asli, yang terlihat di halaman hanyalah tampilan diperkecil dari canvas ini; saat mengklik untuk mengambil warna, posisi tampilan akan dikonversi kembali ke koordinat piksel asli canvas untuk membaca warnanya — jadi seberapa kecil pun gambar ditampilkan di halaman, presisi pengambilan warna selalu sesuai resolusi asli gambar, tidak akan terdistorsi karena tampilan yang diperkecil.
Fungsi color picker adalah “mengklik untuk membaca nilai warna satu piksel”, alat murni interaktif untuk melihat, tidak menghasilkan file gambar apa pun yang perlu diunduh, sehingga secara alami tidak ada konsep batch “beberapa gambar masing-masing diproses menghasilkan beberapa hasil”; kalau perlu ambil warna dari beberapa gambar secara terpisah, cukup unggah dan lihat satu per satu — setiap kali ganti gambar, riwayat pengambilan warna saat ini akan terhapus.
FAQ
Color picker adalah fitur klik untuk membaca nilai warna piksel secara interaktif, tidak menghasilkan file ekspor apa pun, jadi tidak ada konsep “batch” — seberapa besar pun gambar yang diunggah, kamu tetap mengklik satu per satu titik tertentu untuk membaca warnanya, sehingga alat ini hanya mendukung unggah satu gambar dan tidak menyediakan mode batch.
Sepenuhnya diselesaikan di browser perangkatmu, memakai kemampuan pembacaan piksel Canvas bawaan browser untuk langsung membaca nilai warna dari data gambar di posisi yang diinginkan, semuanya tanpa mengunggah gambar asli ke server mana pun.
Yang ditampilkan di kaca pembesar adalah tampilan diperbesar dari area kecil di sekitar posisi kursor saat ini, sedangkan yang benar-benar diambil adalah warna dari satu piksel spesifik yang ditandai kotak merah; jika gambar memiliki gradasi atau noise, warna piksel yang bersebelahan bisa sedikit berbeda — cukup ambil sesuai piksel yang ditandai kotak merah, warnanya akan sesuai persis tanpa ada selisih.
Riwayat pengambilan hanya tersimpan di memori browser halaman yang sedang aktif, memudahkanmu membandingkan beberapa warna yang sudah diambil dalam satu sesi; setelah halaman di-refresh atau ditutup, riwayat akan terhapus, tidak disimpan permanen atau diunggah — jika perlu menyimpan nilai warna tertentu untuk jangka panjang, sebaiknya salin dan tempel dulu ke catatan atau alat desainmu sendiri.
HEX (misalnya #FF3B30) adalah format yang paling sering dipakai dalam pengembangan web dan kebanyakan alat desain, singkat dan mudah ditempel; RGB (misalnya rgb(255, 59, 48)) lebih intuitif saat kamu perlu melihat atau mengatur nilai kanal merah, hijau, biru secara terpisah; HSL (misalnya hsl(4, 100%, 59%)) menjelaskan warna berdasarkan hue, saturasi, dan lightness, lebih praktis saat kamu ingin mengatur gelap-terang atau saturasi pada hue yang sama. Ketiga format menjelaskan warna yang sama, pilih sesuai alat atau kode tempat kamu akan menempelkannya.
Bisa. Color picker membaca data piksel mentah setelah gambar didekode, tidak terpengaruh ukuran tampilan di halaman — meski gambar ditampilkan lebih kecil di halaman, pengambilan warna tetap dibaca secara presisi sesuai resolusi asli gambar di posisi yang bersangkutan, tidak akan bergeser warnanya karena tampilan yang diperkecil.
Tanpa daftar, tanpa menunggu, klik langsung bisa disalin dan dipakai.