Pengambil Warna dari Gambar
Ambil warna dari gambar apa pun dengan lup 8× dan susun paleta sampai 12 swatch: hex, RGB, dan HSL, diekspor sebagai JSON, teks, atau CSS.
Gambar digambar dan disampel secara lokal di browser Anda. Tidak ada yang diunggah.
Ambil warna dari gambar
Klik untuk memilih gambar atau seret PNG, JPG, WebP, atau GIF ke sini
Cara kerja
Gambar yang tampil diperkecil agar muat di halaman, tetapi penelusan tidak pernah memercayai bitmap kecil itu: sebuah kanvas tersembunyi menyimpan berkas pada resolusi native penuh, dan setiap posisi kursor dipetakan dari koordinat layar ke grid native itu sebelum satu piksel dibaca.
- Dari kursor ke piksel
- Tiapan pilihan mengambil posisi klik relatif terhadap gambar yang dirender, dikali naturalWidth ÷ renderedWidth, lalu dibulatkan menjadi indeks piksel. Karena ukuran render berasal dari getBoundingClientRect —piksel CSS—, petanya benar pula di layar DPI tinggi: devicePixelRatio memengaruhi cara browser melukis, bukan posisi relatif penunjuk Anda di atas gambar. Warnanya sendiri dibaca dengan getImageData dari kanvas resolusi native, jadi yang Anda dapat adalah piksel asli berkas, bukan artefau pratinjau yang diperhalus.
- Lup dan eyedropper sistem
- Lup 8× menggambar ulang jendela 15 piksel di sekitar kursor dengan penskalaan nearest-neighbor sehingga tiap piksel tetap kotak dan terhitung, dengan crosshair menandai piksel persis yang disampel dan hex-nya di bawah. Di mana API EyeDropper ada, tombol layar penuh menyerahkan pekerjaan itu ke pemilih asli browser —pipeline koordinat yang sama, tetapi jangkauannya bisa keluar dari halaman ini.
- Pilihan manual, tanpa kuantisasi
- Warna terpilih masuk ke paleta berisi maksimal 12 dengan duplikat hex persis ditolak, karena tepi, gradien, dan derau kompresi foto menghasilkan puluhan warna nyaris sama yang hanya bisa dinilai manusia layak disimpan atau tidak. Keluarannya —hex, RGB, HSL, dan ekspor JSON/CSS— adalah daftar keputusan yang benar-benar Anda buat.
Pertanyaan yang sering diajukan
Mengapa warna berubah dari piksel ke piksel di dekat tepi atau gradien?
Karena itulah yang dilakukan gambar sungguhan: tepi di-anti-alias, gradien di-dither, dan kompresi JPEG menaburkan rona tetangga di setiap transisi. Mengambil satu piksel dari foto mobil merah bisa jujur mengembalikan warna merah muda keabuan. Gunakan lup 8× untuk mendarat di tengah area datar, dan ambil beberapa sampel dari wilayah yang sama untuk menilai warna dominannya.
Lalu apa yang saya lakukan dengan warna-warna terpilih?
Setiap swatch membawa hex, RGB, dan HSL, masing-masing bisa disalin dengan satu klik, dan paleta diekspor sebagai JSON, teks polos, atau variabel CSS. Langkah lanjutan yang masuk akal untuk kerja UI adalah memeriksa keterbacaan pasangan teks-latar dengan Pemeriksa Kontras Warna bawaan.
Mengapa tidak mengekstrak paleta otomatis dari seluruh gambar?
Memang disengaja: alat ini pengambil warna, bukan kuantizer. Ekstraksi paleta otomatis merata-ratakan atau mengelompokkan jutaan piksel (median-cut, k-means) dan mengembalikan warna representatif yang tidak dipilih siapa pun —serupa versi keruh dari rona yang Anda inginkan. Setiap warna di paleta Anda ada di sini karena Anda menunjuknya, dan karena itulah duplikat ditolak serta batasnya sengaja 12.
Di mana tombol ambil layar penuh? Saya tidak melihatnya.
Tombol itu hanya muncul bila browser Anda menyediakan API EyeDropper —saat ini Chrome dan Edge di desktop. Tombol itu menyerahkan pengambilan ke eyedropper kelas sistem operasi yang bisa mengambil piksel mana pun di layar Anda, bukan hanya gambar ini. Di Firefox dan Safari tombolnya tidak ada karena API-nya belum ada, dan lup pembesarlah jalur lengkapnya.
Apakah ada yang diunggah ke server?
Tidak. Gambar didekode ke sebuah kanvas di tab ini dan setiap sampel dibaca dengan getImageData dari salinan lokal itu. Tidak ada unggahan, dan satu-satunya tugas halaman —piksel masuk, hex keluar— sama sekali tidak butuh jaringan.