Cara Menggunakan Pemilih Warna untuk Menemukan Warna dari Piksel Apa Pun
Jawaban Cepat
Untuk memilih warna: buka Color Picker, unggah gambar (atau gunakan pipet layar), klik piksel yang warnanya Anda inginkan, dan nilai HEX, RGB, dan HSL akan muncul. Semua pemrosesan terjadi secara lokal — gambar Anda tidak pernah diunggah.
Perkenalan
Pemilih warna (juga disebut pipet) memungkinkan Anda menemukan warna piksel yang tepat. Ini penting untuk mencocokkan warna merek, mengambil sampel warna dari gambar, atau membuat palet warna dari foto. Pemilih warna berbasis browser dapat membaca warna dari gambar yang diunggah menggunakan Canvas API, dan EyeDropper API bawaan browser dapat memilih warna dari mana saja di layar. Panduan ini menunjukkan cara menggunakan pemilih warna di browser Anda.
Langkah demi Langkah
-
Buka alat Pemilih Warna
Buka halaman alat Pemilih Warna. Alat ini mendukung pemilihan warna dari gambar yang diunggah dan, di browser yang didukung, dari mana saja di layar melalui EyeDropper API.
-
Pilih sumber Anda
Untuk memilih gambar: unggah atau seret dan lepas gambar. Untuk memilih dari layar (khusus Chrome/Edge): klik tombol 'Pilih dari layar', lalu klik di mana saja pada layar Anda.
-
Klik piksel untuk mengambil sampel
Untuk memilih gambar, gerakkan kursor ke atas gambar dan klik piksel yang warnanya Anda inginkan. Alat ini membaca warna piksel dari kanvas menggunakan getImageData(). Kaca pembesar dapat membantu Anda memilih piksel yang tepat.
-
Baca nilai warnanya
Alat ini menampilkan warna yang dipilih dalam format HEX, RGB, dan HSL, bersama dengan contohnya. Nilai-nilai diperbarui secara instan saat Anda menggerakkan kursor.
-
Salin warnanya
Klik Salin di samping format apa pun untuk menyalin nilai warna ke papan klip Anda. Gunakan di CSS, alat desain, atau aplikasi Anda.
Contoh
Pilih warna merek dari logo
Masukan: logo.png, klik pada piksel warna merek
Keluaran: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Contoh warna dari foto
Masukan: photo.jpg, klik pada piksel langit
Keluaran: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Pilih dari layar (Chrome/Edge)
Masukan: Klik 'Pilih dari layar', lalu klik piksel mana pun di layar Anda
Keluaran: Nilai HEX piksel tersebut, misalnya #ff5733
Masalah Umum
- Anti-aliasing memadukan warna di tepinya —piksel di tepi antara dua warna merupakan perpaduan. Ambil sampel dari tengah area warna solid untuk akurasi.
- EyeDropper API tidak didukung —pemilih layar memerlukan Chrome 95+ atau Edge 95+. Firefox dan Safari tidak mendukungnya; gunakan metode unggah gambar sebagai gantinya.
- Kompresi JPEG mengubah warna —JPEG kompresi lossy sedikit mengubah warna piksel. Untuk warna merek yang tepat, gunakan PNG atau sumber vektor asli.
- Perbedaan profil warna —gambar dengan profil warna tertanam (ICC) mungkin ditampilkan berbeda dari nilai piksel aslinya.
Kiat
- Gunakan kaca pembesar untuk memilih piksel yang tepat —pada zoom tinggi, Anda dapat memilih satu piksel yang tepat, bukan tepian yang tercampur.
- Ambil sampel beberapa piksel dari area padat dan buat rata-ratanya jika kompresi menimbulkan noise —ini memberikan warna yang lebih representatif.
- Gunakan EyeDropper API (Chrome/Edge) untuk memilih warna dari aplikasi apa pun, bukan hanya gambar di browser.
- Gunakan Pemilih Warna kami untuk pengambilan sampel warna pribadi secara instan —gambar Anda tidak pernah keluar dari browser Anda.