Pengambil Warna Gambar
Ambil warna dari gambar apa pun dengan mengklik piksel. Kaca pembesar menampilkan piksel secara tepat, dan Anda mendapat nilai HEX, RGB, HSL plus riwayat warna.
Berjalan sepenuhnya di browser Anda. Data Anda tidak pernah diunggah.
Alat Terkait
Lihat SemuaApa itu Pengambil Warna Gambar?
Unggah atau tempel gambar lalu klik titik mana pun untuk membaca warna persis piksel tersebut sebagai HEX, RGB (atau RGBA jika semi-transparan), dan HSL. Kaca pembesar menampilkan piksel di sekitar kursor, kolom X/Y memungkinkan Anda menargetkan piksel tertentu, dan setiap warna yang diambil disimpan dalam riwayat yang bisa diklik.
Cara menggunakan Pengambil Warna Gambar
- Letakkan, pilih, atau tempel gambar (screenshot yang ditempel dengan Ctrl+V bekerja dengan baik).
- Gerakkan penunjuk di atas gambar untuk melihat tampilan perbesaran, lalu klik untuk mengambil warna.
- Atau ketik koordinat piksel X dan Y yang tepat.
- Klik nilai HEX, RGB, atau HSL untuk menyalinnya; pakai lagi warna sebelumnya dari Warna yang diambil.
Contoh
40×20 image whose top-right quadrant is pure green, pixel X=25, Y=5
#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)
Kapan menggunakan Pengambil Warna Gambar
Gunakan untuk mencocokkan warna merek dari logo atau screenshot, mengambil sampel warna dari foto untuk desain, atau memeriksa warna persis elemen UI. Perhatikan bahwa kompresi JPEG dan anti-aliasing sedikit mengubah warna piksel, jadi ambil sampel dari area datar, bukan tepi. Untuk mendapatkan seluruh palet sekaligus, gunakan Palet Warna dari Gambar.
Cara kerja Pengambil Warna Gambar
Gambar digambar di canvas dengan resolusi penuh dan pikselnya dibaca sekali dengan getImageData. Klik dipetakan dari koordinat layar ke koordinat piksel gambar, dan nilai RGBA pada indeks tersebut dikonversi ke HEX dan HSL (hue dalam derajat, saturasi dan lightness dalam persen). Kaca pembesar menggambar ulang area 11×11 piksel tanpa smoothing.
Kasus Penggunaan Umum
- Mencari kode HEX warna merek pada logo.
- Mengambil warna dari screenshot situs web untuk dipakai ulang di CSS.
- Memeriksa apakah dua elemen UI benar-benar memakai warna yang sama.
- Mengumpulkan warna dari foto untuk mood board.
Catatan Keamanan
Gambar didekode, diproses, dan di-encode secara lokal di browser Anda dengan Canvas API. Tidak ada yang diunggah ke server.
Pertanyaan Umum
Mengapa warnanya sedikit berbeda dari yang saya harapkan?
Format lossy seperti JPEG dan smoothing pada tepi mengubah nilai piksel. Ambil dari tengah area datar, atau gunakan kolom X/Y untuk memilih piksel yang tepat.
Apakah bisa dipakai pada gambar transparan?
Bisa. Piksel semi-transparan ditampilkan sebagai rgba() dengan nilai alpha-nya; nilai HEX menampilkan bagian RGB-nya.
Bisakah saya mengambil warna di luar browser?
Tidak, hanya dari gambar yang Anda muat. Ambil screenshot lalu tempel dengan Ctrl+V untuk mengambil warna dari apa pun di layar Anda.