Butuh warna persis dari logo, tangkapan layar, foto, atau referensi desain? Muat gambarnya, gerakkan kursor di atasnya untuk melihat warna di bawah kaca pembesar, lalu klik untuk menyimpannya. Setiap warna yang disimpan menampilkan HEX, RGB, dan HSL-nya dengan tombol salin satu klik.
Ia membaca piksel langsung dari gambar di browser Anda, jadi pengambilan berlangsung seketika dan file tidak pernah diunggah — praktis untuk warna merek yang lebih baik tidak Anda kirim ke situs sembarangan.
Cara pakai
- Tambahkan gambarJatuhkan gambar atau tangkapan layar yang ingin Anda ambil warnanya.
- Arahkan dan klikKaca pembesar memperbesar piksel yang tepat; klik untuk menyimpan warnanya.
- Salin nilainyaAmbil HEX, RGB, atau HSL untuk tiap warna yang Anda simpan.
Kadang Anda butuh satu warna dari sebuah gambar dan tidak ada yang lain yang cocok — biru persis di sebuah logo, abu-abu di balik tombol pada tangkapan layar, sebuah corak di foto yang ingin Anda pakai ulang. Mata Anda tidak bisa membaca kode hex dari layar, dan warna yang tampak pas biasanya meleset beberapa digit. Pemilih ini memungkinkan Anda memuat gambar, bergerak di atasnya dengan loop pembesar yang memperbesar piksel di bawah kursor, dan mengeklik untuk menyimpan piksel persis yang Anda inginkan sebagai sampel — HEX, RGB, dan HSL ditampilkan bersama, masing-masing dengan tombol salin.
Alat ini membaca piksel secara lokal di browser Anda dari sebuah kanvas: tidak ada yang diunggah, tidak ada akun, dan setelah pemuatan pertama ia bekerja luring. Itu penting saat gambarnya berupa mockup yang belum dirilis, aset merek klien, atau tangkapan layar internal. Ini pengambil sampel titik — setiap klik membaca satu piksel, yang persis tepat untuk logo bersih atau UI rata, dan butuh sedikit kehati-hatian pada foto yang berderau. Jika Anda lebih ingin warna dominan seluruh gambar ditarik otomatis, itulah gunanya alat palet terpisah; yang ini untuk mengarahkan ke piksel tertentu dan mengambil nilainya.
Untuk apa orang memakainya
Pulihkan warna persis sebuah merek dari logo lama saat spesifikasinya sudah hilang
Cocokkan tombol atau judul dengan warna pada tangkapan layar situs yang Anda suka
Tarik warna utama, aksen, dan teks dari sebuah logo dalam satu proses
Ambil sebuah corak dari foto untuk dipakai sebagai latar atau aksen
Baca warna sesungguhnya di layar dari elemen semi-transparan pada tangkapan layar
Salin warna sebagai HSL agar Anda bisa mencerahkan atau meredamnya untuk keadaan arahkan-kursor atau varian
Ketika Anda butuh warna yang persis, bukan warna yang mirip
Anda sedang membangun ulang sebuah merek dan satu-satunya rujukan adalah logo lama. Anda mencocokkan tombol dengan tangkapan layar situs yang Anda suka. Anda menemukan sebuah rona di foto dan ingin memakainya di desain Anda sendiri. Dalam setiap kasus masalahnya sama: mata Anda tidak bisa membaca kode hex dari layar. "Toska itu" sebenarnya belasan toska yang sedikit berbeda, dan monitor menggesernya lebih jauh. Anda butuh angka yang benar-benar dipegang piksel itu.
Itulah yang dilakukan alat ini. Muat sebuah gambar, gerakkan di atasnya, dan sebuah loupe pembesar mengikuti kursor Anda menunjukkan piksel di bawahnya, dibesarkan sehingga Anda bisa mendarat pada yang persis Anda inginkan. Klik, dan warna itu tersimpan sebagai swatch. Setiap swatch mendaftar nilai HEX, RGB, dan HSL-nya dengan tombol salin di samping masing-masing, jadi Anda langsung dari piksel di gambar ke kode di papan klip Anda.
Gambar tidak pernah meninggalkan mesin Anda. Piksel dibaca secara lokal di browser dari sebuah kanvas — tidak ada yang diunggah, tidak ada akun, dan begitu halaman dimuat ia tetap bekerja dengan jaringan mati. Itulah intinya ketika "gambar" itu adalah mockup yang belum dirilis, aset merek klien, atau tangkapan layar internal yang tak seharusnya Anda serahkan ke alat web acak.
Bagaimana ia bekerja dalam praktik
- Loupe untuk presisi. Logo dan UI punya tepi keras di mana warnanya berubah dalam satu piksel — anti-aliasing berarti piksel di sebelahnya adalah campuran keruh. Tampilan yang dibesarkan membiarkan Anda melihat persis piksel mana yang sedang Anda tempati sebelum Anda memutuskan, sehingga Anda memilih warna merek yang datar dan bukan tepinya.
- Setiap klik menyimpan swatch. Pengambilan sampel bukan satu-per-satu-lalu-hilang. Klik ke sekeliling gambar dan setiap warna menumpuk dalam daftar, jadi Anda bisa menarik warna utama logo, aksennya, dan warna teks dalam satu pass dan membandingkannya bersebelahan.
- Tiga format, satu pilihan. Setiap swatch menampilkan HEX, RGB, dan HSL sekaligus. Anda tidak mengambil sampel ulang untuk mengubah format — warna yang sama sudah duduk di sana dalam ketiganya, masing-masing dengan tombol salinnya sendiri.
HEX, RGB, HSL — mana yang disalin
Mereka tiga cara menuliskan warna yang sama, dan yang tepat bergantung pada ke mana ia pergi.
- HEX (
#3A7BD5) adalah bawaan untuk web — CSS, kebanyakan alat desain, dokumen merek. Ringkas dan bisa ditempel secara universal. Salin ini kecuali Anda punya alasan untuk tidak. - RGB (
rgb(58, 123, 213)) mengeja kanal merah, hijau, dan biru. Berguna ketika sebuah alat menginginkan nilai kanal, ketika Anda butuh alfa (rgba), atau ketika Anda menalar bagaimana sebuah warna dicampur. - HSL (
hsl(215, 65%, 53%)) menggambarkan hue, saturasi, dan lightness. Inilah yang diraih ketika Anda ingin menyesuaikan warna ketimbang sekadar memakainya ulang — senggol lightness-nya untuk keadaan hover, turunkan saturasinya untuk varian teredam, jaga hue-nya dan bangun sebuah skala.
Satu batas jujur, dan alat saudara
Ini adalah pengambil sampel titik: setiap klik membaca satu piksel. Pada logo yang bersih atau UI datar itu persis yang Anda inginkan. Pada foto yang ramai — grain, gradien, artefak JPEG — dua piksel tetangga bisa berbeda, jadi pilih dari area datar dan gunakan loupe untuk menghindari mendarat pada pencilan. Tidak ada kuas rata-rata-sebuah-area di sini.
Dan jika Anda tidak ingin memilih dengan tangan sama sekali, img.diy punya alat palette terpisah yang memindai seluruh gambar dan menyerahkan warna dominannya secara otomatis. Keduanya menjawab pertanyaan yang berbeda. Alat palette memberi tahu Anda warna apa gambar ini terbuat; pengambil warna membiarkan Anda menunjuk satu piksel spesifik — titik persis ini pada logo, tombol yang satu itu — dan mengambil nilainya. Raih alat palette untuk merangkum sebuah gambar, dan yang ini ketika Anda sudah tahu titik yang Anda inginkan.
Muat sebuah gambar, arahkan untuk menemukan piksel, klik untuk menyimpannya, salin format yang Anda butuhkan.
Kenapa IMG.DIY
Kaca pembesar
Memperbesar agar Anda mengeklik piksel yang tepat.
HEX / RGB / HSL
Setiap warna tersimpan dalam tiga format.
Salin satu klik
Salin nilai apa pun langsung ke clipboard.
Privat
Piksel dibaca secara lokal — tanpa unggahan.