Perlukan warna tepat daripada logo, tangkap skrin, foto, atau rujukan reka bentuk? Muatkan imej, gerakkan kursor anda ke atasnya untuk pratonton warna di bawah kanta pembesar, dan klik untuk menyimpannya. Setiap warna yang disimpan menunjukkan HEX, RGB dan HSL-nya dengan butang salin satu-klik.
Ia membaca piksel terus daripada imej dalam pelayar anda, jadi pemilihan adalah serta-merta dan fail tidak pernah dimuat naik — berguna untuk warna jenama yang anda lebih rela tidak hantar ke laman rawak.
Cara guna
- Tambah imejLepaskan gambar atau tangkap skrin yang anda mahu warnanya.
- Tuding dan klikKanta membesarkan piksel tepat; klik untuk menyimpan warna.
- Salin nilaiAmbil HEX, RGB atau HSL untuk setiap warna yang anda simpan.
Kadangkala anda memerlukan satu warna daripada imej dan tiada yang lain akan cukup — biru tepat dalam sesuatu logo, kelabu di belakang butang dalam tangkapan skrin, satu warna dalam foto yang anda mahu guna semula. Mata anda tidak boleh membaca kod hex daripada skrin, dan warna yang kelihatan betul biasanya tersasar beberapa digit. Pemilih ini membolehkan anda memuatkan imej, bergerak di atasnya dengan kanta pembesar yang memperbesar piksel di bawah kursor anda, dan mengklik untuk menyimpan yang tepat yang anda mahu sebagai sampel — HEX, RGB dan HSL semuanya ditunjukkan bersama, setiap satu dengan butang salin.
Ia membaca piksel secara setempat dalam pelayar anda daripada kanvas: tiada apa-apa dimuat naik, tiada akaun, dan selepas muatan pertama ia berfungsi luar talian. Itu penting apabila imej ialah mockup yang belum dikeluarkan, aset jenama pelanggan, atau tangkapan skrin dalaman. Ia pensampel titik — setiap klik membaca satu piksel, iaitu tepat betul untuk logo yang bersih atau UI rata, dan mengambil sedikit lebih berhati-hati pada foto yang berbunyi. Jika anda lebih suka keseluruhan warna dominan imej ditarik untuk anda secara automatik, itulah tujuan alat palet yang berasingan; yang ini adalah untuk menuding pada piksel tertentu dan mengambil nilainya.
Untuk apa orang menggunakannya
Pulihkan warna tepat sesuatu jenama daripada logo lama apabila spesifikasinya sudah tiada
Padankan butang atau pengepala dengan warna dalam tangkapan skrin laman yang anda suka
Tarik warna primer, aksen dan teks daripada logo dalam satu laluan
Ambil satu warna daripada foto untuk digunakan sebagai latar belakang atau aksen
Baca warna sebenar pada skrin bagi elemen separa lutsinar daripada tangkapan skrin
Salin warna sebagai HSL supaya anda boleh mencerahkan atau meredakannya untuk keadaan hover atau varian
Apabila anda perlukan warna yang tepat, bukan warna yang hampir
Anda membina semula jenama dan satu-satunya rujukan ialah logo lama. Anda memadankan butang dengan tangkapan skrin laman yang anda suka. Anda ternampak satu bayang dalam foto dan mahu menggunakannya dalam reka bentuk anda sendiri. Dalam setiap kes masalahnya sama: mata anda tidak boleh membaca kod hex daripada skrin. "Biru kehijauan itu" sebenarnya sedozen biru kehijauan yang sedikit berbeza, dan monitor mengalihkannya lebih jauh. Anda perlukan nombor yang piksel itu sebenarnya pegang.
Itulah yang alat ini lakukan. Muatkan imej, gerakkan di atasnya, dan loup pembesar mengikut kursor anda menunjukkan piksel di bawahnya, dibesarkan supaya anda boleh mendarat pada yang tepat anda mahu. Klik, dan warna itu disimpan sebagai petak. Setiap petak menyenaraikan nilai HEX, RGB dan HSL-nya dengan butang salin bersebelahan setiap satu, jadi anda pergi terus dari piksel dalam imej ke kod dalam papan keratan anda.
Imej tidak pernah meninggalkan mesin anda. Piksel dibaca secara setempat dalam pelayar daripada kanvas — tiada apa-apa dimuat naik, tiada akaun, dan sebaik halaman dimuatkan ia terus berfungsi dengan rangkaian dimatikan. Itulah maksudnya apabila "imej" ialah mockup belum dilancarkan, aset jenama pelanggan, atau tangkapan skrin dalaman yang anda tidak sepatutnya serahkan kepada alat web rawak.
Bagaimana ia berfungsi dalam amalan
- Loup untuk ketepatan. Logo dan UI mempunyai tepi keras di mana warna berubah dalam satu piksel — anti-aliasing bermakna piksel sebelah ialah campuran keruh. Paparan yang dibesarkan membolehkan anda melihat dengan tepat piksel mana anda berada sebelum anda memutuskan, jadi anda memilih warna jenama yang rata dan bukan tepi.
- Setiap klik menyimpan petak. Persampelan bukan satu-pada-satu-masa-dan-hilang. Klik di sekeliling imej dan setiap warna bertimbun dalam senarai, jadi anda boleh menarik utama logo, aksennya, dan warna teks dalam satu laluan dan membandingkannya bersebelahan.
- Tiga format, satu pilihan. Setiap petak menunjukkan HEX, RGB dan HSL sekali gus. Anda tidak mensampel semula untuk menukar format — warna yang sama sudah duduk di sana dalam ketiga-tiganya, setiap satu dengan butang salinnya sendiri.
HEX, RGB, HSL — yang mana untuk disalin
Ia tiga cara menulis warna yang sama, dan yang betul bergantung pada ke mana ia pergi.
- HEX (
#3A7BD5) ialah lalai untuk web — CSS, kebanyakan alat reka bentuk, dokumen jenama. Padat dan boleh ditampal secara universal. Salin ini melainkan anda ada sebab untuk tidak. - RGB (
rgb(58, 123, 213)) mengeja saluran merah, hijau dan biru. Berguna apabila alat mahu nilai saluran, apabila anda perlukan alfa (rgba), atau apabila anda menaakul tentang bagaimana warna dicampurkan. - HSL (
hsl(215, 65%, 53%)) menerangkan rona, ketepuan dan kecerahan. Ini yang untuk dicapai apabila anda mahu melaras warna dan bukannya sekadar guna semula — tolak kecerahan untuk keadaan tuding, turunkan ketepuan untuk varian tersamar, kekalkan rona dan bina skala.
Satu had jujur, dan alat adik-beradik
Ini ialah pensampel titik: setiap klik membaca satu piksel. Pada logo bersih atau UI rata itu tepat apa yang anda mahu. Pada foto bising — bijian, kecerunan, artifak JPEG — dua piksel jiran boleh berbeza, jadi pilih daripada kawasan rata dan guna loup untuk mengelak mendarat pada terpencil. Tiada berus purata-satu-kawasan di sini.
Dan jika anda tidak mahu memilih dengan tangan langsung, img.diy mempunyai alat palet berasingan yang mengimbas keseluruhan imej dan menyerahkan anda warna dominannya secara automatik. Kedua-duanya menjawab soalan yang berbeza. Alat palet memberitahu anda warna apa imej ini terbuat; pemilih warna membolehkan anda menuding pada satu piksel khusus — tempat tepat ini pada logo, butang satu itu — dan mengambil nilainya. Capai alat palet untuk meringkaskan imej, dan yang ini apabila anda sudah tahu titik yang anda mahu.
Muatkan imej, tuding untuk mencari piksel, klik untuk menyimpannya, salin format yang anda perlukan.
Mengapa IMG.DIY
Kanta pembesar
Zum masuk supaya anda klik piksel tepat.
HEX / RGB / HSL
Setiap warna yang disimpan dalam tiga format.
Salin satu-klik
Salin sebarang nilai terus ke papan keratan.
Peribadi
Piksel dibaca secara tempatan — tiada muat naik.